PDA

View Full Version : Newbie having trouble with header


juse8888
11-19-2008, 10:26 AM
I am trying to get this header correct but i don't know what I'm doing wrong, the width of the header is not the same as the over all wrapper as it's obvious.

Here is the link to the page

http://vle2.capella.edu/1185455/basiclayout1.html#


Here is the css that i have set up so far....any help would be nice

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;

}
body {
background-color: #000000;
background-image: url(../edited%20photos/blue%20star%20background.gif);
font: Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
text-align: center;
}
h1 {
font-size: 150%;
margin: 0px;
padding: 10px;
color: #00ffff;
}

h2 {
font-size: 130%;
margin: 0px;
padding: 10px;
color: #cccccc;
}

#wrapper{
width: 780px;
background-color:#000000;
margin:10px auto;
border: 1px solid #000000;
text-align: left;
}
#banner{
height: 175px;
background: url(../edited%20photos/banner%20for%20real1.gif);
background-repeat: no-repeat center;
}

#nav{
border-bottom: 1px solid #000000;
}

#nav ul{
padding: 0;
margin: 0;
background-color:#000000;
text-align: center;
}

#nav ul li{
display: inline;
padding: 0;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#nav ul li a{
display: inline;
color: #00FFFF;
background-color: #000000;
text-decoration: none;
padding: 0 25px 0 25px;
border-right: 1px solid #000000;
width: 9em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#nav ul li a:hover, #nav ul li a:focus{
display: inline;
background-color: #00ffff;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;

}
#content p{
margin: 20px;
}
#content h1{
color: #00FFFF;
padding: 0;
margin: 20px;
}

#content h2{
color: #00FFFF;
padding: 0;
margin: 20px;
}

.leftimage{
float: left;
margin: 0 10px 20px 0;
border: 1px solid #000000;
}

.rightimage{
float: right;
margin: 0 0 20px 15px;
border: 1px solid #000000;
width: 150px;
}

p em {
color: #0000FF;
}
p {
font-size: 80%;
float: left;
}
.clearit {
clear: both;
display: block;

}
#footer {
border-top: 1px solid #000000;
color: #000000;
font-size: 70%;
background: #00FFFF;
}


Any help would be appreciated....

domedia
11-19-2008, 01:52 PM
Looks correct to me. What is wrong?

btw: Welcome to the forums juse8888!

juse8888
11-19-2008, 05:11 PM
Looks correct to me. What is wrong?

btw: Welcome to the forums juse8888!

Thank you for the welcome, but yeah I swore the code was inserted wrong and maybe it was my html that was messing up the header. When you look at it in the browser there is a gap at the bottom as well as the width of the header does not match up with the width of the header.

If you can't see what is wrong, is there a way you can tell me how to match the width of the header with that of the rest of the document?

domedia
11-19-2008, 05:33 PM
as well as the width of the header does not match up with the width of the header. Read that twice ;)

Seriously, I don't see the problem in the header part.

The banner does not have width, so it's filling the available width from #wrapper which is 780px.

2 suggestions though:
The div structure is broken, you have a couple of closing DIV tags that never was started.

and the background is uh... hard on the eye? 8)

Corrosive
11-19-2008, 05:34 PM
Thank you for the welcome, but yeah I swore the code was inserted wrong and maybe it was my html that was messing up the header. When you look at it in the browser there is a gap at the bottom as well as the width of the header does not match up with the width of the header.

If you can't see what is wrong, is there a way you can tell me how to match the width of the header with that of the rest of the document?

Hi

You've set a width of 780px on your wrapper but have not specified a width on the banner div. Could that be it?