ul and li pushing div out of alignment
I have all my divs centered with the left and right edges vertically aligned, but when I added the u开发者_JAVA百科l and li then my .nav started to have a background color that extends past the right hand edge. Any idea how to lock this down? max width doesn't prevent it from flowing outwards.
HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<title></title>
</head>
<body>
<div class="container">
<div class="header">
<img src="image/logo.png" width="155" height="110" alt="Big Box Property Preservation" />
</div>
<div class="navContainer">
<div class="miniNav">
<img src="image/link_banner.nav.png" width="189" height="44"/>
</div>
<div class="nav">
<ul class="nav">
<li><a href="URL" alt="HOME">HOME</a></li>
<li><a href="URL" alt="ABOUT US">ABOUT US</a></li>
<li><a href="URL" alt="OUR SERVICES">OUR SERVICES</a></li>
<li><a href="URL" alt="CONTACT US">CONTACT US</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="contentBody">
</div>
<div class="sidebar1">
</div>
</div>
<div class="footer" >
</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
body{
top:0;
left:0;
margin:0;
padding:0;
background-color:#666;
}
.container{
position:relative;
margin-top: 0%;
position:relative;
width:1000px;
margin:0px auto;
}
.header{
position:relative;
float:left;
width:900px;
height:120px;
background-color:#CFCA4C;
margin:0px 50px 0px 50px;
}
.navContainer{
position:relative;
float:left;
width:100%;
height:80px;
margin:0px 0px 0px 0px;
}
.miniNav{
height:100%;
position:absolute;
right:0px;
}
.nav{
float:left;
max-width:900px;
width:900px;
height:100%;
background-color:#FFFFFF;
overfow:hidden;
margin: 0 20px 0 50px;
}
ul.nav{
list-style:none;
padding: 0px;
}
ul.nav li{
display:inline;
padding:0px;
float:left;
}
.content{
float:left;
width:900px;
min-height:400px;
background-color:#FFFFFF;
margin:0px 50px 0px 50px;
}
.footer{
float:left;
width:900px;
height:80px;
background-color:#CFCA4C;
margin:0px 50px 0px 50px;
}
Both div and ul has class 'nav'. Ul with class nav should not have margins (they have already been added in div). So add:
ul.nav {margin: 0}
.nav {
width: 850px;
}
jsFiddle: http://jsfiddle.net/kongr45gpen/a5Auj/
What you really need to do is simply remove a lot of properties.
You should also set .container to 900px instead of 1000px, because that's how wide all the things inside it are.
You can remove almost all of the instances of float: left and margin.
Block-level elements (such as divs) will by default expand to fill the available width, so you don't need to specify width: 900px so many times. This isn't the behaviour if you float: left an element, but I've removed your instances of it.
So, bearing all that in mind, see: http://jsbin.com/ozemoy. Just one width is being set :)
加载中,请稍侯......
精彩评论