Hello all,
I have got this working (sort of) but I just want to check with the experts that the way I am doing this is best.
Basically I have two horizontal bars across the top of the page, one is for the top navigation, the other is for the header, this is 300px high. Below this I have vertical stripes to fill the rest of the page. I then want my content to be in the middle of the screen with a fixed width of 960px.
I decided to set the body background to repeat the vertical stripes, have a div called top and have it repeat the horizontal and then use a container with auto margins to center it but give it a top margin of -300px to bring it back up to the top.
Would this be the best way to achieve what I want, or is there a more fancy way to do this?
Another issue I had which is totally off this topic is banding with the two horizontal bars, I created the graphics using a gradient, some shadows and some lighting in photoshop. The only way I can get this to look any good is to make it one pixel and repeat, but by doing this I lose some of the shadow and gradient effects. The only way I can see to get around this is to create a graphic that is maybe 2400px wide to cover all screen resolutions but when I do this I then have problems with the content graphics blending in on top as I have no way of knowing what position the header graphic will be at. I can’t use transparent png as I know for a fact that some viewers will be using older browsers.
Thanks in advance.
