SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist FCC's Avatar
    Join Date
    May 2006
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering a navigation bar

    Hey, here is a screenshot of what I have:



    How would I center this bar? Here is my code:

    HTML
    Code:
    <div id="navContainer">
    <ul id="nav">
    <li><a href="#">服務簡介</a></li>
    <li><a href="#">特別通告</a></li>
    <li><a href="#">浩動預告</a></li>
    <li><a href="#" class='last' >查詢</a></li>
    </ul>
    </div>
    CSS
    Code:
    #navContainer
    {
    	border-bottom:  1px solid black;
    	background: url('../Images/navigationBackground.gif') repeat-x;
    	height: 25px;		
    	padding: 10px 0;
    	float: left;
    	width: 100%;
    }
    
    
    ul#nav
    {
    	list-style-type: none;	
    }
    
    ul#nav li 
    {
    	display: inline;	
    }
    
    #navContainer a 
    {
    	padding: 0 10px;
    	text-decoration: none;	
    	text-align: center;	
    	color: #FFF;
    	float: left;	
    	border-right: 2px solid #454744;
    	height: 22px;
    	line-height: 23px;
    }
    
    #navContainer a.last
    {
    	border: 0px;
    }
    
    #navContainer a:hover
    {
    	color: #ffe12b
    }
    Any ideas?

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add text-align: center to the ul and remove the float: left from #navContainer a.

  3. #3
    SitePoint Evangelist FCC's Avatar
    Join Date
    May 2006
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Killer. Thanks Tyssen.


Bookmarks

Posting Permissions

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