Posted 1 year ago #
Hi,
My problem is that the image which gets repeated up and down the page is peeking through from behind my footer and header.
You can see the problem clearly by visiting my website and scrolling down to the bottom / up to the top:
http://red88music.co.uk
I have tried putting padding and margins on just about everything to no avail.
Any ideas?
The #header has a transparent background that's why it's peeking through.
Re-create the header.png file with the top bit of your background integrated in.
Posted 1 year ago #
Thanks for the quick reply.
I don't think that will work as my background it fixed.
It also doesn't solve the problem with the footer.
Posted 1 year ago #
So I was thinking, and I have come to the conclusion that no matter how much padding etc I use, because the header and footer are in #page, they will always have that background.
Which then suggests if I take these two elements out of the #page then it Should work?
Posted 1 year ago #
Anyone? :P
Posted 1 year ago #
I have made a bit of progress:
I realised that because the header and footer were contained within the page div, they would always have the background.
So I have tried to take the header and footer divs out of the page div.
Small problem:
I was toying around with this idea earlier, and here are the results -
Original: http://red88music.co.uk/Red_88v1.htm
<div=id"page">
<div=id"Header"></div>
<div=id"Footer"></div>
</div>Edited Header (Which works): http://red88music.co.uk/Red_88v2.htm
<div=id"Header"></div>
<div=id"page">
<div=id"Footer"></div>
</div>Edited Header & Footer (All goes wrong): http://red88music.co.uk/Red_88v3.htm
<div=id"Header"></div>
<div=id"page"></div>
<div=id"Footer"></div>I can't work out why the last one just kills the page?
Your page div doesn't have any content to force it to extend the background image to the bottom of the page. Your content and sidebar are both floating and so don't actually count as being "inside" that page div.
Just before you close the #page div (after the content and sidebar), add this code:
<div style="clear:both;"></div>
That will add an empty div with no content, but which must clear the two columns, which extends the div down and forces the background to be drawn.
Posted 1 year ago #
rather than the way you are going about it with '<div>' tags I would suggest working your rounded corner background into a definition list like I use here http://wwww.wtfarewegoingtodonow.com and http://www.ryannichole.com You are operating on a larger scale, but the principle is the same.
This topic has been closed to new replies.
