Please help this noob with an easy html question on banner code

[dodgeboard.com]

I have been searching the fourms for the answer to this to no avail..

I have a three peice logo and want to set it up so that the banner is fluid and adjusts for all screen widths

All I know is that defaultheader3pc_left.png should be aligned left
defaultheader3pc_center.png shoud be repeated to take up any space
defaultheader3pc_right.png should be aligned at the right side

Can anyone help me with the header code for this?

Thanks in advance to the genius that helps me with the code!

[sebbe]

At the top of my head this should work:
<table width="100%">
<tr>
<td><img src="defaultheader3pc_left.png" alt="" /></td>
<td width="100%" style="backround-image: url(defaultheader3pc_center.png); background-repeat: repeat-x;">&nbsp;</td>
<td><img src="defaultheader3pc_right.png" alt="" /></td>
</tr>
</table>

[dodgeboard.com]

I want to thank you IMMENSLY for helping me with this.

So,,, I pasted the code in my header...

<!-- logo -->
<table width="100%">
<tr>
<td><img src="http://dodgeboard.com/images/defaultheader3pc_left.png" alt="" /></td>
<td width="100%" style="backround-image: url(http://dodgeboard.com/images/defaultheader3pc_center.png); background-repeat: repeat-x;">&nbsp;</td>
<td><img src="http://dodgeboard.com/images/defaultheader3pc_right.png" alt="" /></td>
</tr>
</table>
<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output

And I am close....but the center tiled image is missing. Did I do something wrong? Any ideas?

example:
http://www.dodgeboard.com/?styleid=1

[Primeval]

url ('http://dodgeboard.com/images/defaultheader3pc.png')

try that one.

[dodgeboard.com]

I reverted the headinclude template, shrunk the images down to 100 pixels high and made the syntax change (per above- thanks Primeval)...... But it's still not showing the center image.

Main table width settings are set to 100% so I used the phrase variable - trying all kinds of different things.

current header template:

<!-- logo -->
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="http://dodgeboard.com/images/defaultheader3pc_left100.png" alt="" /></td>
<td width="100%" style="backround-image: url('http://www.dodgeboard.com/images/defaultheader3pc_center100.png'); background-repeat: repeat-x;">&nbsp;</td>
<td><img src="http://dodgeboard.com/images/defaultheader3pc_right100.png" alt="" /></td>
</tr>
</table>
<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output

To the one who figures this out...

PM me your paypal addy for a cool ten spot!!

http://www.dodgeboard.com/?styleid=1 <-- this is the style I am testing with

[Primeval]

LOL I just figured it out

<!-- logo -->
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="http://dodgeboard.com/images/defaultheader3pc_left100.png" alt="" /></td>
<td width="100%" style="background-image:url('http://www.dodgeboard.com/images/defaultheader3pc_center100.png'); background-repeat: repeat-x;">&nbsp;</td>
<td><img src="http://dodgeboard.com/images/defaultheader3pc_right100.png" alt="" /></td>
</tr>
</table>
<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output

Tried and tested true.

[dodgeboard.com]

That DID it YEAHHHHHHHHHH!!!!

PM me your paypal addy - you the winner!!

I'm so happy!!

I am looking at the code and can't see whats different

[Primeval]

Apparnetly sebbe just simply mispelled background. I was looking at that line specifically to figure out wtf is wrong with it.

[dodgeboard.com]

I've been racking my brain for hours over this. Guess I need to learn to spell too!

Thanks bud! $ sent

Lets see if you can answer this one...

Is there a way to get the right image to kind of center itself over the background space (so it doesn't go all the way to the right) when displayed on high resolutions? so it doesn't go all the way to the right unless the resolution is low. In other words, center itself over the background (so ther are equal parts og the background image on each side of the image that is currently on the right) but not overlap the left image.

If not, I am happy with this...

(The solutoins worth another ten spot)

[sebbe]

Hahhah sry, because I misspelt it you had to go crazy over it! :knockedout:

This should work for your second thingy, and I've checked already for spelling mistakes! :p

<table width="100%">
<tr>
<td><img src="defaultheader3pc_left.png" alt="" /></td>
<td width="50%" style="background-image: url(defaultheader3pc_center.png); background-repeat: repeat-x;">&nbsp;</td>
<td><img src="defaultheader3pc_right.png" alt="" /></td>
<td width="50%" style="background-image: url(defaultheader3pc_center.png); background-repeat: repeat-x;">&nbsp;</td>
</tr>
</table>

[dodgeboard.com]

Bingo! We have another winner. PM me your paypal addy.

I altered it slightly but the code works great. In case anyone else needs it...

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="http://www.dodgeboard.com/images/defaultheader3pc_left100.png" alt="" /></td>
<td width="50%" style="background-image: url(http://www.dodgeboard.com/images/defaultheader3pc_center100.png); background-repeat: repeat-x;">&nbsp;</td>
<td><img src="http://www.dodgeboard.com/images/defaultheader3pc_right100.png" alt="" /></td>
<td width="50%" style="background-image: url(http://www.dodgeboard.com/images/defaultheader3pc_center100.png); background-repeat: repeat-x;">&nbsp;</td>
</tr>
</table>

example: http://www.dodgeboard.com/forums/?styleid=1

Keywords: Fluid Banner header logo 3-pc piece resolution width stretch

[sebbe]

Don't need any money, I'm glad it worked out for you! :)

[dodgeboard.com]

a BIG THANKYOU sebbe!!

OK, With all the help on here I got from the above dudes, I figured out how to make a 4 piece fluid banner:

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="http://www.dodgeboard.com/images/blackgoldheader_fluid_left.png" alt="" /></td>
<td width="50%" style="background-image: url(http://www.dodgeboard.com/images/blackgoldheader_fluid_bg.png); background-repeat: repeat-x;">&nbsp;</td>
<td><img src="http://www.dodgeboard.com/images/blackgoldheader_fluid_center.png" alt="" /></td>
<td width="50%" style="background-image: url(http://www.dodgeboard.com/images/blackgoldheader_fluid_bg.png); background-repeat: repeat-x;">&nbsp;</td>
<td><img src="http://www.dodgeboard.com/images/blackgoldheader_fluid_right.png" alt="" /></td>
</tr>
</table>

[dcpaq2xx]

Are the image files a special kind of file. I notice that it mentions in the path that its a "Fluid" style image. Is that different from a jpg or gif image?

Doug