...

View Full Version : what is wrong?



jimmyd
12-22-2010, 02:41 AM
Can somebody please tell me what I'm doing wrong here? I'm just learning how to build with DIVs. http://simpledark.webs.com/template-divs/index.html

I'm trying to figure out why the "Put stuff here" section is on top of my "Navigation" section instead of under it, and why it is dropping down the news on the right.

It is supposed to look like this http://pmportfolio.net/tester/
I'm trying to recreate that site with divs instead of tables.

Excavator
12-22-2010, 07:17 AM
Hello jimmyd,
The ul contains all those list items, so it is much taller than the height: 20px; you put on it.
Those ul's are the full width of containing #nav so there is no need to float them. Float the container instead.

I add 2px width to #nav to account for the extra width added to li#topli by your border. According to the box model (http://www.w3.org/TR/CSS2/box.html), margin/padding/border all count when figuring total width.

Try it like this -

#wrapper #body #nav {
width: 232px;
float: left;
}

#wrapper #body #nav ul {
/*height: 20px;
float: left;*/
display: block;
list-style-type: none;
text-align: center;
font-family: verdana;
font-size: 11px;
font-weight: bold;
}

jimmyd
12-22-2010, 01:22 PM
Thanks so much, Excavator. Problem has been resolved by doing exactly what you have said and adding a bottom margin to the ul.

jimmyd
12-22-2010, 05:22 PM
Seems I'm having another very similar problem.. Now the footer is way bigger than it should be, and it is behind the other content, instead of under it. Any suggestions?

http://simpledark.webs.com/template-divs/index.html

Excavator
12-22-2010, 05:58 PM
Seems I'm having another very similar problem.. Now the footer is way bigger than it should be, and it is behind the other content, instead of under it. Any suggestions?

http://simpledark.webs.com/template-divs/index.html

Try adding this bit in red -


#wrapper #footer {
width: auto;
margin-top: 5px;
clear: both;
}

You should not be re-using those id's. Check in with the validator to see which ones.

jimmyd
12-22-2010, 06:01 PM
thank you once again. it worked. what exactly does that mean though?

Excavator
12-22-2010, 06:09 PM
thank you once again. it worked. what exactly does that mean though?

Clearing it makes it recognize your floated elements so it will go below them where it belongs.


This also works in it's place -

#wrapper #body {
width: auto;
margin-top: 5px;
overflow: auto;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum