Menu
Hi everyone. I’m trying to find my bearings with css layout and positioning and I keep running into a quirk. I’m following a tutorial from the Art & Science of CSS p.93. It works fine as described, but when I try to apply it to my layout, my list items (sidebar=”nav” do not center like the tut. If anyone can help me out of my ineptitude, It would be appreciated.
CSS:
[CODE]
html {
font:small/1.4 “Lucida Grande”, Tahoma, sans-serif;
background:beige;
margin:0;
padding:0;
}
body {
font-size:92%
}
#wrap {
width:600px;
height:550px;
margin: 0 auto;
border: 1px solid black;
}
#head {
display:block;
margin: 20px auto;
width:550px;
height:100px;
border: 1px solid black;
background-attachment: relative;
background-image: url(bald-monkey.gif);
background-repeat: no-repeat;
background-position: center;
}
#nav {
display:block;
float:left;
margin-left:25px;
width:150px;
height:330px;
border: 1px solid black;
background-color: goldenrod;
}
#nav li {
position:relative;
margin: 0 auto;
list-style-type:none;
}
#nav a {
text-align:center;
display:block;
color:#fff;
text-decoration:none;
padding: 0 15px;
line-height: 2.5;
border-bottom:1px solid #fff;
}
#nav li:hover {
background: white;
}
#main {
display:block;
float:right;
margin-right:25px;
width:375px;
height:330px;
border: 1px solid black;
}
#foot {
display:block;
border: 1px solid black;
float:left;
width:550px;
height:35px;
margin-top:20px;
margin-left:25px;
}
h3 {
margin:0;
display:block;
text-align:center;
background-color:beige;
padding:30px 0;
font-family:verdana,sans-serif;
border-bottom:4px dotted black;
}
XHTML:
[CODE]<body>
<div id=”wrap”>
<div id=”head”>
</div>
<div id=”nav”>
<h3>SIDEBAR</h3>
<ul>
<li><a href=”/”>Item One</a></li>
<li><a href=”/”>Item Two</a></li>
<li><a href=”/”>Item Three</a></li>
<li><a href=”/”>Item Four</a></li>
</ul>
</div>
<div id=”main”>
</div>
<div id=”foot”>
</div>
</div>
</body>