www.webdeveloper.com
Results 1 to 4 of 4

Thread: help with nav bar links

  1. #1
    Join Date
    Dec 2002
    Location
    US
    Posts
    128

    help with nav bar links

    I have been trying to adjust the links on the nav bar aligned right for little bit now and kinda need some help.

    The links should be vertical align in the middle of the section but if you take a look the links are along the top instead. I've messed with the padding and margin but it didn't seem to make a difference. What can I do so the links are vertical aligned in the middle of the section?

    Code:
    header, footer, section, aside, nav, article { display: block; }
    
    body {  }
    nav { width: 940px; height: 50px; margin: 0 auto; background-color: #520000; }
    header { position: relative; width: 940px; height: 200px; margin: 0 auto; }
    header h1, header h2 { margin: 0; line-height: normal; float: right; width: 650px; padding-right: 20px; }
    header h1 a { text-decoration: none; }
    header h2 { font-size: 12px; padding: 5px; }
    nav .menu ul { list-style: none; }
    nav .menu li { display: block; float: right; }
    nav .menu a { display: block; float: left; margin-right: 5px; padding: 0px 15px; text-decoration: none; }
    nav .menu a:hover { text-decoration: underline; }
    #wrapper { width: 940px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; }
    #headerlogo { position: absolute; margin-top: 4px; margin-left: 5px; }
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="styles/theme.css" />
    <title>My Webpage - Home</title>
    </head>
    <body>
    
    <div id="wrapper">
    
    <header>
    
    <div id="headerlogo"><img src="images/logo.png" width="237" height="271" alt="" /></div>
    
    <h1><a href="#">Company Website</a></h1>
    <h2>Your tag line here...</h2>
    
    </header>
    
    <nav>
    <ul class="menu">
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    </ul>
    </nav>
    
    </div>
    
    </body>
    </html>

  2. #2
    Join Date
    Oct 2011
    Posts
    9
    Here's what I did, see if it helps:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="styles/theme.css" />
    <title>My Webpage - Home</title>
    </head>
    <body>
    
    <div id="wrapper">
    
    <header>
    
    <div id="headerlogo"><img src="images/logo.png" width="237" height="271" alt="" /></div>
    
    <h1><a href="#">Company Website</a></h1>
    <h2>Your tag line here...</h2>
    
    </header>
    
    <div class="menu">
    <a href="#">Text</a>
    <a href="#">Text</a>
    <a href="#">Text</a>
    <a href="#">Text</a>
    <a href="#">Text</a>
    <a href="#">Text</a>
    </div>
    
    </div>
    
    </body>
    </html>
    Code:
    header, footer, section, aside, nav, article { display: block; }
    
    body {  }
    header { position: relative; width: 940px; height: 200px; margin: 0 auto; }
    header h1, header h2 { margin: 0; line-height: normal; float: right; width: 650px; padding-right: 20px; }
    header h1 a { text-decoration: none; }
    header h2 { font-size: 12px; padding: 5px; }
    .menu { width: 940px; padding: 5px; margin: 0 auto; text-align:center; padding: 10px; background-color: #520000; }
    nav .menu a:hover { text-decoration: underline; }
    #wrapper { width: 940px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; }
    #headerlogo { position: absolute; margin-top: 4px; margin-left: 5px; }

  3. #3
    Join Date
    Aug 2007
    Posts
    85
    you can simply use the line-height to make it vertical align....

  4. #4
    Join Date
    Dec 2002
    Location
    US
    Posts
    128
    I changed my code a little bit. I was able to fix it. Thanks!

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