Stretchable header problem

[sanbat]

I'm trying to do an stretchable 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.

Basically it's just a horizontal bar that stretches on the left and
right to the width of the browser window. When you resize the window,
this bar grows/shrinks accordingly.

The middle of the bar has about 800 pixels of content (menu in my
case). This content needs to remain centered and 800 pixels, no matter
how wide/ narrow the browser window is.

This effect is easy to achieve normally. However, because the bar is
uneven (left side is thinner while right side is thicker), I'm having
a really tough time with it.

How can I make this work?

Here's a pic of the menu:
http://www.webdeveloper.com/forum/attachment.php?attachmentid=10377&d=1201940724

 

[Travis Newbury]

How can I make this work?
Here's a pic of the menu:http://www.webdeveloper.com/forum/attachment.php?attachmentid=10377&d...

I see 5 divisions.
1. thin black, nothing but image
2. thin black, actual menu
3. thin black between menu and search
4. thick black with search
5. thick black

1,3, and 5 can all easily be stretched giving you what ever effect you
like

 

[dorayme]

<[email protected]
m>,

I see 5 divisions.
1. thin black, nothing but image
2. thin black, actual menu
3. thin black between menu and search
4. thick black with search
5. thick black

I see 6 in two different ways:

http://netweaver.com.au/alt/sanbat/sixbits1.png

and

http://netweaver.com.au/alt/sanbat/sixbits2.png

(but then I do have special glasses. Travis, I brought a few
dozen and you can have one for cheap if you hurry, this week
only. And, pssst, I have some watches too... check your Paypal
account has funds...)

 

[Travis Newbury]

I see 6 in two different ways:

Do I hear seven... seven... going once.... going twice....


SOLD for six different ways....

 

[Mullein row]

you mean like this?:

http://web.archive.org/web/20001018223507/www.amazon.com/exec/obidos/subst/home/home.html

position:absolute;
width:100%;

maybe?

 

[Bergamot]

Basically it's just a horizontal bar that stretches on the left and
right to the width of the browser window. When you resize the window,
this bar grows/shrinks accordingly.

Simple enough.

The middle of the bar has about 800 pixels of content (menu in my
case). This content needs to remain centered and 800 pixels, no matter
how wide/ narrow the browser window is.

Unless your content is all graphics, that 800 px is a bogus limitation.
If you're trying to avoid long lines of text, pixels are not the right
unit - ems are, but you'd want to set a max-width, not a fixed width.

This effect is easy to achieve normally. However, because the bar is
uneven (left side is thinner while right side is thicker), I'm having
a really tough time with it.

You're probably looking at the problem the wrong way, or at least in a
way that won't let you see the forest for the trees.

Here's a pic of the menu:
http://www.webdeveloper.com/forum/attachment.php?attachmentid=10377&d=1201940724

Here's an idea:
http://bergamotus.ws/samples/sanbat.html

 

[dorayme]

http://bergamotus.ws/samples/sanbat.html

/* this could be an image instead, but why bother? */
..navbar form .corner {
float: left;
height: 0;
width: 0;
overflow: hidden;
margin: 0 .2em 0 0;
padding: 0;
border: .4em solid #000;
border-top-color: #fff;
border-left-color: #fff;
}

<http://people.aapt.net.au/~miltonreid/alt/because_clever_as_it_is
_it_only_nearly_works.png>

 

[Nik Coughlin]

/* this could be an image instead, but why bother? */
.navbar form .corner {
float: left;
height: 0;
width: 0;
overflow: hidden;
margin: 0 .2em 0 0;
padding: 0;
border: .4em solid #000;
border-top-color: #fff;
border-left-color: #fff;
}

<http://people.aapt.net.au/~miltonreid/alt/because_clever_as_it_is
_it_only_nearly_works.png>

It's that use-borders-to-draw-things hack, it's clever but I don't like it,
there are artifacts. Using a very large (400x400px so that the layout
doesn't break when it's resized) 2 color png instead only adds 768 *bytes*
to the total page size, no big deal. Based very loosely on Bergamot's
layout (probably has issues, knocked up quick and dirty, with minimal
testing):

http://nrkn.com/sanbat/

