Image positioning. html

[Spike]

I trying to create a header for a web page made of four component parts. Purely as an experiment, because I've seen someone try it and fail to get it to display on all browsers at all resolutions. It was harder than I thought.

The header has to be centered over the main body of the page. It consists of two rows.

First is a background image, tiled to a specific size (740 wide, 220 high), as this is the width of the main body of th page with a margin on either side. Along the top row is a banner that stretces the full width of the page body, which can be centered to achieve the desired result.

Then the tricky bit. There is an image that matches up with the banner to create a picture on the left hand side on the bottom row, and next to it is a banner rotation, aligned to the right of the page body

Here is a rough diagram, the space at the side being the page borders.

I'm now trying to do this from scratch having tried and failed at adapting the tables in the original code it seems, because I found that using tables along with position:left for the top, and position:left for the image on the bottom worked reasonably (with cetering around the entire DIV line), but I was still left with a floating banner I could do nothing with.

My question is this....

Is there anyway in which I can align all images to center, and offset them from the center to the dimentions I need to match up with the dimentions of the background?

 

[Spike]

I thought I'd post the code (after I've played with it! lol) in case it's salvageable, or there's something obvious I've missed about that banner floating.

The site I saw this on, or the banner, ar not really suitable for techspot, but the background can be rplaced with any imsge as you know, and the placeholders will show picture positions. I'll see if I can find a banner rotation somewhere I can paste into the script to demonstrate the problem for anyone who wants to see it.

<table width="740" height="220"  align="center">
  <tr background="http://***.*********.***/images/back-1.jpg"> 
    <td height="216" background="http://***.***********.***/images/background.jpg"> 
      <center><div id="Layer2" style="position:left; width:741px; height:115px; z-index:1; left: 182px; top: 2px;"><img src="http://***.*********.***/images/HeaderBanner.jpg" width="739" height="137" align="left"></div></center>
      <div id="Layer1" style="position:left; width:218px; height:79px; z-index:1; left: 185px; top: 139px;"><img src="http://***.*********.***/images/s-2.jpg" width="220" height="79" align="right">
      </div>
      <div id="Layer3" style="position:absolute; width:498px; height:83px; z-index:3; left: 455px; top: 147px;"> 
       <p align="center">
<TABLE WIDTH="498" HEIGHT="60"><TR><TD WIDTH="468" HEIGHT="60">
<SCRIPT LANGUAGE="javascript"SRC="http://***.*********.***/********/_graphics/gif/rotation.js"></SCRIPT></TD></TR></TABLE>

	
      </div>
    </td>
  </tr>

 

[RealBlackStuff]

I will look into this and help you if I can.
One piece that sticks out immediately, is the name of one of your images: HeaderBanner.jpg
Most browsers that are set to suppress ads or banners, will hiccup on that filename. Call it Headerbnr.jpg or something, leave the trigger "banner" out.

 

[RealBlackStuff]

Try it with this:

<table width="740" height="220" align="center">
<tr background="./assets/images/background.gif">
<td height="216" background="./assets/images/green.jpg">
<div id="Layer2" style="position:left; width:741px; height:115px; z-index:2; left: 182px; top: 2px;">
<img src="./assets/images/headboard.jpg" width="739" height="137" align="left">
</div>
<div id="Layer1" style="position:left; top: 140px; left: 182px; width: 20%; height:79px; z-index:1;">
<img src="./assets/images/fancycar.jpg" width="270" height="79" align="left">
</div>
<div id="Layer3" style="position:absolute; top: 140px; right: 130px; width: 80%; height:79px; z-index:3;">
<img src="./assets/images/fancycar.jpg" width="470" height="79" align="right">
</div>
</td>
</tr>
</TABLE>


Look for the excellent book "HTML for the world wide web" 5th edition by Elizabeth Castro
Published by Peachpit Press ( www.peachpit.com )
ISBN 0-321-13007-3
UK £16.99

 

[Spike]

Thanks for that Phant!!

I tried inserting that code back into the original page. I think the original coders problem was the css interfereing or something, because replacing the original code with that made the header work, but destroyed the layout of the original page. Not having the css, I couldn't even atempt to tell for sure.

Thankyou for details on that book. I'll look into it.

 

[RealBlackStuff]

If you want the CSS, follow the path in the "view source" of that webpage.

You could also try a website-downloader or offline-browser such as Backstreet Browser or Quadsucker

PS: did I change my name?

 

[Spike]

LMAO! Sorry RealBlackstuff!!! I must have been a little delusional when I replied. lol