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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    navigation set to the left, how do i centre it?!

    http://www.killthedesign.com/sangriasanctum/

    above is the link to the layout. as you can see the navigation is off to the side, im not very experienced with css and i can't figure out why it's doing that. here is the code below, any left would be appreciated!

    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" xml:lang="en" lang="en">
    
    
              <head>
    
    <title>»S a n g r i a | S a n c t u m</title>
    
    <style type="text/css">
    body, html { 
    padding : 0; 
    margin : 0; 
    } 
    
    
    body { 
    text-align: center;
    background: #131011;
    
    padding : 0; 
    
    } 
    
    
    
    
    
    #header {
    font : 700 12px "georgia";
    font-style: italic;
    color : #ffffff;
    letter-spacing: -3px;
    text-transform : none;
    text-align: center;
    padding-top: 0px;
    background: url(1.jpg);
    width : 894px;
    height : 357px;
    } 
    
    
    #container { 
    background: #000000;
    margin : 0 auto; 
    text-align : left; 
    width: 893px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
    }  
    
    
    
    
    #sidebar { 
    background: url(sidebar.jpg);
    width: 231px;
    float:left;
    height: 361px;
    padding : px; 
    } 
    
    
    #content {
    background: url(content.jpg);
    width: 661px;
    padding : px; 
    height: 361px;
    float: left;
    }
    
    
    
    
    #footer { 
    clear : both; 
    border-top : 0px solid #;
    font-weight: 400;
    padding : 0px; 
    text-align: left;
    height : 30px;
    margin-bottom: 10px;
    }
    
    
    
    #navdiv { 
    margin: 60px; 
    } 
    
    
    #nav2 { 
    padding : 5px; 
    } 
    
    
    #navigation2 { 
    list-style-type : none;
    list-style-image : none; 
    margin : 0; 
    padding : 0; 
    width : 880px; 
    } 
    
    
    #navigation2 li { 
    list-style-type : none; 
    width: auto;
    
    float : left; 
    } 
    
    
    #navigation2 li a { 
    background-color: #000000;
    background: url(link1.jpg);
    font : 410 13px "Trebuchet MS";
    font-weight:800;
    text-align : center; 
    text-transform : uppercase; 
    color : #ffffff;
    width: 85px;
    letter-spacing: -1px;
    padding : 2px; 
    padding-bottom: 2px;
    margin-bottom: 0px;
    clear: both;
    display : block; 
    text-decoration : none; 
    } 
    
    
    #navigation2 li a:hover { 
    background-color: #23B89A;
    font : 410 13px "Trebuchet MS";
    font-weight:800;
    text-align : center; 
    text-transform : uppercase; 
    color : #ffffff;
    width: 85px;
    letter-spacing: -1px;
    padding : 2px; 
    padding-bottom: 2px;
    margin-bottom: 0px;
    clear: both;
    display : block; 
    text-decoration : none; 
    border-bottom: 0px solid #000000;
    }
    
    .entrytext { 
    font-weight : 400; 
    } 
    
    
    .date-blog { 
    color : #2F5857; 
    font:60%/120% "Trebuchet MS";
    text-transform: uppercase;
    }
    
    
    i, em { 
    color : #36AA9F;
    }
    
    b, strong {
    color: #A768BF;
    }
    
    
    .commenter-name { 
    color : #A768BF; 
    text-transform : uppercase; 
    } 
    
    
    .comments { 
    background-color : #ffffff; 
    width : 450px; 
    text-align : left;
    color : #000000;  
    padding : 6px; 
    border : 4px double #383838;
    }
    
    
    h1 {
    color: #A461B9;
    font:190%/120% "Trebuchet MS";
    text-align: left;
    font-style: italic;
    font-weight:700;
    text-transform: none;
    letter-spacing : -1px;
    margin:0;
    padding:0;
    border-bottom: 4px double #17AC8B;
    }
    
    
    h2 { 
    color : #2F5857; 
    font:120%/120% "Trebuchet MS";
    text-transform: uppercase;
    padding: 0px;
    text-align: center;
    }
    
    h2:first-letter { 
    font:120%/100% "Trebuchet MS";
    font-weight: 400;
    padding : 0px;
    }
    
    
    h3 {
    background-color: transparent;
    color : #2AC2A8; 
    font:140%/140% "Trebuchet MS";
    text-align: right; 
    font-weight: 700;
    text-transform: lowercase;
    margin: 0;
    padding : 0px; 
    }
    
    
    h4 {
    background-color: #ffffff;
    color : #000000; 
    text-align:center;
    font-size: 14px;
    font-weight: 400;
    text-transform:none;
    margin:0;
    padding:0px;
    } 
    
    
    h5 {
    background-color: transparent;
    color : #009E80; 
    font:120%/100% "Trebuchet MS";
    letter-spacing:-1px;
    text-align:center;
    font-weight:400;
    margin:0;
    padding:0px;
    }
    
    
    .box {
    position: relative;
        display: table;
        vertical-align:middle;
        height: 400px;
        width: 300px;
        margin: 25px auto 0;
        border: 0px solid black;
        }
    
    .box2 {
       position: relative;
        display: table;
        vertical-align: middle;
        height: 400px;
        width: 220px;
        margin: 2px auto 0;
        padding: 24px;
        border: 0px solid black;
        color: #ffffff;
        font: tahoma;
        font-size: 12px;
        }
    
    
    .content {
        position: relative;
        display: table;
        vertical-align: left;
        height: 400px;
        width: 600px;
        margin: 25px auto 0;
        border: 0px solid black;
        color: #000000;
        font-family: tahoma;
        font-size: 12px;
        }
    
    
    
    
    
    a:link,a:visited {
    color: #9256C3;
    font-weight:400;
    text-align:justify;
    text-decoration: none;
    padding:0;
    } 
    
    
    a:hover { 
    color: #36BCB0;
    border-bottom: 1px solid #9256C3;
    } 
    
    
    blockquote { 
    background: #ffffff;
    width : 380px; 
    text-align : center; 
    color : #000000;  
    border-left: 7px solid #B0C8D5;  
    padding : 5px; 
    margin: 0;
    }  
    
    
    input, select, submit { 
    color : #000000; 
    background : #ffffff;  
    text-decoration : none; 
    text-align : left; 
    border: 1px solid #000000;
    } 
    
    </style>
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
              </head>
    
    
    
              <body>
    
    <div id="container">
    
    <div id="header">
    
    
    
    </div>
    
    
    <div id="nav">
    
    <div id="navdiv2">
    
    <div class="nave">
    
    <ul id="navigation2">
    
    
    <li><a href="http://link.com">Link</a></li>
    
    <li><a href="http://link.com">Link</a></li>
    
    <li><a href="http://link.com">Link</a></li>
    
    <li><a href="http://link.com">Link</a></li>
    
    <li><a href="http://link.com">Link</a></li>
    
    <li><a href="http://link.com">Link</a></li>
    
    <li><a href="http://link.com">Link</a></li>
    
    <li><a href="http://link.com">Link</a></li>
    
    <li><a href="http://link.com">Link</a></li>
    </ul> 
    
    </div>
    
    </div>
    
    <div id="sidebar">
    <div class="box2">
    
    <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 4,
      interval: 6000,
      width: 200,
      height: 300,
      theme: {
        shell: {
          background: '#7d0a27',
          color: '#000000'
        },
        tweets: {
          background: '#000000',
          color: '#ffffff',
          links: '#1ea3d4'
        }
      },
      features: {
        scrollbar: false,
        loop: false,
        live: false,
        hashtags: true,
        timestamp: true,
        avatars: false,
        behavior: 'all'
      }
    }).render().setUser('sangriasanctum').start();
    </script>
    <br>
    
    
    
    </div></div>
    
    
    
    
    <div id="content">
    
    
    <div class="content">
    <h2></h2>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    </div>
    <br />
    
    </div>
    
    
    
    
    
    <br /><br />
    </div>
    <div id="footer">
    <center>
    © Sangria Sanctum </center></div>
    </div>
    <br />
    </body>
    </html>

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    Code:
    #navigation2 {
    list-style-image:none;
    list-style-type:none;
    margin:auto;
    overflow:auto;
    padding:2px;
    width:810px;
    }
    gives the impression its centered but i expect its a few pixels off.

    there is a way to center ULs with varying-width LIs but i can't find the link atm. perhaps someone else will be able to find it

  • #3
    Regular Coder
    Join Date
    Sep 2009
    Posts
    167
    Thanks
    15
    Thanked 1 Time in 1 Post
    typically, when you want things to be in the center, place this into the div that you want to be centered:

    margin-left:auto
    margin-right:auto

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello katrinkamille,
    code beginner is right, margin: 0 auto; will center an element as long as that element has a width. You actually need 3 things to center an element:
    1. a DocType Declaration
    2. an element with a width (your ul in this case)
    3. that elements left/right margins set to auto


    You have some extra (?) divs there,
    Code:
    <div id="nav">
    
    <div id="navdiv2">
    
    <div class="nave">
    Are all 3 of those really needed? Read a quick description of what divitis is and how to avoid it.

    Plenty of centered menu examples here that might help you.
    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
    •