First time out.disaster in the Header area

[pkunzipula]

I am trying to build one header/horizontal navigation section that functions equally well on IE, FF and Opera.

For the header, I am trying to achieve a flag of Texas layout -- with an image (216px X 204px) floated left, next to a stripe of <Header1>Company Name</h1> and a stripe of <Header3>Tagline</h3> to the right. Between the two headers, I am trying to match the image's height so everything stays aligned at the bottom no matter what the zoom level.

Then, flush up against the bottom of that section, I need to put a horizontal navigation bar that stays flush to the bottom when a user zooms in or out.

I have tried many ways, and they are all wrong, Wrong, WRONG.

I appreciate any solutions.

Arlen

[4hero]

welcome to mwm, if you post your html/css we can take a look ;)

[Setek]

Sounds.. interesting :)

If I could get this straight - you're looking for something like...

---------
¦.......¦
¦..img..¦
¦.......¦
--------- <h1>main heading</h1>......<h2>tagline</h2>
<and here is the navigation menu />

If this is the case, this should be quite easy.

What you can do:

1. Encapsulate the image and the headings in a

   div

   , let's call it

   div#header

   ;
   
2. Since we want the headings to be positioned relatively to the bottom of the image (which is the bottom of the

   div

   , let's set

   position: relative;

   to

   div#header

   ;
   
3. For

   h1

   within

   div#header

   (Syntax:

   div#header h1 { ... }

   ) set position to be absolute - this invokes relativity to

   div#header

   . Set bottom to 0 and left to however far you want; and
   
4. For

   h3

   within

   div#header

   , set position to absolute also, and set bottom to 0 and right to 0.

Remember, this is a vague outline of procedure, so depending on how you actually want it you will have to change your top, right, bottom or left values to suit.

If I understood correctly, your navigation can just sit in the normal document flow beneath the

div#header

.

However much Font size gets changed by the browser, your headings should stay flush to the bottom of the image, which should be the height of the

div#header

.