Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
Like Tree1Likes
  • 1 Post By sasha_bolcina

Thread: Need help witch css for project

  1. #1
    fox
    fox is offline
    Junior Member fox's Avatar
    Join Date
    May 2015
    Location
    Hannover, Germany
    Posts
    18
    Member #
    49626

    Need help witch css for project

    Dear community,

    I have found both of these codes in internet, here they are:
    HTML:


    <!-- drop-down navigation with css only | CSS Snippets -->
    <body class="news">
    <header>
    <div class="nav">
    <ul>
    <li class="home"><a href="#">Home</a></li>
    <li class="tutorials"><a href="#">Tutorials</a>
    <ul>
    <li><a href="#">Tutorial #1@@</a></li>
    <li><a href="#">Tutorial #2</a></li>
    <li><a href="#">Tutorial #3</a></li>
    </ul>
    </li>
    <li class="about"><a class="active" href="#">About</a></li>
    <li class="news"><a href="#">Newsletter</a>
    <ul>
    <li><a href="#">News #1</a></li>
    <li><a href="#">News #2@@@</a></li>
    <li><a href="#">News #3</a></li>
    </ul>
    </li>
    <li class="contact"><a href="#">Contact</a></li>
    </ul>
    </div>
    </header>
    </body>

    CSS
    body {
    margin: 0;
    padding: 0;
    background: #ccc;
    }

    .nav ul {
    list-style: none;
    background-color: #444;
    text-align: center;
    padding: 0;
    margin: 0;
    }

    .nav li {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2em;
    line-height: 40px;
    text-align: left;
    }

    .nav a {
    text-decoration: none;
    color: #fff;
    display: block;
    padding-left: 15px;
    border-bottom: 1px solid #888;
    transition: .3s background-color;
    }

    .nav a:hover {
    background-color: #005f5f;
    }

    .nav a.active {
    background-color: #aaa;
    color: #444;
    cursor: default;
    }

    /* Sub Menus */
    .nav li li {
    font-size: .8em;
    }

    /*******************************************
    Style menu for larger screens

    Using 650px (130px each * 5 items), but ems
    or other values could be used depending on other factors
    ********************************************/

    @media screen and (min-width: 650px) {
    .nav li {
    width: 130px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
    }

    .nav a {
    border-bottom: none;
    }

    .nav > ul > li {
    text-align: center;
    }

    .nav > ul > li > a {
    padding-left: 0;
    }

    /* Sub Menus */
    .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
    }

    .nav li:hover ul {
    display: block;
    }

    .nav li ul li {
    display: block;
    }
    }

    (drop-down navigation with css only | CSS Snippets)
    When I started with my project, I had an idea to use it, but put my menu a little bit lower as I wanted to have title for my website.... I had one idea with top:70 px, but it didn't work. Here is how I noticed it down:
    .nav ul {
    list-style: none;
    background-color: #444;
    margin:10px;
    text-align:center;
    top: 70px;

    }

    What went wron? How should I change it ?
    Of course I gonna change other things too, but this was the first what I needed
    Cheers

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Add the title between <header> and <div class="nav">, like:
    <header>
    <h3>My title</h3>
    <div class="nav">
    ...

    If you just want space, add margin-top to .nav
    .nav {
    margin-top: 40px;
    }

  4. #3
    fox
    fox is offline
    Junior Member fox's Avatar
    Join Date
    May 2015
    Location
    Hannover, Germany
    Posts
    18
    Member #
    49626
    I have tried this but then it looked not so good:
    webseite.jpg

  5. #4
    Junior Member
    Join Date
    May 2015
    Posts
    27
    Member #
    49999
    give the element
    .nav{
    top:0px;/*what if you want */
    left:0px;
    right:0px;
    }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:38 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com