PDA

View Full Version : How would you create this banner?



Chromer
26 Jan 2011, 10:25 AM
I'm about ready to use a table to layout my banner in an otherwise table-less layout! :eek: You guys are my last hope.
This hand-coded flexible layout has worked great until I went to change a background color into a repeating graphic. But instead of posting my code and trying to get ideas as to how to fix it, I just wonder how you would approach this seemingly simple problem from the start...
The question is: If you want a banner with a graphic on the left (logo) a graphic on the far right, and an expandable repeating graphic in the middle, how would you go about it?
Everything from floats to absolute positioning have failed to do what would be a snap using a table. Save me from backsliding to the dark side!

Wickham
26 Jan 2011, 04:21 PM
You should be able to do it with two floated divs inside a containing div. Give the container the repeating background and the other two floated left and right.
CSS


#container { width: 100%; background: url(repeating-graphic.jpg) repeat-x; height: ??px; }
#left { float: left; width: ??px; height: ??px; background: url(logo.jpg);}
#right { float: right; width: ??px; height: ??px; background: url(right-graphic.jpg); }



<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>

It's not very good to have empty divs only with a background so instead of the background-images to #left and #right you should really put img images inside instead.