Stretchable header problem

Discussion in 'HTML' started by sanbat@gmail.com, Feb 2, 2008.

  1. Guest

    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
     
    , Feb 2, 2008
    #1
    1. Advertising

  2. On Feb 2, 6:34 am, wrote:
    > 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
     
    Travis Newbury, Feb 2, 2008
    #2
    1. Advertising

  3. dorayme Guest

    In article
    <
    m>,
    Travis Newbury <> wrote:

    > On Feb 2, 6:34 am, wrote:
    > > 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


    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...)

    --
    dorayme
     
    dorayme, Feb 2, 2008
    #3
  4. On Feb 2, 3:59 pm, dorayme <> wrote:
    > > I see 5 divisions.

    > I see 6 in two different ways:



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


    SOLD for six different ways....
     
    Travis Newbury, Feb 3, 2008
    #4
  5. Mullein row Guest

    you mean like this?:

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

    position:absolute;
    width:100%;

    maybe?

    On Feb 2, 5:34 am, wrote:
    > 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...
     
    Mullein row, Feb 3, 2008
    #5
  6. Bergamot Guest

    wrote:
    >
    > 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

    --
    Berg
     
    Bergamot, Feb 3, 2008
    #6
  7. dorayme Guest

    dorayme, Feb 3, 2008
    #7
  8. Nik Coughlin Guest

    "dorayme" <> wrote in message
    news:...
    > In article <>,
    > Bergamot <> wrote:
    >
    >> 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>


    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
     
    Nik Coughlin, Feb 4, 2008
    #8
  9. dorayme Guest

    In article <fo601g$130$>,
    "Nik Coughlin" <> wrote:

    > "dorayme" <> wrote in message
    > news:...
    > > In article <>,
    > > Bergamot <> wrote:
    > >
    > >> 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>

    >
    > 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.

    --
    dorayme
     
    dorayme, Feb 4, 2008
    #9
  10. Nik Coughlin Guest

    "dorayme" <> wrote in message
    news:...
    > In article <fo601g$130$>,
    > "Nik Coughlin" <> wrote:
    >
    >> "dorayme" <> wrote in message
    >> news:...
    >> > In article <>,
    >> > Bergamot <> wrote:
    >> >
    >> >> 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>

    >>
    >> 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..


    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, 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.


    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.
     
    Nik Coughlin, Feb 4, 2008
    #10
  11. dorayme Guest

    In article <fo661f$g5o$>,
    "Nik Coughlin" <> wrote:

    > "dorayme" <> wrote in message
    > news:...
    > > In article <fo601g$130$>,
    > > "Nik Coughlin" <> wrote:
    > >
    > >> "dorayme" <> wrote in message
    > >> news:...
    > >> > In article <>,
    > >> > Bergamot <> wrote:
    > >> >
    > >> >> http://bergamotus.ws/samples/sanbat.html
    > >> >
    > >> > <http://people.aapt.net.au/~miltonreid/alt/because_clever_as_it_is
    > >> > _it_only_nearly_works.png>
    > >>
    > >> http://nrkn.com/sanbat/
    > >>

    > >
    > > Not bad, slight blemish on enlargement..

    >
    > 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.

    > >> 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_nearly.png>
    > >


    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.)

    --
    dorayme
     
    dorayme, Feb 4, 2008
    #11
  12. Bergamot Guest

    Nik Coughlin wrote:
    >> In article <>,
    >> Bergamot <> wrote:
    >>
    >>> http://bergamotus.ws/samples/sanbat.html

    >
    > 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.

    --
    Berg
     
    Bergamot, Feb 4, 2008
    #12
  13. Guest

    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?
     
    , Feb 12, 2008
    #13
  14. Guest

    > 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...

    >
    > 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?
     
    , Feb 12, 2008
    #14
  15. dorayme Guest

    In article
    <
    >,

    wrote:

    > 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.

    --
    dorayme
     
    dorayme, Feb 12, 2008
    #15
  16. Guest

    > 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?
     
    , Feb 13, 2008
    #16
  17. dorayme Guest

    In article
    <
    m>,
    wrote:

    > > 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?


    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.

    --
    dorayme
     
    dorayme, Feb 13, 2008
    #17
  18. Guest

    > 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.
     
    , Feb 13, 2008
    #18
  19. rf Guest

    <> wrote in message
    news:...
    > 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.

    --
    Richard.
     
    rf, Feb 13, 2008
    #19
  20. Guest

    > 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...

    >
    > 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?
     
    , Feb 13, 2008
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Newsgroup - Ann
    Replies:
    4
    Views:
    736
    lilburne
    Nov 2, 2003
  2. John Smith

    Header files included in header files

    John Smith, Jul 21, 2004, in forum: C Programming
    Replies:
    18
    Views:
    633
    Jack Klein
    Jul 24, 2004
  3. Replies:
    3
    Views:
    1,348
    Walter Roberson
    May 1, 2006
  4. Bit byte
    Replies:
    1
    Views:
    674
    benben
    Apr 19, 2006
  5. mlt
    Replies:
    2
    Views:
    892
    Jean-Marc Bourguet
    Jan 31, 2009
Loading...

Share This Page