Hello everyone,
I have just started with Chris Coyiers mockup to CSS tutorial. Everything works perfectly until after the second video (I think). I try to follow Chris’ coding in the videos exactly, but after the second video my header image gets lowered on the page. I will attach a screenshot to this message. For some reason the image gets corrected when I remove
width: 130px;
float: left;
display: block;
in my CSS. But it then mess up my CSS:ed menu links.
Here is my CSS code:
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
background: url(images/body-bg.gif) repeat-x top #f5ecd4;
}
p, li {
font-size: 1.2em;
line-height: 1.3em;
margin-bottom: 0.8em;
}
h1 { font-size: 3.0em; margin:-bottom: 0.8em; }
.clear { clear: both; }
div#page-wrap {
width: 800px;
margin: 0 auto;
}
ul#nav {
height: 236px;
background: url(images/header-bg.gif) no-repeat;
list-style: none;
padding-left: 125px;
}
ul#nav li a {
width: 130px;
float: left;
display: block;
margin-top: 168px;
color: white;
font-weight: bold;
text-decoration: none;
}
ul#nav li a:hover, ul#nav li a:active {
color: yellow;
}
div#main-content {
padding-bottom: 50px;
}
div#main-content div#left-column {
float: left;
width: 530px;
}
div#main-content div#right-column {
float: right;
width: 260px;
border-top: 8px solid #540000;
}
div#footer {
background: #560000;
color: white;
padding: 10px 0 10px 0;
text-transform: uppercase;
border-top: 2px solid red;
text-align: center;
}
(I have left the buttons for the menu intact on purpose, along with the CSS:ed menu. They will be removed later on.)
Hope that someone can help me adjust the header image.
Regards,
H
