Coding Help - Gaps, and Missing Background.

#1 SeanUK

Forum Newcomer

Group: Members
Posts: 10
Joined: 13-April 09
Reputation: 0
Experience:Beginner
Area of Expertise:I'm Learning

Posted 14 April 2009 - 06:53 PM

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.c...wimage/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.co...Layout.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!

#2 Meow

Advanced Member

Group: Members
Posts: 476
Joined: 06-April 09
Reputation: 12
Gender:Female
Location:Rugby
Experience:Intermediate
Area of Expertise:Designer

Posted 14 April 2009 - 07:05 PM

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.

#3 Guezala

Not an expert, just talk a lot...

Group: Members
Posts: 1,504
Joined: 28-August 08
Reputation: 11
Gender:Female
Location:Midlands
Experience:Intermediate
Area of Expertise:Web Designer

Posted 14 April 2009 - 07:08 PM

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?

#4 SeanUK

Forum Newcomer

Group: Members
Posts: 10
Joined: 13-April 09
Reputation: 0
Experience:Beginner
Area of Expertise:I'm Learning

Posted 14 April 2009 - 07:19 PM

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...eo.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.

#5 scaz182

Advanced Member

Group: Members
Posts: 365
Joined: 01-April 08
Reputation: 2
Gender:Male
Location:Reading UK
Experience:Advanced
Area of Expertise:Web Developer

Posted 14 April 2009 - 07:25 PM

cinnamondm, on Apr 14 2009, 20:05, said:

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.

#6 Meow

Advanced Member

Group: Members
Posts: 476
Joined: 06-April 09
Reputation: 12
Gender:Female
Location:Rugby
Experience:Intermediate
Area of Expertise:Designer

Posted 14 April 2009 - 07:55 PM

scaz182, on Apr 14 2009, 20:25, said:

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.

#7 SeanUK

Forum Newcomer

Group: Members
Posts: 10
Joined: 13-April 09
Reputation: 0
Experience:Beginner
Area of Expertise:I'm Learning

Posted 14 April 2009 - 09:49 PM

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*