How to make a banner fit the screen

Hi All. Hoping someone or some people are going to be able to help me with my problem.

I am trying to add a banner to my site, but so far with no luck. I want it so the banner appears on the left, then the rest is filled with a white bar, with a curve on the far right. I think that makes sense?

The three files that consitute the banner:

http://www.mariokartwii.com/images/banner/MKWbanner1.png
http://www.mariokartwii.com/images/banner/mkwfiller.png
http://www.mariokartwii.com/images/banner/endtrans.png

I tried (unsucessfully) with the following code:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="643" height="155" valign="top"><img src="http://www.mariokartwii.com/images/banner/MKWbanner1.png" width="643" height="155" /></td>
    <td width="100%" valign="top"><img src="http://www.mariokartwii.com/images/banner/mkwfiller.png" width="100%" height="155" /></td>
    <td width="14" valign="top"><img src="http://www.mariokartwii.com/images/banner/endtrans.png" width="14" height="155" /></td>
  </tr>
  <tr>
    <td height="46">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Code (markup):

So I was hoping someone would be able to help me?

 

Do you have an example of it "not working"

The last 2 images you posted don't show up... I'm assuming because they are white on a white background?

You should use a <div> with its width set to 100% instead of a <table> for the layout.

 

The IMG tag only accepts pixels as measurements - to do what you want there you'd have to either do style="width:100%" which could have unpredictable results, or use it as a tiled background instead.

I'd probably do it this way

The CSS:

#banner {
	background:url(http://www.mariokartwii.com/images/banner/endtrans.png) top right no-repeat;
	padding-right:14px;
}

#banner div {
	background:url(http://www.mariokartwii.com/images/banner/mkwfiller.png) top left repeat-x;
}

#banner img {
	display:block;
	border:none;
}

Code (markup):

The HTML:

<div id="banner"><div>
	<img src="http://www.mariokartwii.com/images/banner/MKWbanner1.png" 
		width="643" height="155" 
		alt="Mario Kart Wii" 
	/>
</div></div>

Code (markup):

since div's default behavior is to expand to the available width of their parent, the outermost one will expand to available and show your rightside image - by padding it in on that side the next container will show the 'filler' as the entire width. You then place the image atop it on the left and badda boom, badda bing, good to go.

The display:block on the image may not be needed, but I included it because some browsers take the image's 'inline' status a little too seriously.

Hope this helps.

 

hi all

GWKG: thanks for your post. I unfortunatly don't have an example of it not working, but basically there would be a gap between the images and a huge gap underneath. But yeah, the images are white on white.

deathshadow: thank you very much. unfortunatly Im on my way to work now, but during my lunchbreak I'll try and have a go! Will report back

 

Hi

I've just made the changes to the code that you provided me with! Looks exactly what I want to do, but if you look, it still does not line up with the forum board below. I'm sure this is a pretty easy fix, and I'm trying to figure it out for myself now, but how do I change the padding?

Thank you for your help so far

http://www.mariokartwii.com/