...
PDA

View Full Version : Resolved content not right

OGGordon
11-07-2009, 11:33 AM
Hi guys,

I want to add 3 sections to my content area, however it doesn't show right.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title Here</title>
<style>
body { margin:0; background:#e5e5e5 url(bg.gif) repeat-x; }

#top-wrap { width:100%; }
#header { width:960px; margin:0 auto; height:85px; }
#nav { width:960px; margin:0 auto; height:69px; font-family: tahoma; font-weight: bold; font-size: 18px; color: white; }
#wrap { width:100%; }
.bg1 { width:980px; margin:0 auto; background: url(shd.png) repeat-y; }
#middle { width:960px; margin:0 auto; background: #fff; }

#left { width: 200px; float: left }
#center { width: 560px; float: left }
#right { width: 200px; float: left }

#footer-wrap { width:100%; background: #c5c5c5; }
#footer { width:960px; margin:0 auto; }

#home { height: 20px; width: 50px; float: left; margin-left: 25px; margin-right: 5px; margin-top: 15px; }
#anzeige { height: 20px; width: 160px; float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
#forum { height: 20px; width: 50px; float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
#hilfe { height: 20px; width: 50px; float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
#faq { height: 20px; width: 50px; float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
#Tipps { height: 20px; width: 50px; float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
#agb { height: 20px; width: 50px; float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
#privacy { height: 20px; width: 50px; float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }
#contact { height: 20px; width: 50px; float: left; margin-left: 5px; margin-right: 5px; margin-top: 15px; }

</style>
</head>
<body>
<div id="top-wrap">
<div id="header">
header.
</div>
<div id="nav">
<div id="home">
home
</div>
<div id="anzeige">
anzeige eintragen
</div>
<div id="forum">
forum
</div>
<div id="hilfe">
hilfe
</div>
<div id="faq">
FAQ
</div>
<div id="Tipps">
tipps
</div>
<div id="contact">
kontakt
</div>
</div>
</div>
<div id="wrap">
<div class="bg1">
<div id="middle">
<div id="left">
left area
</div>
<div id="center">
center area
</div>
<div id="right">
right area
</div>
</div>
</div>
<div id="footer-wrap">
<div class="bg1">
<div id="footer">
This is the footer.
</div>
</div>
</div>
</body>
</html>

here is a live version: http://derderder.cwsurf.de/

Am I doing it right? With the divs under divs to create each section?
SB65
11-07-2009, 12:16 PM
Looks like you're missing a closing </div> for #middle to me...
OGGordon
11-07-2009, 12:28 PM
Looks like you're missing a closing </div> for #middle to me...

yeah you were right. I added it but still no change :(
SB65
11-07-2009, 12:31 PM
I'm looking at it now in FF3.5.5. The live version is still missing that </div>

What is it that doesn't look right?
OGGordon
11-07-2009, 01:28 PM
I'm looking at it now in FF3.5.5. The live version is still missing that </div>

What is it that doesn't look right?

alright I just uploaded it.

The content area is suppose to be white.
met
11-07-2009, 01:37 PM
#middle { width:960px; margin:0 auto; background: #fff; }

#left { width: 200px; float: left }
#center { width: 560px; float: left; background:#fff; } /* this */


OR you aren't clearing #left, #center, #right, so #middle isn't expanding with the content. Set a BG fro #center, or add <div style="clear:both;"></div> after #right </div>


(you should add a clearing div regardless).
OGGordon
11-07-2009, 01:57 PM
#middle { width:960px; margin:0 auto; background: #fff; }

#left { width: 200px; float: left }
#center { width: 560px; float: left; background:#fff; } /* this */


OR you aren't clearing #left, #center, #right, so #middle isn't expanding with the content. Set a BG fro #center, or add <div style="clear:both;"></div> after #right </div>


(you should add a clearing div regardless).

I just added the clearing div and it works without any other changes. Thank you so much! I'm not sure what it does but I'll look it up. Thanks to both you guys for helping me! :thumbsup::thumbsup::thumbsup:
SB65
11-07-2009, 03:14 PM
A neater alternative here to adding the clear div would be to add

overflow:auto

to the css for #middle. This clears the floats contained in #middle, and hence extends the div to show the background, without any additional markup.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum