...
PDA

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

katrinkamille
05-11-2010, 04:44 PM
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! :thumbsup:

<!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>
met
05-11-2010, 06:28 PM
#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
code beginner
05-11-2010, 10:55 PM
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
Excavator
05-12-2010, 02:13 AM
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:

a DocType Declaration
an element with a width (your ul in this case)
that elements left/right margins set to auto


You have some extra (?) divs there,
<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. (http://ahsanity.wordpress.com/2007/05/15/divitis-and-classitis-two-new-words-in-my-css-vocabulary/)

Plenty of centered menu examples here (http://nopeople.com/design/CSS%20tips/index.html) that might help you.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum