Welcome to WebmasterWorld Guest from 22.214.171.124
Forum Moderators: not2easy
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:
Appreciate any suggestions
[edited by: Nick_W at 6:12 am (utc) on April 30, 2003]
[edit reason] no urls please [/edit]
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:
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.
background: transparent url(background.gif) repeat-x ;
color: #FFFFF0 ;
left:2%; /* adjust to taste ;-) */
<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" />
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?