Recreate page header?

[David_Ehmer]

I'm looking to recreate a page header that was originally coded with the use of tables. It consisted of the complex part of the header as an image on the right adjacent to coloured table rows on the left that lined up with the horizontal pattern in the image.

The result was a header that resized with the browser.
After much searching and reading I'm no closer to an answer about how I might achieve the same result using CSS positioning.

To give an idea of the header result I'm looking for see:
<snip>

Appreciate any suggestions

[edited by: Nick_W at 6:12 am (utc) on April 30, 2003]
[edit reason] no urls please [/edit]

[DCElliott]

In CSS you have some wonderful features you can use for page mastheads. In particular, by creating a div that surrounds your masthead, you can absolutely position elements within your masthead in 3 dimensions!

For example, I have done mastheads with a title on the L and an image on the R. By absolutely positioning these elements and specifying a higher z-index for the title, I have a title that slides across in front of the image as the user changes browser width.

If you are not a standards nazi, you can use some very interesting alpha transparency effects using IE and -moz filters that foreshadow what will likely be available to us in CSS3 standards.

Here is an example:

The CSS
=========================
#header {
display:block;
position:static;
width:100%;
height: 120px;
border: none;
padding:0%;
background: transparent url(background.gif) repeat-x ;
color: #FFFFF0 ;
overflow:visible;
color:inherit;
background-color:inherit;
}
/*<<<<<<<<Header Pictures>>>>>>>>*/
#title1 {
display:block;
border:0;margin:0;padding:0;
position:absolute;
left:2%; /* adjust to taste ;-) */
top:0;
z-index:3;
}
#title2 {
display:block;
border:0;margin:0;padding:0;
position:absolute;
left:2%;
top:0;
z-index:1;
}
#headerpicture {
display:block;
border:0;margin:0;padding:0;
position:absolute;
left:auto;
top:0;
right:5%;
z-index:2;
}
The HTML
=========================
 <div id="header">
<img id="title1" height="120" alt="title1.gif - 4kb" src="title1.gif" width="325" border="0" /> 
<img id="headerpicture" height="120" alt="headerpicture.gif - 19kb" src= 
"headerpicture.gif" width="320" border="0" /> 
<img id="title2" height="120" alt="title2.gif - 33kb" src="title2.gif" width="325" border="0" />
 </div>

What this does is create a div 120px high with a tiled background and then overlays two graphics on the left - a title (title1) with a dropshadow effect (title2), both with transparent backgrounds. There is also a picture on the right. At 800px width there is no overlap, but as the page size gets smaller, Title1 slides over the picture with Title2 sliding behind. It is a really neat effect and allows you to have a liquid title effect that works across a very large range of browser resolutions.

While you can't post a URL, could you make an ASCII art mockup and post it so we can see what you are looking for?

DE

[David_Ehmer]

Thanks for your reply.

You bring up some interesting options which I will look into. I did try to post the URL (oops). Unsure why this forum has that rule. My ASCII art isn't too impressive but I will try.