And, just to play devil's advocate:

http://nrkn.com/sanbat/table.html

 

[dorayme]

It's that use-borders-to-draw-things hack, it's clever but I don't like it,
there are artifacts. Using a very large (400x400px so that the layout
doesn't break when it's resized) 2 color png instead only adds 768 *bytes*
to the total page size, no big deal. Based very loosely on Bergamot's
layout (probably has issues, knocked up quick and dirty, with minimal
testing):

http://nrkn.com/sanbat/

Not bad, slight blemish on enlargement..

And, just to play devil's advocate:

http://nrkn.com/sanbat/table.html

And this is good up to a dramatic jag at one of the rungs of the
ladder:

<http://people.aapt.net.au/~miltonreid/alt/nick_tables_better_and%
20nearly.png>

All tested in Safari.

In assessing all this, one needs to compare the performance of
using images with css-graphic-tricks. Neither is perfect but I
*suspect* for this sort of thing an image is better.

 

[Nik Coughlin]

Not bad, slight blemish on enlargement..

Yes, though only in Safari. Not sure why that's happening, all the em's in
the CSS add up perfectly and resizing works in the other major browsers.
Fortunately, this is just a plaything so I don't care, otherwise I could've
driven myself crazy trying to make Safari obey.

And this is good up to a dramatic jag at one of the rungs of the
ladder:

<http://people.aapt.net.au/~miltonreid/alt/nick_tables_better_and%
20nearly.png>

All tested in Safari.

In assessing all this, one needs to compare the performance of
using images with css-graphic-tricks. Neither is perfect but I
*suspect* for this sort of thing an image is better.

I just don't like these fake diagonals/rounded corners etc. etc.
css-graphic-tricks. I don't see the point. Example, nifty corners:

http://www.html.it/articoli/nifty/nifty1.html

With images instead:

http://nrkn.com/nifty/

Pretty much the same size - the single png required for the corners is 102
bytes but there is less markup. The difference in total page size between
the version with images and the one using a css trick is less than half of
the number of bytes it took me to convery this sentence. Again, just don't
see the point, apart from that it's a cool trick.

 

[dorayme]

Yes, though only in Safari.

In iCab, there is trouble at my normal text size. In Camino it
was fine, at huge:

<http://people.aapt.net.au/~miltonreid/alt/i_was_amused_to_see_thi
s_in_camino.png>

which is almost cool.

Anyway, it is all good fun. To tell the truth, I am happy to have
less options as tools and procedures as I am keen on the idea of
squeezing a lot out of a little. From it comes beauty.

(I do not deny that there can be beauty in the clever and
harmonious and ingenious juggling of a lot to make something. It
is just that this is more to do with the athletic brain than the
natural sense of the aesthetic.)

 

[Bergamot]

It's that use-borders-to-draw-things hack, it's clever but I don't like it,
there are artifacts.

The point was mostly to get the OP to think about the problem in a
different way. I cringed when I saw banter going on about all those
divs. It was just wrong.

2 color png instead only adds 768 *bytes*
to the total page size, no big deal.

http://nrkn.com/sanbat/

768 bytes, plus the extra for all those conditional comments, you mean.
That's a bigger waste of bandwidth.

I don't understand why some people get testy about adding 10 bytes of
browser specific rules to a single stylesheet, but they don't think
twice about polluting the HTML with all that conditional comment crap.
It's just as much a hack as anything you'd see in the CSS rules, and
worse because it's gotta be in every bloody page. It's just bloat.

My 2p on that subject.

 

[sanbat]

Ok here you can see the problem page:

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

Try resizing your browser's width and you'll notice the menu bar's
left/right margins start shifting. The menu bar items should be fixed
and not move around like that.

What can be done to fix this?

 

[sanbat]

You're probably looking at the problem the wrong way, or at least in a

way that won't let you see the forest for the trees.


Here's an idea:http://bergamotus.ws/samples/sanbat.html

The menu I had in mind is actually a bit different. Here's a sample
of it:

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

Try resizing the browser window's width, and you'll see that the left/
right margins of the toolbar is sliding left/right. It should always
be fixed at the center, flush with the content below it.

Could you help me figure out how to do this?

 

