homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Recreate page header?
David_Ehmer




msg:1177636
 1:34 am on Apr 30, 2003 (gmt 0)

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




msg:1177637
 11:47 am on Apr 30, 2003 (gmt 0)

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




msg:1177638
 12:48 pm on Apr 30, 2003 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved