extending background?

[AJ]

Hi all..

I've got this far with a new website for my spreadshirt shop:

www.urbanbreakdown.co.uk


Need a few discerning eyes to give me a hand ironing out a few issues if it's not too much trouble!

First of all, I want to continue the background gradients at the top and bottom. Not sure how to do this though - can anyone advise?

Secondly, the top navigation menu doesn't appear properly on IE. It's too far to the left. Any idea why this is?

Lastly, I want to put a div inside the footer, centered, with a short text menu but I've tried a few things and it doesn't work :S. Not all that good with CSS.

Appreciate any help gents!

aj

[kungfu71186]

you need to cut the gradient up. You have one big image that you placed on there.

Basically you would cut a piece that is 1px by 326px

Then you would set a background image in the footer.

and you would have to take off that fixed page width.


#footer{
height:326px;
background: url('images/gradient.gif') repeat-x;
}

and you would do the same for the top except flip the gradient and set the background in the body if you want.

The fixed width will be a problem though. You would need to bring the footer outside of everything so it expands all the way across the page.

[AJ]

Thanks for the reply.

Yes, well I already have a footer image, and it's not consistent across the whole width to allow me to cut it into a thin piece and use as a gradient. The same goes for the top.

This is my problem.. I need to make the gradient the whole width, so do I need to make some kind of header & footer wrappers which can then have small thin images to work as gradients?

If so, how do I do this? A bit stuck so any thoughts/ideas much obliged!

[kungfu71186]

yes, for the header its pretty easy cause you can set a body background. Make the top gradient. Set the body background as that gradient. It will go across the top.

For the footer youll need to put it outside the page wrapper so it extends all the way across the bottom. Then you can take that image you have in the corner make it a transparent logo type of thing. Then you can put that inside the footer.

Basically your design should be like

|-----------------------------------|
|-----------------------------------|
|                           |
|                           |
|                           |
|                           |
|-----------------------------------|
|-----------------------------------|

or at the very least

|---------------------------|
|---------------------------|
|                           |
|                           |
|                           |
|                           |
|-----------------------------------|
|-----------------------------------|

where your header and content are in the page wrapper thats set at your 1000px
and your footer wouldnt be restricted.

Set the background of the footer to the gradient that goes on the bottom
set the background of the body to the gradient that goes on top.

This will also save you in bandwidth and page loading as the gradients would be really small sizes compared to what you have now.