Expandable header design

[Skeptical]

I'm trying to do an expandable header design similar to what Amazon used to have (they've since changed it). I can't seem to find another example site at the moment.

Anyways, right now I have a menu bar up top, like this:

http://www.webdeveloper.com/forum/attachment.php?attachmentid=10377&stc=1&d=1201940724

When the browser window is resized, the left and right parts of the bar should expand to fill the browser 100%, while the inner part with the content should always remain fixed at the same width.

The problem I've found is that, because the two sides are different thickness, I can't seem to get this working. Could someone give me some hints or code sample to help me get this thing going?

[yamaharuss]

You will need to use a background-color and either table tags or positioning for your menus and search div.

Are you using divs or tables?

[Theremin]

I do that with this site http://www.mccabevisioncenter.com

here is the structure for the header

<div id="header">
<div id="navigation"><img class="navlogo" src="images/navleft.gif" alt="McCabe Logo"/><a href="index.php" title="home"><img id="navigation7" src="images/nav_home.gif" onmouseover="this.src='images/nav_homedown.gif'" onmouseout="this.src='images/nav_home.gif'" alt="home" border="none"/></a><a href="specialties.php" title="specialties"><img id="navigation6" src="images/nav_specialties.gif" onmouseover="this.src='images/nav_specialtiesdown.gif'" onmouseout="this.src='images/nav_specialties.gif'" alt="specialties" border="none"/></a><a href="opticalshop.php" title="Optical Shop"><img id="navigation5" src="images/nav_opticalshop.gif" onmouseover="this.src='images/nav_opticalshopdown.gif'" onmouseout="this.src='images/nav_opticalshop.gif'" alt="optical shop" border="none"/></a><a href="about.php" title="About our team"><img id="navigation4" src="images/nav_ourteam.gif" onmouseover="this.src='images/nav_ourteamdown.gif'" onmouseout="this.src='images/nav_ourteam.gif'" alt="our team" border="none"/></a><a href="locations.php" title="Locations"><img id="navigation3" src="images/nav_locations.gif" onmouseover="this.src='images/nav_locationsdown.gif'" onmouseout="this.src='images/nav_locations.gif'" alt="locations" border="none"/></a><a href="contactus.php" title="Contact Info"><img id="navigation2" src="images/nav_contactus.gif" onmouseover="this.src='images/nav_contactusdown.gif'" onmouseout="this.src='images/nav_contactus.gif'" alt="contact us" border="none"/></a><a href="resources.php" title="Additional Info"><img id="navigation1" src="images/nav_additionalinfo.gif" onmouseover="this.src='images/nav_additionalinfodown.gif'" onmouseout="this.src='images/nav_additionalinfo.gif'" alt="resources" border="none"/></a></div>
</div>

here is the relevant css

#header {
margin: 0px auto;
padding: 0px;
width: 100%;
border-top: 12px solid #3366CC;
}
#navigation {
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
height: 98px;
background-image: url('images/navfiller.gif');
background-repeat: repeat-x;
}
#navigation1 {
top: 0px;
right: 0px;
position: absolute;
}
#navigation2 {
top: 0px;
right: 70px;
position: absolute;
}
#navigation3 {
top: 0px;
right: 140px;
position: absolute;
}
#navigation4 {
top: 0px;
right: 210px;
position: absolute;
}
#navigation5 {
top: 0px;
right: 280px;
position: absolute;
}
#navigation6 {
top: 0px;
right: 350px;
position: absolute;
}
#navigation7 {
top: 0px;
right: 420px;
position: absolute;
}


You can probably clean it up a bit, but there it is :)

Jason

[Skeptical]

You can see the problem easier with this test page:

http://www.vbuddy.com/test.htm

Try resizing your browser's width, and you'll see the menu bar items start shifting positions.

[Frank62]

Skeptical,

They indeed do shift somewhat, but the menu bar in its entirety folds in and out beautifully, I'd say. From 1280 to 800, the center part stays the center part, while the sides fold.

What do you wanna have changed?

[Skeptical]

Skeptical,

They indeed do shift somewhat, but the menu bar in its entirety folds in and out beautifully, I'd say. From 1280 to 800, the center part stays the center part, while the sides fold.

What do you wanna have changed?
What I need is to have the center bar fixed at the center, so the left/right margins line up with the content below and above. Right now it shifts depending on the browser width, and it makes the layout look quite messy.

[Frank62]

Skeptical,

Do you wanna hold on to divs or is a table OK, too?

[Skeptical]

Skeptical,

Do you wanna hold on to divs or is a table OK, too?
I'd prefer DIVs, but tables are OK too if this can't be done with DIVs.

[Frank62]

Here's the table code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Skeptical's Layout</title>
<style type="text/css">
body {
margin: 0;
padding: 0;}
#grandTable {
width: 100%;
height: 100%;
border-collapse: collapse;
table-layout: fixed; /* essential for IE's centerCells' width */}
td {
border: 1px solid black; /* for didactical purposes */}
.centerCells {
width: 780px;}
#header {
background: lightgreen;
height: 100px;}
#footer {
background: lightgreen;
height: 20px;}
</style>
</head>
<body>
<table id="grandTable">
<tr id="header">
<td>1,1</td>
<td class="centerCells">2,1</td>
<td>3,1</td>
</tr>
<tr>
<td>1,2</td>
<td class="centerCells">2,2</td>
<td>3,2</td>
</tr>
<tr id="footer">
<td>1,3</td>
<td class="centerCells">2,3</td>
<td>3,3</td>
</tr>
</table>
</body>
</html>


I set the width of the center sections to 780. And the doctype to transitional (no url), because if one forces % height in standards mode, IE starts acting weird with tables.

With the 100% height and the sticky footer, divs are too time-consuming and too non-intuitive for me.

Let me know.

[Skeptical]

Here's the table code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Skeptical's Layout</title>
<style type="text/css">
body {
margin: 0;
padding: 0;}
#grandTable {
width: 100%;
height: 100%;
border-collapse: collapse;
table-layout: fixed; /* essential for IE's centerCells' width */}
td {
border: 1px solid black; /* for didactical purposes */}
.centerCells {
width: 780px;}
#header {
background: lightgreen;
height: 100px;}
#footer {
background: lightgreen;
height: 20px;}
</style>
</head>
<body>
<table id="grandTable">
<tr id="header">
<td>1,1</td>
<td class="centerCells">2,1</td>
<td>3,1</td>
</tr>
<tr>
<td>1,2</td>
<td class="centerCells">2,2</td>
<td>3,2</td>
</tr>
<tr id="footer">
<td>1,3</td>
<td class="centerCells">2,3</td>
<td>3,3</td>
</tr>
</table>
</body>
</html>


I set the width of the center sections to 780. And the doctype to transitional (no url), because if one forces % height in standards mode, IE starts acting weird with tables.

With the 100% height and the sticky footer, divs are too time-consuming and too non-intuitive for me.

Let me know.
Thanks for that code. The main problem though, isn't this. The coder is saying that because the left and right bars are of different thickness, that he is having trouble getting the layout to work. Would you be able to simulate the style I've shown in the graphic earlier, or from this?

http://www.vbuddy.com/test.htm

[Frank62]

Skeptical,

I would, but that takes a lot of time. That's something that the coder must do himself. And should very well be able to do himself, if he made the original layout to work, too.