header problem

jesseraps

11-07-2009, 12:59 AM

http://www.jay.destined.org/lay.php

here is my header:

<body background="background.png">
<body>
<title>______________GHOSTIE`</title>
<Link rel="stylesheet" type="text/css" href="style.css">
<div id="container">

<div id="banner">
<img src="banner.png">
</div>

<center>
<div class=topbg>
<div class="topmenu">
<a href=/link>BLOG</a>
<a href=/link>SITE</a>
<a href=/link>CONTENT</a>
<a href=/link>LINKS</a>
</div></div></center>

<div id="sidebar">
<h2>ohhh, girllll</h2><br>
<img src="http://i34.tinypic.com/332pksz.png" align="left"> info goes here la la la
<br/><br />

<br />
</div>

<div id="content">

for some reason my container (white space) isn't showing up. how can i fix this?

Fou-Lu

11-07-2009, 02:16 AM

This isn't a PHP issue, its an HTML issue.
Whitespace is ignored. If you want to keep it you can either mark it up as a preformatted text (<pre> tag), or replace with  , though I'd try to avoid using non-breaking space whenever possible.

Since you're containing an image, you'd be better off styling the container css to include a padding of 1em in size for at least the top and bottom of the div. Another option is to also set you're banner as a background image and use a margin.

One of our client side guys could give you some more options or better advice I'm sure. Moving from PHP to HTML.

Excavator

11-07-2009, 02:50 AM

Hello jesseraps,
You need to clear your floats.

Add this bit in red -
#container {
width: 668px;
margin: 0px auto;
text-align:justify;
padding:2px;
background-color: #ffffff;
border: 2px solid #ffffff;
overflow: auto;
}

This site explains (http://www.quirksmode.org/css/clearing.html) how that works.

jesseraps

11-07-2009, 06:52 PM

thank you so much excavator ! :D

Excavator

11-07-2009, 09:38 PM

It's getting scrollbars in IE8 now. Both vertical and horizontal.
Try making these changes now, highlighted in red -
#container {
width: 668px;
margin: 0px auto;
text-align:justify;
padding:2px;
background-color: #ffffff;
border: 2px solid #ffffff;
overflow: auto;
}
#banner {
width: auto;
border-bottom: 0px solid #ffffff;
}
#content {
margin: 0 0 0 178px;
padding: 0 0 0 10px;
}
#sidebar {
background : transparent;
float : left;
width : 178px;
padding:0px;
}

You should run that through the validator ... There is a lot there that can be fixed. Check out the links about validation in my sig below, also the link about DocTypes.

...