I'm trying to put my navigation bar next to the header, but it's forcing the header on top of the navigation. If you don't know what I mean, this is how I want the header and navigation menu to be laid out: Snow Candy <-
This is the HTML that I've got:
<div id="header">
<h1>Logo</h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
开发者_运维知识库<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul></div>
<div id="content">
<h1>Header One</h1>
</div>
This is the CSS I've got:
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#header{
float: right;
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #3C7DC4;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #FF8F00;
}
#content{
background: #FF8F00;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
border-style:solid;
border-width:10px;
border-color: #121212;
min-height: 200px;
vertical-align: bottom;
}
Ok, Henry.
I added some code into the css - http://jsfiddle.net/JET4v/2/
Also added wrapper to keep it all in control.
- This basically says that there wont be anything beside
#header
and#content
- Also
#header
#header h1
#header #nav
#content
will all be floated to the left. And
#wrap
basically centers itself.#wrap { margin: 0 auto; width: 700px; } #header, #content{ clear: both; } #header, #header h1, #header #nav { float: left; }
Note that you might want to add width and height values too, but not height to the #content
of course.
And if you want to use #wrap
you should know that it should be the width of your widest element(s)
精彩评论