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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Center <ul> ?

    Hey guys.
    I cannot seem to center my navigation bar... I can adjust the margin but I would like it to be set to centered so if I change the browser window size it will stay in the middle.

    here is my code:
    Code:
    <!DOCTYPE html>
    <html>
    
    
    
    <head>
    	<title>Entrepreneurs Handy Hands</title>
        
        <link rel="stylesheet" type="text/css" href="HH_styles.css">
        
    </head>
    
    <body>
    
    
    <table> 
        <tr>
            <th>
            <div class="logo">
            <img src="HH_WEB_IMAGES/HandyHandslogo.jpg" width="300" height="150" 			align="middle">
            </div>
            <tr>
            	<td>
                	<ul id="menu">
                      <li><a href="">Home</a></li>
                      <li><a href="">About Us</a>
                        <ul>
                        <li><a href="">The Team</a></li>
                        <li><a href="">History</a></li>
                        <li><a href="">Vision</a></li>
                        </ul>
                      </li>
                      <li><a href="">Services</a>
                        <ul>
                        <li><a href="">House & office Cleaning</a></li>
                        <li><a href="">Window Cleaning</a></li>
                        <li><a href="">Painting</a></li>
                        <li><a href="">Pressure washing</a></li>
                        <li><a href="">Other services</a></li>
                        </ul>
                      </li>
                      <li><a href="">Contact</a>
                        <ul>
                        <li><a href="">Online</a></li>
                        <li><a href="">Right Here</a></li>
                        <li><a href="">Somewhere Else</a></li>
                        </ul>
                      </li>
                      <li><a href="">Portfolio</a></li>
                    </ul>
                </td>
        	</tr>
    
            </th>
        </tr>
        </table>
    
    
    </body>
    </html>
    here is my css:
    Code:
    body
    {
    background-image:url(HH_WEB_IMAGES/background.gif);
    }
    
    table,td,th
    {
    
    }
    table
    {
    width:100%;
    
    }
    th
    {
    height:150px;
    }
    td
    {
    }
    
    ul {
      font-family: Arial, Verdana;
      font-size: 14px;
      padding: 0;
      margin:0;
      list-style: none;
      text-align:center;
    }
    ul li {
      display: block;
      position: relative;
      float: left;
    
    }
    li ul { display: none; }
    ul li a {
      display: block;
      text-decoration: none;
      color: black;
      border-top: 1px solid #ffffff;
      padding: 5px 15px 5px 15px;
      background: white;
      margin-left: 1px;
      white-space: nowrap;
    }
    ul li a:hover { background: #617F8A; }
    li:hover ul {
      display: block;
      position: absolute;
      
    }
    li:hover li {
      float: none;
      font-size: 11px;
    }
    li:hover a { background: #617F8A; }
    li:hover li a:hover { background: #95A9B1; }
    I'm not sure what i'm doing wrong. Hopefully someone here will be able to point me in the right direction..

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello wordizlife,
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto



    If you'd rather not give your ul a width, have a look at this method.

    You should check out the link in my signature line about tables.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perfect.
    Yet when I set my with and my margins as you say for my logo for example, the image seems to always be offset too the right..
    Code:
    div.logo
    {
    width:0px;
    margin-left:auto;
    margin-right:auto;
    }
    Thanks again!

  • #4
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    dis-regard the last post.
    Figured it out:

    Code:
    IMG.logo {
    	width:300px;
    	height:150px;
        display: block;
        margin-left: auto;
        margin-right: auto 
    	}

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by wordizlife View Post
    dis-regard the last post.
    Figured it out:
    Yes, images need to be block level elements before they'll center that way.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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