Problem positioning these blocks in CSS
I am trying to achieve this->
(Black box is a signup/login section, blue is a nav bar, red is a header area with some
text
content) I am trying to get to that outcome with this css:@import url(//fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin);
html, body {
margin:0;
padding:0;
background-color:#fff;
font-family: 'Droid Sans', arial, serif;
color: #777;
font-size: 14px;
}
a {
color: #2e4987;
text-decoration: none;
}
img {
border: 0;
width: 250 px;
height: 250px;
margin: auto;
}
#nwtBox {
margin: 0 auto;
width: 960px;
height: 800px;
}
#nwtBox h1 {
color: #333;
font-weight: normal;
margin: 0 0 20px 0;
padding: 0;
}
#nwtBox h1 span {
float: right;
font-size: 14px;
font-weight: normal;
}
#nwtBox h2 {
font-weight: normal;
font-size: 20px;
padding: 0;
margin: 0 0 10px 0;
color: #333;
}
#nwtBox h3 {
padding:0;
margin: 0;
}
#nwtBox h3 img {
vertical-align: middle;
}
#nwtBox #header {
width: 960px;
background-color:#fff;
height: 100px;
border: solid;
border-width:thin;
border-color: red;
}
#nwtBox #header h1 {
text-align: center;
}
#nwtBox #navigation {
width: 960px;
background-color:#fff;
height: 100px;
border: solid;
border-width:thin;
border-color:blue;
}
#nwtBox #navigation ul {
list-style-type:开发者_如何学JAVA none;
padding: 0;
margin: 0;
}
#nwtBox #navigation ul li {
padding: 0 30px 0 0;
font-weight: bold;
}
#nwtBox #navigation ul li a {
color: #a8a8a8;
text-decoration: none;
}
#nwtBox #navigation ul li a:hover {
color: #2e4987;
}
#nwtBox #navigation .main-nav {
width: 500px;
overflow: auto;
}
#nwtBox #navigation {
float: left;
padding: 35px 0 0 0;
}
#nwtBox #navigation ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nwtBox #navigation ul li {
float: left;
padding: 0 30px 0 0;
font-weight: bold;
}
#nwtBox #navigation ul li a {
color: #a8a8a8;
text-decoration: none;
}
#nwtBox #navigation ul li a:hover {
color: #2e4987;
}
#nwtBox #navigation .main-nav {
width: 500px;
overflow: auto;
}
#nwtBox #signupLogin {
float:right;
width: 400px;
overflow: none;
padding: 32px 0 0 0;
text-align: right;
color: #999999;
border: solid;
border-width:thin;
border-color:red;
}
and this HTML
<body>
<div id ="nwtBox">
<div id ="signupLogin">
<ul>
<li> <a href =''> Sign Up</a>
</li>
<li> <a href =''> Log In</a>
</li>
</ul>
</div>
<div id = "navigation">
<ul class="main-nav">
<li class="main-nav-selected">
<a href="index.php">HOME</a>
</li>
<li>
<a href="stuff.php">STUFF</a>
</li>
<li>
<a href='stuff.php'>STUFF</a>
</li>
</ul>
</div>
<div id ="header">
<h1> TEXT</h1>
</div>
</body>
instead of the desired outcome, I get:
what's wrong?
Add clear:both to your navigation block
#nwtBox #navigation {
float: left;
padding: 35px 0 0 0;
clear:both;
}
Floats will not interfere with relatively placed elements; content will just flow around the float. As you have both the navigation and the login box as floats, they're not affecting the positioning of the content div. If you want to leave things simple, you can simply give the content div a top margin equal to loginHeight + loginTopMargin + navHeight + navTopMargin and you'll be OK.
Try this:
#nwtBox #navigation {
clear: both;
//remove float: left;
padding: 35px 0 0 0;
}
If you want to keep float: left in #navigation, you can add a div with style clear: both into HTML code.
<div id="signupLogin>
...
</div>
<div style="clear: both"></div>
<div id="navigation">
...
加载中,请稍侯......
精彩评论