I want to line up the title in the header to the navigation bar like this site has, http://blogofthenet.com/. Can anyone help me?
EDIT: I managed to line up the title. But I can't figure out a way to line up the navigation buttons.
Heres current look. http://blogofthenet.com/test/.
EDIT: I managed to line up the title. But I can't figure out a way to line up the navigation buttons.
Heres current look. http://blogofthenet.com/test/.
Code:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width: 100%;
float: left;
padding: 10px;
height: 100px;
margin: 0px 0px 0px 0px;
background-color:#F3F2ED;
background:#282923;
font-style:italic;
}
#header h1 {
font-size: 2.0em;
}
#header h1, #header h2 {
display: block;
width: 922px;
margin: 0em auto;
padding: 20px 0em 20px 0px;
}
#header h1 a {
color: #fff;
text-decoration: none;
}
#navigation {
float: left;
width: 100%;
color: #333;
padding: 10px;
margin: 0px 0px 0px 0px;
background-color:#000;
display: block;
}
#leftcolumn {
color: #333;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 678px;
float: left;
background:#232323;
}
#rightcolumn {
float: right;
color: #333;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 200px;
display: inline;
background:#232323;
}
#footer {
width: 100%;
clear: both;
color: #333;
border: 1px solid #ccc;
background-color:#F3F2ED;
margin: 0px 0px 10px 0px;
padding: 10px;
}
#navigation {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#navigation ul {
margin: 0;
padding: 0px 5px 0 124px;
list-style: none;
display: block;
}
#navigation span {
display: block;
margin: 0em auto;
padding: 20px 0em 20px 0px;
}
#navigation li {
display:inline;
margin:0;
}
#navigation a {
float:left;
background:url("images/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#navigation a span {
float:left;
display:block;
background:url("images/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navigation a span {float:none;}
/* End IE5-Mac hack */
#navigation a:hover span {
color:#FFF;
}
#navigation a:hover {
background-position:0% -42px;
}
#navigation a:hover span {
background-position:100% -42px;
}