Forum Moderators: not2easy

Message Too Old, No Replies

CSS Header Question

Logo to the left; Links to the bottom right

         

Oaf357

2:04 pm on Nov 30, 2003 (gmt 0)

10+ Year Member



I'm trying to create a header with a graphic to the left and navigational links to the far right at the bottom of the header.

Something like this:

[BIG HAIRY GRAPHIC]
[BIG HAIRY GRAPHIC]
[BIG HAIRY GRAPHIC] . . . . . . . . . . LINK . LINK . LINK

The three "big hairy graphics" are actually one graphic I just did that for effect.

Any help will be greatly appreciated. Thanks in advance.

photon

4:22 pm on Nov 30, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Create a header div and then absolutely position the "big hairy graphic" and the links. Here's a bit a code that should help:

<div id="header">
<img id="BHG" src="images/big_hairy_graphic.jpg" height="XXXpx" width="XXXpx" alt="this image" />
<div id="hdr_lnks">link... link... link</div>
</div> <!-- header -->

And the CSS:


#header {position:relative; height:XXXpx;}
#BHG {position:absolute; top:0; left:0;}
#hdr_lnks {position:absolute; right:0; bottom:0;}

That's just a quickie off the top of my head. You might need to wrap the image in a div, but I don't think so. Hopefully I haven't gotten anything wrong or left anything out. If I did, I'm sure someone else will be happy to point it out. :)