SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow 3-column layout problem

    I recently recoded my default page to utilize the three-column layout that Ron at bluerobot.com developed. I really like it, except that I don't like how the beta (right) div will slide behind the center section and out of view when the browser window size is changed. So, what I want to know is how to keep it from doing that. I only want the right-side column to move to the right-side margin boundary of the center section and stop right there! I do not want any overlapping at all. That way too, when someone with a minimized browser window opens up my page, they won't see what looks like a garbled center column (because of the right-side column sitting behind). I've tried adjusting the z-indexes, but it doen't do the trick. I am also leary of changing the code too much because I don't want to affect the way the page displays in NS. I've emailed Rob at bluerobot but I haven't heard anything for quite some time. Can any of you in the know give me a hand? You can visit my page HERE, and the CSS follows:

    ###########################################

    /* The 3 Column Page Layout Starts Here */

    .Content>p {margin:0px;}
    .Content>p+p {text-indent:20px;}

    .Content1>p {margin:0px;}
    .Content1>p+p {text-indent:20px;}

    /* All the content boxes belong to the content class. */

    .content {
    position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
    width:auto;
    min-width:120px;
    margin:0px 210px 5px 170px;
    border:1px solid black;
    background-color:white;
    padding:10px;
    z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
    }

    .content1 {
    position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
    width:auto;
    min-width:120px;
    margin:0px 210px 5px 170px;
    border:none;
    background-color:white;
    padding:none;
    z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
    }

    #navAlpha {
    position:absolute;
    width:140px;
    top:20px;
    left:20px;
    border:1px dashed black;
    background-color:#eee;
    padding:5px;
    z-index:2;

    /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
    Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
    IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
    declaration. The incorrect IE5/Win value is above, while the correct value is
    below. See http://glish.com/css/hacks.asp for details. */

    voice-family: "\"}\"";
    voice-family:inherit;
    width:128px;
    }

    /* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
    length values to user agents that exhibit the parsing error exploited above yet get
    the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
    a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */

    body>#navAlpha {width:128px;}

    #navBeta {
    position:absolute;
    font-size:8pt;
    width:190px;
    top:20px;
    right:10px;
    border:1px dashed black;
    background-color:#eee;
    padding:5px;
    z-index:1;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:148px;
    }

    /* Again, "be nice to Opera 5". */

    body>#navBeta {width:148px;}

    ######################################

    Thanks, Folks.
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  2. #2
    SitePoint Enthusiast JohnShaft's Avatar
    Join Date
    Oct 2002
    Location
    England
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi garlinto.

    I too started using CSS for layout in a similar way to you from articles at bluerobot and primarily thenoodleincident (which has a lot on boxes for layout.
    Well since then I've graduated to sorta making up my own.

    I had the same problems as you, also because I couldn't get z-index to do what it is *supposed* to do (i.e. prioritise which layer goes over which).
    But I then discovered there was one way round it that really suited me, don't know if it's what you are looking for.

    Basically it was a shift from using fixed widths as pixels into using percentages. This way it resizes like a dream, without resorting to layer over layer. Now if you want the right and left panels an exact size it might not be much use for you, but if not it might be what you are looking for.

    I have used this extensively myself on my site.
    Basically (on my site) what you see down the left and right size is sized at 20% width, and the middle content column is sized at 60%. You can also set position by a percentage, i.e. left:20%.

    Don't know if I can convert you to the percentage camp but thought I'd give it a go!!

    PS If anyone does know why me and garlinto can't get z-index to work I'd appreciate it.
    HorrorExpress.com - all the latest Horror Movie Reviews and News

  3. #3
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    check out this post and this url.
    Is that what you wanted to do ?
    I've been working around this 3 column layout for a while now, trying to achieve having fixed-size side columns, no over lapping and no text stretching under a certain size.
    I'm pretty happy with the solution i have now, using a 1px blank image and a 99% height content container.
    Tell me if that's the kind of layout you're looking for.

    Quentin

  4. #4
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks, Guys.....

    Thank you both for taking the time to help me.

    JohnShaft's suggestion to use percentages instead of fixed values is good. I'm going to use it.

    And yes, Quentin, that is similar to what I want to do. I like the liquid aspect of the boxes, but I do not like the overlapping of the right-hand box. So do I need to make the right-hand box positioned absolutely? I don't want to lose the "fluid" aspect of the page that so nicely accomidates browser resizing, but I don't want my potential customers feeling that I don't know what I'm doing (by having a seemingly erroniously placed box), since my work reflects on my employers and their business.

    What do you guys think?
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  5. #5
    SitePoint Enthusiast JohnShaft's Avatar
    Join Date
    Oct 2002
    Location
    England
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad to help Garlinto.

    If the left and right columns don't need to be an exact size and (ideally) if people won't be using resolutions low enough to interfere with your side bar percentages then I say go with the %'s, at least until you can find another perfect way of doing it.

    %'s to me are much preferabble if you can still get it to look right in 800x600 and particularly if people may have a higher resolution.
    So many sites are so lazy/un-professional that they don't bother to accomodate for anything above 800x600. Try viewing one of these sites in a high resolution (that don't stretch and are made for 800x600) it makes for a truly terrible surfing experience.
    HorrorExpress.com - all the latest Horror Movie Reviews and News


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •