Expanding Image Flag

Hello all,

I'm trying to create a flag (title) for my website in a way that it expands dynamically when the website is resized. An example of the effect I am looking for can be found on http://www.insanelymac.com/ When one resizes the browser, the main title bar (with the insanely mac logo and navigation) expands along with it.

As far as I understand it, this effect is created by using a number of images pieced together. At the minimum a left image, right image, and spacer image is required (I currently have a left, center, right, and spacer, but the left and center images just go together like one). I want the left image to stay a fixed distance from the left border of the page, the right image to stay a fixed distance from the right border of the page, and the spacer image to automatically tile when the page is resized, in order to create the effect of the expanding title bar. The problem is I've not been able to get this to work. Even if I place the images, I cannot get the spacer image to properly fill between them.

I've tried doing this with both divs and tables, so I'll try to outline my approaches here.

Using the table approach I have

.topnav {
text-align: left;
background-image: url("images/flag_top_spacer2.png");
background-repeat: repeat-x;
border-collapse: collapse;
border="0";
cellpadding="0px";
cellspacing="0px";
width: 90%;
}

and

<table class=topnav><tr>
<td><img src="images/flag_top_left.png" align=left><img src="images/flag_top_center.png"></td>
<td><img src="images/flag_top_right.png" align=right></td>
</tr>
</table>

The problem here is that the spacer image is about 1px off from the rest of the images in the table, so it looks awful.

Scrapping the table idea, I've tried to do this with a simple div, and just put the background image in (which seems like a more correct approach).

#container_head {
text-align: auto;
background-image: url("images/flag_top_spacer.png");
background-repeat: repeat-x;
width: 90%;
margin: 0 auto;
padding: 0 50 0 50;
}

<div id=container_head>
<img src="images/flag_top_left.png" align=left><img src="images/flag_top_center.png" align=left><img src="images/flag_top_right.png" align=right></td>
</div>

If I use this code, then I have a problem where the spacer image just does not show up. If I remove the align=right from the last image, the spacer comes in fine, but only to the side of the banner, which is unacceptable. If I try removing the align=left from the second of my two images, the spacer shows up, but it pushes the right image off onto the next line!

I hope my above approach is easy enough to follow. If I am going about doing this all the wrong way, I'd appreciate someone pointing me in the right direction. If not, I'd be very grateful to anyone who can tell me what I'm doing wrong.

Thanks,
-Xaenn

 

if you asking help from any designer you should paste it the codes over there like that better you just put the problem url n pointed out whts the problem, anyway asking help should be short n simple to understnd.
if you stil got same problem post the url n pointed out the problem wil fix it

 

extreamidea: Thanks for your quick response. You are absolutely right. It was rather silly of me to ask for help without even providing a viewable link of the page. The current design is available at http://www.math.colostate.edu/~reinholz/experiment/

I have decided to scrap the resizing banner idea, but I nevertheless do have a few questions regarding how to implement the design as I wish.

1. Inside of my container I want the top border to be the very first thing shown, but currently some of the regular border is showing above it. How can I fix this?

2. How can I control the amount of space between the top border of my container and the flag itself?

3. I would like for the container to automatically extend to the bottom of the page, so that there is no extra gray space showing.

4. I tried viewing the page both in firefox2 and firefox3, and I noticed that the actual flag.png wasn't showing up in firefox3. Is there something wrong with the way I am coding this?

5. I am not a very experienced html coder, but I am going about implementing this design all the wrong way?

Any help is greatly appreciated.

Regards,
-Daniel