SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to center my nav bar

    This is the html part of my code and it may be the problem.

    Code:
    <div id="navblock">
    			<ul id="mainNav">
    				<li><a href="../../index.php" title="Tarantula Database Home">Home</a></li>
    				<li><a href="../pages/search.php" title="Tarantula Database Search">Search</a></li>
    				<li><a href="../pages/submit.php" title="Tarantula Database Submit">Submit</a></li>
    				<li><a href="index.php" title="Tarantula Database Forum">Forum</a></li>
    				<li><a href="../pages/contact.php" title="Tarantula Database Contact">Contact</a></li>
    			</ul>
    		</div>

    With the css code it was floating to the left and looked fine but it wan't centered. it look like like this

    http://www.tarantuladatabase.com/this1.JPG

    So I changed my css code to this

    Code:
      }
    
     ul#mainNav li{
    	border-top: 1px solid #766454;
    	border-bottom: 1px solid #766454;
    	margin-right: auto;
    	margin-left: auto;
      }
    And that didnt work either

    http://www.tarantuladatabase.com/assets/forum

    Any idea how I can center it?

  2. #2
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    Just posted something in answer to a similar
    thread
    here that may help...

    Good luck,
    El
    F-Fox 2.0 :: WIN :: el design :: US

  3. #3
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You seem to have a fixed layout and to not be using relative sizes (which would be better) so in this case why don't you try something like:

    Code:
      ul#mainNav{
    
        position: relative;
    
        top: -45px;
    padding-left:100px;
        font-size: 14px;
    
        list-style: none;
    width:620px;
    	border-top: 1px solid #766454;
    	border-bottom: 1px solid #766454;
    height:30px;
      }
    
    
     ul#mainNav li{
    	margin-right: auto;
    	margin-left: auto;
    float:left;
      }


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
  •