www.webdeveloper.com
Results 1 to 4 of 4

Thread: Double Navigation

  1. #1
    Join Date
    Aug 2012
    Posts
    2

    Double Navigation

    Hi, I'm having trouble achieving this navigation.
    I've done the first line (in red). But I can't seem to add the second line (in white).

    http://media.tumblr.com/tumblr_m9iw2nPbdF1rpbdj4.png

    Here's what I've done so far..

    html:
    <div id="menu-bar">
    <ul id="nav">
    <li><a href="/home">Home</a></li>
    <li><a href="/favourites">Favourites</a></li>
    <li><a href="/menu">Menu</a></li>
    <li><a href="/home">Bookings</a></li>
    <li><a href="/reviews">Reviews</a></li>
    <li><a href="/contact">Contact</a></li>
    </ul>
    </div>
    css:
    #menu-bar {
    padding-top: 11px;
    margin-bottom: 20px;
    }

    #nav {
    background-color: #000000;
    }

    ul#nav {
    width: 860px;
    float: left;
    margin: 10px 0 0 0; /* Space from nav bar to Huong Huong header */
    padding: 10px 0px 10px 30px; /* space around nav text */
    color: #FFFFFF;
    }

    ul#nav li {
    display: inline;
    margin: 0px 20px 0px 0px; /* Spaces between nav items */
    }

    ul#nav li a {
    text-transform: uppercase;
    color: #8b0b20;
    text-decoration: none;
    font-family: rockwell;
    letter-spacing: 1px;
    font-size: 15px;
    }
    Also what would be the best way to go about creating the divider lines? Thank you so much in advanced!

  2. #2
    Join Date
    Aug 2012
    Location
    Greece
    Posts
    5
    Why not wrpaping the second line in a span and css it as you wish?

    Something like
    Code:
    <li><a href="/home">Home</a><span class="secondline">About Us</span></li>
    and

    Code:
    span.secondline {display:block;color:#ffffff;font-size:0.7em}
    would do what you want.

  3. #3
    Join Date
    Aug 2012
    Posts
    2
    thank you!

    i figured it out just putting the second line in a <p> tag within each list item and floating the list left. But I will try out that way too.

  4. #4
    Join Date
    Aug 2012
    Location
    Greece
    Posts
    5
    Good luck

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles