Thread

I have stumped myself on this one. Google is somewhat helpful, but not 100%.

The end result of this layout is pretty simple. A header with 3 vertical list menus (left, center, right), and then a content area below with the same width as the header.

But, here’s the tough part (for me).

1) The header/navigation have to be FIXED. It must stay on screen at all times. Normally, not a problem, but..

2) The header has to be able to expand vertically in case (probably going to happen) the text sized is enlarged by the user.

Since the header would be position:fixed, it’s taken out of the flow, so the content div below doesn’t care if the header is expanded or not, it stays right where it is and divs overlap.

Does this make sense?

I just need help with the theory of how to do it, or if you can even do it or not.

If I cant use text links, I’m going to have to make 6 menus with 6-7 images for links. That’s a lot of images, and a lot of re-exporting if I make a boo boo, or they want the text size up 1 point or something.

I hope someone has some insight on this!

Just create a div container say 800px that has a left and right marjin set on AUTO.  Then put in that container your #header, #nav, #content with an equal width.

Do you have any code/CSS I can look at?

The layout is a lot more complicated then that unfortunately.

The header must be in a fixed position and never disappear. As well it must be able to expand vertically in case the text is enlarged (which means the header div is enlarged) and push down the content div below it. It’s almost like i need dynamic top padding on the body div in order to be pushed down, when the header div is enlarged

I’ll have to show my code later when it’s cleaned up.

Do you have a sample page up?

2) The header has to be able to expand vertically in case (probably going to happen) the text sized is enlarged by the user.

Why would that be any problem?

Since the header would be position:fixed, it’s taken out of the flow, so the content div below doesn’t care if the header is expanded or not, it stays right where it is and divs overlap.

You just answered your own question. Keep both header and content in normal document flow and you can expand that header all you want.

I just need help with the theory of how to do it, or if you can even do it or not.

Show us a sample page or a picture of what you want to accomplish then 😊

If I cant use text links, I’m going to have to make 6 menus with 6-7 images for links. That’s a lot of images, and a lot of re-exporting if I make a boo boo, or they want the text size up 1 point or something.

Well, those are the known disadvantages of image-based menus, very little you can do about that.

I never said an expanding header would be a problem, on its own. It’s a 2 part issue. If I want the header to expand AND stay fixed and never leave the screen, while pushing the content div down, is the issue.

And, keeping the header and content div both fixed does not fix the problem. The content div still ignores the header divs position, and the only way make the content div visible is to put it to a lower z-index then the header, AND add the same amount top positioning (top:17em, same height as the header, but in ems works the best so far) to the content div to push it down. This is the nature of absolute and positioned elements, as far as I know.

Unfortunately, when you use the IE7 zoom tool, the next does not get enlarged, and neither does the website as a whole if the divs are in a fixed position, so for IE7 users who don’t know better, their “text-enlarger” aka zoom tool won’t do what they think it will be doing.

In Firefox, the text gets larger as it should, but there is no scrolling of the page, so i switched the content position from fixed to absolute, and body {overflow:auto;}

The results in IE7 arethe header stays the same width and text does not get zoomed (because its fixed), but the text and content div DO get zoomed. Actual text resizing in ie7 works as it does in firefox

I go through about 7-8 re-writes of the code and it’s a little messy at production phase so I don’t have time to post examples every time I change something, but here is the latest one.

#header{position:fixed; top:0; z-index:2; width:800px; min-height:164px; background-color:#eee;}

#content{position:absolute; top:15em;z-index:1; width:800px;background-color:#666;}

The header and content are in a container div that centers the page, pretty basic. If the container is removed, then we get some other issues which I won’t get into.

I’m not looking for someone to write my code, just someone who has come across this issue in the past or is very skillful in positioning and knows the ins and outs and might have a tidbit of advice.

EDIT: actually i just switched the height of the header to ems instead of pixels and it’s resizing alot smoother. There use to be a huge gap between the two divs before, whcih I ignored. I have a feeling that a good em measured layout will help me figure this out. I also played with the widths in ems and percents, getting some different results but not really perfect.

Then I need to figureout howto make this work on Ie6!

I think I’ll take a break from this.

THe levels of text enlargement in IE are not enough to wreck the layout, so I think I’m expecting to much from this layout, and to have it work everywhere. Considering I don’t recall seeing this type of layout many places in real world examples, leads me to believe perhaps it’s a common practice!