CSS - Positioning Div's
I've got three div's I'm worki开发者_StackOverflowng with: main, which is a container for the other two, header which consists only of an image for now, and navigation which has some links. Right now I'm having trouble positioning the navigation div directly under the header div, there's always one line of the main div in between them. Any suggestions on how to go about doing this?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<div class="main">
<div class="header">
<img src="images/logo.jpg" />
</div>
<div class="navigation"><ul id = "linkbar">
<li><a href="">Home</a></li>
<li><a href="">Guestbook</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Quotes</a></li>
<li><a href="">Links</a></li></ul>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: gray;
margin:0px;
padding:0px;
}
.header {
background-color:white;
}
.main {
background-color: yellow;
text-align: center;
width: 900px;
margin: auto;
}
a:link {color:white; text-decoration:none;} /* unvisited link */
a:visited {color:white; text-decoration:none;} /* visited link */
a:hover {color:red; text-decoration:underline;} /* mouse over link*/
a:active {color:red; text-decoration:underline;} /* selected link */
.navigation {
text-align: center;
background-color: f8901f;
}
#linkbar li {
margin: 0px 20px 0px 20px;
padding: 11px 0px 10px 0px;
list-style-type: none;
display: inline;
line-height: 2.5em;
}
Include following code in your css.
ul#linkbar{margin-top:0;}
As pointed out by @Rob, you need to add a doctype as the very first line such as:
<!DOCTYPE html>
to escape Quirks Mode.
Assuming that isn't the only problem, try this:
#header img {
vertical-align: top
}
If I understand correctly, that should fix this problem:
always one line of the main div in between them
Without a doctype, you are in 'quirks mode'. Add this as your first line and see where we stand: <!doctype html>
I seem to find that the space is caused by the fact that images are inline elements.
try adding:
.header img {
display:block;
}
and ofcourse add a valid doctype so you are in standards mode
加载中,请稍侯......
精彩评论