I am new to css and trying to create a header for my webpage
The structure of the header is like
-LOGOIMAGE--link1--link2-----TITLEIMAGE(@center)-----link3--link4-
Here is the html of the header
<div id="header">
<img src="http://goo.gl/Uinfkp" class="logo"/>
<div id="navbox1">
<a href="aaa.html">aaa</a>
<a href="bbb.html">bbb</a>
</div>
<img src="http://goo.gl/Uinfkp" class="title"/>
<div id="navbox2">
<a href="xxx.html">xxx</a>
<a href="yyy.html">yyy</a>
</div>
</div>
And this is what i have tried with css http://jsfiddle.net/WSDJ3/
I have no idea why the images and text are placed like that. Please help!
You are using classes and ids (which is good). Your CSS, however, is using the #
selector for both.
#
is for id (think of an ID number) and .
is for classes. Change it to:
#header
{
width:100%;
height:80px;
background:#232c2b;
}
.logo
{
float:left;
width:72px;
height:70px;
margin:5px 0;
}
#navbox1
{
float:left;
margin:30px 30px;
}
.title
{
float:left;
width:175px;
}
#navbox2
{
float:left;
margin:30px 30px;
}
a
{
color:white;
font-size:15px;
text-decoration:none;
margin:auto 10px;
}