Hey guys,

 

Sorry, this is another silly question. Think I'm picking most things up pretty quickly but every now and again I keep hitting a wall that stumps me. So, here I am again.

 

I've coded up a nice, basic template for my design now. I've got the bare-bones out of the way, almost.

 

The header, footer, and basic content box are what I am trying to tidy up at the moment.

 

Here's a screen-cap:

 

http://mynetimages.com/viewimage/99ff683f

 

Now, as you can see there is a visible gap between the pnlheader.jpg and the #container for #pnlmiddle. I can't tell what's causing the gap. All of my image sizes, seem to match up with the images in the image folder. As well as the height,width sizes specified in the #content tags.

 

--

 

What am I missing? I've used an identical set-up for the footer image, and it matches up perfectly.

 

When the three images are stacked they equal to 700pixels in height.

 

This is how the items are stacking (I think)

 

<img src=pnlHeader.jpg> [217 pixels high]

 

 

#container body [367 pixels high]

 

<img src="pnlFooter.jpg> [116 pixels high]

 

 

Add those up, and you hit the perfect 700 pixels height. So I just don't get what's going wrong.

 

 

Here's the HTML Extract:

 

 

<div id="pnlHeader">

 

<img src="images/pnlHeader.jpg" alt="Panel Header"/>

 

</div>

 

 

 

 

Here's the accompanying CSS Extract:

 

}

 

#container #pnlHeader {

width:800

height:217

margin:auto;

 

}

 

 

#container #pnlLeft {

width:158px;

height:367px;

background-image: url(images/pnlLeft.jpg);

float:left;

}

 

If you would like to view more of the source, or css you can download them here:

 

http://rapidshare.com/files/221337247/NewCodeLayout.zip.html

 

 

---

 

The other thing I was having trouble with is setting the background. I have tried

 

<body bgcolor="2e2e2e"</> in the HTML file itself...

 

As well as

 

#body

 

{

background-image: url(bgtilejpg);

background-repeat: repeat; }

 

}

 

As well as a few other combination I could think of, still the background stays WHITE.

 

At the moment, the index.html, and index.css files have no background tags because they were not working!

 

Could somebody take a look, and tell me what's wrong with it?

 

 

Thanks again for the help, sorry for being such a Dunce!

Could be as simple as the white space on the page between your divs. Your code is double-spaced, like this...

<div id="pnlHeader">

		<img src="images/pnlHeader.jpg" alt="Panel Header"/>

		</div>

		<div id="pnlLeft">

		</div>

		<div id="pnlMiddle">

 

 

which means you might have some invisible stuff in there. Delete all of the unnecessary spacing/line breaks and see if that helps.

Your bgtilejpg should be bgtile.jpg i guess...

 

Oh erm... check where you are refering your css to for your images... is the bgtile in the main folder or in a subfolder?

 

For colours, you need a # before the hexadecimal.

 

You are best making sure you refer to some sort of margin and padding value for all the elements ...

 

or a simple global reset at the beginning of your css:

 

* {

margin: 0;

padding: 0;

}

 

Does this help any of your problems?

Hey Cinna,

 

Thanks for the hint, but it hasn't fixed the problem

 

Quick Edit: - Hi Guezala, I tried your suggestions also and still seem to be having the same problems. Not entirely sure what to do with that last bit of code:

 

{

margin: 0;

padding: 0;

}

 

Tried throwing it at the top of the doc, as well as under a #body tag.

 

No luck though!

 

I think I avoided margin, and padding values for each element, because they change the way the images tile on the screen. I was following, this tutorial:

 

http://sampsonvideos.com/video.php?video=14

 

Pretty sure he said avoid that, but he wasn't using images for his backgrounds, so I tinkered with what he had shown anyway.

Could be as simple as the white space on the page between your divs. Your code is double-spaced, like this...

<div id="pnlHeader">

		<img src="images/pnlHeader.jpg" alt="Panel Header"/>

		</div>

		<div id="pnlLeft">

		</div>

		<div id="pnlMiddle">

 

 

which means you might have some invisible stuff in there. Delete all of the unnecessary spacing/line breaks and see if that helps.

 

 

White space isn't an issue in HTML, all white space is interpreted as a single space.

White space isn't an issue in HTML, all white space is interpreted as a single space.

But it can cause gaps between divs - particularly with good old IE - if it isn't just empty space, like if there are spaces or tab presses in there that can't be seen just by looking at the code.

Well, I don't think spaces are the problem. Have tried closing all the gaps, deleting unnecessary spaces and the problem persists.

 

Any other ideas?

 

*scratches head*