[dorayme]

<[email protected]

,

Ok here you can see the problem page:

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

Try resizing your browser's width and you'll notice the menu bar's
left/right margins start shifting. The menu bar items should be fixed
and not move around like that.

Also try resizing the text size in the browser and see what
happens, especially to the menu link text.

What can be done to fix this?

You might pay a visit to <http://jigsaw.w3.org/css-validator/>
and also <http://validator.w3.org/>

It is very complicated html and css and should be a nightmare to
maintain. But deep in all these convolutions, if you alter the
width in

#Htop_1 #left {display:block;float:left;width:59%;background:#690}

to less (eg. 34%), it shoves the menu left. You could do similar
for the search table. But really, there is no comfort in this.
You are tightrope walking on a mass of criss-crossing wires and
you might not be able to easily get back to the perch with the
ladder to get down to earth.

 

[sanbat]

It is very complicated html and css and should be a nightmare to

maintain. But deep in all these convolutions, if you alter the
width in

#Htop_1 #left {display:block;float:left;width:59%;background:#690}

to less (eg. 34%), it shoves the menu left. You could do similar
for the search table. But really, there is no comfort in this.
You are tightrope walking on a mass of criss-crossing wires and
you might not be able to easily get back to the perch with the
ladder to get down to earth.

I'm looking to re-do the html if needed, to get the header to appear
as intended. Would you be able to show me a simple way (hopefully with
some code) to get this working?

 

[dorayme]

<[email protected]
m>,

I'm looking to re-do the html if needed, to get the header to appear
as intended. Would you be able to show me a simple way (hopefully with
some code) to get this working?

Nick Coughlin went to some trouble to give you some mark up. I am
not getting the feeling you are getting into the details of what
you are being offered. Is there something *you* did not like
about Nick's offering?

What about his:

<http://nrkn.com/sanbat/table.html>

which is not too bad for many situations and easy to understand.

Please say in detail what you are not happy about in any of the
answers given you.

Please quote who you are replying to as not everyone is using
threaded newsreaders here.

I will be frank with you. I would not normally bother to make
that sloping edge and it is important to know how much you value
it before spending time on it. Some things are simply not worth
doing if they involve you in lots of non semantic mark up. Or
that work with uncertain results with semantic mark up given the
state of the css tools and browser support.

 

[sanbat]

Nick Coughlin went to some trouble to give you some mark up. I am

not getting the feeling you are getting into the details of what
you are being offered. Is there something *you* did not like
about Nick's offering?

What about his:

<http://nrkn.com/sanbat/table.html>

That effect isn't the one I'm looking for. What I'm looking for is to
have the "My Stuff" and the "Search This" button exactly 800px apart,
centered. The dark green bar then extends out to the edges of the
browser window.

When a user's browser window is resized horizontally, only the dark
green bar should be extended, while the menu and search are still
800px apart, centered.

The goal is to make sure the "My Stuff" aligns to the left margin of
the content area, and the "Search This" button aligned to the right
margin of the content area, while the dark green bar keeps going to
the browser's edges.

I hope I'm making more sense now.

 

[rf]

Ok here you can see the problem page:

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

Try resizing your browser's width and you'll notice the menu bar's
left/right margins start shifting. The menu bar items should be fixed
and not move around like that.

What can be done to fix this?

With that totally convoluted layout covered with the unnecessarily complex
CSS you never will fix this. You have taken the wrong approach to centreing
both the navigation block and the content together.

IMHO start again from scratch, firmly applying the KISS principal.

 

[sanbat]

You're probably looking at the problem the wrong way, or at least in a

way that won't let you see the forest for the trees.


Here's an idea:http://bergamotus.ws/samples/sanbat.html

Thanks for the sample code.

However that's not the effect I'm looking for. What I'm trying to do
is have the "Home" and the "Search for Houses" button exactly 800px
apart and centered. The black bar then extends out to the left of
"Home" and to the right of "Search for Houses", to the browser's
edges.

When the user resizes his browser, the black bar extends/shrinks,
while the menu items remain the same width apart (800px), and
centered. The effect is kinda like the old Amazon.com header menu.

Any idea how to do that?