My challenge is to have the header of my page have 3 images...one in the top
left, one in the top right ( always aligned to the right side of the
browser ) and one image in the middle that repeats or stretches according to
the width of the browser window.
I've accomplished this using a table and inline styles on the cells with the
following ugly markup:
<!-- TOP TABLE START -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td
style="background-image:url('/site/images/div0/layout/topleft.jpg');backgrou
nd-repeat:no-repeat;width:633px;height:89px"><img
src="{0}images/layout/spacer.gif" alt="" /></td>
<td
style="background-image:url('/site/images/div0/layout/top.jpg');background-r
epeat:repeat-x"> </td>
<td
style="background-image:url('/site/images/div0/layout/topright.jpg');backgro
und-repeat:no-repeat;width:188px;"><img src="/site/images/layout/spacer.gif"
alt="" /></td></tr></table>
<!-- TOP TABLE END -->
As I transition to xhtml, I am trying to use one div tag with external
styles and accomplish the same thing, but I am having difficulty. This is
the closest I have gotten.
<div id="test"><img src="topleft.jpg" alt=""/><span
id="test2"> </span></div>
body {
margin:0px;
}
#test {
width:100%;
background-image:url(topright.jpg);
background-position:top right;
background-repeat:no-repeat;
}
#test2 {
border:1px solid red;
background-image:url(top.jpg);
background-repeat:x-repeat;
}
I would like the top.jpg image to "fill the gap" as the window width is
changed, but this current markup and styling fails to display the middle
image at all. How do I remedy this? TIA~PJ
