Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Angry Gah, css horizontal nav bar driving me crazy!

    Hi there,

    I'm trying to make a horizontal have bar for my site. The link is http://mensnaturalfitness.com/home.htm. I think I have most of the things covered, if you replace home.htm with nav.css in the address, you will find my code.

    What I'm trying to accomplish is making the bar 25px high while the text stays centered vertically. I want the buttons to be a set width (say 75px) so I get a uniform look. Lets not forget the hover image, I need it to be 25px high also. I'm just having real trouble getting the dimensions to stick right, or even work at all.

    Any help will be greatly appreciated, thanks.

  • #2
    Regular Coder maxvee8's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    185
    Thanks
    19
    Thanked 18 Times in 18 Posts
    You want some thing like the code below?!, where there are backgound colours you want your images... im guessing you can take it from there?

    test the page... more than happy to help if your not sure

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    *{padding:0; margin:0;}
    
    ul#nav {list-style:none; width:700px; height:25px; background-color:#000033;}
    
    ul#nav li{float:left; height:25px; width:70px; text-align:center; line-height:25px }
    
    ul#nav li a{display:block; height:25px; width:70px; text-decoration:none;}
    
    ul#nav li a:hover {background-color:#FFFFFF;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>test</title>
    </head>
    
    <body>
    <ul id="nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    </body>
    </html>
    Last edited by maxvee8; 05-08-2008 at 03:07 AM. Reason: line height added / no text dec
    "I have not failed, I've found 10,000 ways that don't work" Thomas Edison

  • Users who have thanked maxvee8 for this post:

    xlrustylx (05-08-2008)

  • #3
    New Coder
    Join Date
    May 2008
    Location
    Sydney, Australia
    Posts
    45
    Thanks
    0
    Thanked 8 Times in 8 Posts
    To set the height of the <a> tag, it has be be display:block, inline elements won't let you set a height/width. Also set line-height:25px to get the text to center vertically.

  • #4
    New Coder
    Join Date
    Apr 2008
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, I didn't use exactly what you suggested, but it knocked me off the wrong tracks and I finally came out with something I'm happy with.

    BTW, it may have been my computer, but I have having horrible margin issues with your code. Thought you may want to know if you use that in your sites.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    To set the height of the <a> tag, it has be be display:block, inline elements won't let you set a height/width. Also set line-height:25px to get the text to center vertically.
    The following piece of code works and allows you to set the height and width.

    Code:
    <p><span><a href="82b.html"><img src="81a.jpg" alt=" " width="100" height="80" /><br />
        Just a stranger in Paradise?</a></span></p>
    Taken from :- http://exitfegs.co.uk/Picchoosec.html

    Am I missing something here? Isn't 'span' inline?

    Frank
    Last edited by effpeetee; 05-08-2008 at 04:27 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is the wysiwyg page from my editor with css in the 'head' section.
    I corrected one or two small errors.

    http://exitfegs.co.uk/testfit.html

    Frank
    Last edited by effpeetee; 05-08-2008 at 05:40 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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