www.webdeveloper.com
Results 1 to 3 of 3

Thread: Central Horizontal Alignment (and IE a:hover problem)

  1. #1
    Join Date
    Aug 2006
    Posts
    185

    Central Horizontal Alignment (and IE a:hover problem)

    Hi there,

    Currently i have a working horizontal centred CSS menu with the following code-
    Code:
    #nav{
    margin: 0;
    padding: 0;
    }
    
    #nav ul{
    text-align: center;
    border: 1px solid #FF0000;
    border-width: 1px 0;
    padding: 0;
    margin: 0;
    list-style: none;
    }
    
    #nav li{
    display: inline;
    margin: 0px 20px 0px 20px;
    padding: 0;
    }
    
    * html #nav ul{ /*IE only rule. Delete extra margin-bottom*/
    margin-bottom: 0;
    }
    
    #nav a{
    font-family: Xenophone;
    text-transform: lowercase;
    color: #FFFFFF;
    font-size: 20px;
    text-decoration: none;
    text-align:center;
    margin:0;
    padding:0;
    }
    
    #nav ul li a:hover{
    border-bottom: 3px solid #FF0000;
    margin: 0;
    padding:0;
    }
    and the HTML-

    HTML Code:
    <div id="nav">
    <ul>
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="News">News</a></li>
    <li><a href="#" title="Blog">Blog</a></li>
    <li><a href="#" title="Gallery">Gallery</a></li>
    <li><a href="#" title="Video">Video</a></li>
    <li><a href="#" title="Live">Live</a></li>	
    <li><a href="#" title="Sign Up">Sign Up</a></li>	
    <li><a href="#" title="Contact">Contact</a></li>	
    </ul>
    </div>
    I've attached an image of what it looks like at the moment. Yes, it looks fine, but i want it so each link is spread evenly across the width of the page (at the moment there is specified margins between each link) and also so the gap is automatically adjusted between each link when the window is resized, but to keep eveything in line, then when it reaches the minimum it can get to when resizing has happened without the navigation going along more than one line, it will stop the window from getting any smaller so that everything is kept inline.

    Hopefully that makes some sense =]

    Also i've noticed when in IE (it's fine in firefox) the a:hover does nothing! It should be showing a thick red line under the link, like it does in FF.

    Attached is the picture of what it is looking like at the moment.

    Thanks in advance. Ryan.
    Attached Images Attached Images
    Last edited by ryani210693; 12-03-2008 at 12:07 PM.

  2. #2
    Join Date
    Sep 2008
    Location
    Connecticut
    Posts
    123
    How about making a Div container for the links with a style width:100&#37;;, then making 9 divs, each containing a link, with the style width:11%;

  3. #3
    Join Date
    Aug 2006
    Posts
    185
    Hi 'Optimus203',

    I gave what you said a go, but unfortunately it managed things to become shifted to left aligned and vertical.

    And i've managed to sort out the IE hover problem thankfully! That's one more thing to cross off the list, but sadly i'm still having problems in trying to get this navigation to do what i want it to.

    Here's the code i have now by the way as it has changed a fair bit-

    Code:
    #nav{
    width:100&#37;;
    border: 1px solid #FF0000;
    border-width: 1px 0;
    text-align:center;
    margin:0;
    padding:0;
    white-space:nowrap;
    }
    
    #nav ul{
    width: 100%;
    list-style:none;
    margin:0;
    padding:0;
    }
    
    #nav ul li{
    display:inline;
    list-style:none;
    margin-right: auto;
    margin-left: auto;
    }
    
    #nav ul li a{
    font-family: Xenophone;
    text-transform: lowercase;
    color: #FFFFFF;
    font-size: 20px;
    text-decoration: none;
    line-height:25px;
    display:inline;
    width:12.5%;
    }
    
    #nav ul li a:hover{
    border-bottom: 3px solid #FF0000;
    font-family: Xenophone;
    text-transform: lowercase;
    color: #FFFFFF;
    font-size: 20px;
    text-decoration: none;
    line-height:25px;
    }
    Thanks for all your help, it is much appreciated.

    Thanks, Ryan.

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