Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sizing errors in 3 column + header layout in NS 7.0

    Hello,

    I've been searching like mad to find an answer to my problem, and unfortunately have had no luck. If anyone can shed some light onto this gloomy beginner coder I would be ever grateful. Here's my problem.

    To learn CSS I'm trying to make a simple 3 column layout with a header spanning across the entire top. I've also made it to be centered at all times. In IE everything seems to be alright but in Netscape 7.0 I run into a couple annoying errors.

    One, the top banner lines up nicely on the left but seems to be a few pixels to large on the right side even though my settings are all evened out.

    Two, the center column runs to far down, passing the left/right columns, leaving blank spaces even though the height is set to 100% for all three.

    Here's my code...

    PHP Code:
    <html>
    <
    head>
    <
    title></title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!--
    Beginning of all CSS Related Definitons----------------------------->
    <
    style type="text/css">
    <!--
    BODY {
    margin0px;
    background-color#000000;
    color#FFFFFF;
    font-familyArial;
    }
    #Container {
    positionabsolute;
    top0;
    left50%;
    height100%;
    margin-left: -380px;
    }
    #LeftColumn {
    floatleft;
    width150px;
    height100%;
    background-color#000066;
    border#0066FF groove;
    border-width0px 0px 0px 2px;
    }
    #CenterColumn {
    positionabsolute;
    top151px;
    left150px;
    width480px;
    height100%;
    background-color#000000;
    border#0066FF groove;
    border-width2px 2px 0px 2px;
    padding15px;
    font10pt;
    }
    #RightColumn {
    floatright;
    width150px;
    height100%;
    background-color#000066;
    border-color#0066FF;
    border-width0px 2px 0px 0px;
    border-stylegroove;
    }
    #Top {
    width778px;
    height150px;
    background-color#000066;
    border-color#0066FF;
    border-width2px 2px 0px 2px;
    border-stylegroove;
    font-weightbold;
    font-size20pt;
    text-aligncenter;
    }
    -->
    </
    style>
    <!--
    End of all CSS Related Definitions---------------------------------->
    </
    head>

    <
    DIV>
    <
    DIV id="Container">
        <
    DIV id="Top"></DIV>
        <
    DIV id="LeftColumn"></DIV>
        <
    DIV id="CenterColumn"></DIV>
        <
    DIV id="RightColumn"></DIV>
    </
    DIV>
    </
    body>
    </
    html
    I also have another quick question I'm sure can be easily answered. And that is, what is the difference between static and liquid CSS? Is it the difference between absolute pixel/unit positioning and positioning based on the natural flow of the page?

    Thanks so much for any help. Even a pointer to an article or something would be awesome!

    - Ember~Daze

  • #2
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Have a look at the CSS layouts at glish.com.

    Also - "Static" CSS (Fixed layout) means elements are sized absolutely (px), "Liquid" or "Fluid" refers to using em's and % for all sizing.
    While I'm at it, here is a fluid layout that I'm currently wrestling with.
    Change your browser's text size to see the effect.

    Andrew

    *edit: Now that you've stepped up to CSS, use Netscape 7, Mozilla, Firebird or any other Gecko browser as your primary browser, and check your work in IE.
    This is because NN7 etc are standards compliant browsers, they don't accept proprietry tags and are (currently) the best browsers available. If you code to the standards, then hack it to death for IE, the process will be far more painless.
    Last edited by mindlessLemming; 02-01-2004 at 08:55 AM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #3
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank-you. I'm so pumped to learn CSS that I've been anxious to get a response. The link to glish was helpful as well as seeing your example of a fluid layout. Also, knowing what static and liquid mean has made me re-think the plans I had for the site I want to produce.

    Well, I figured out how to make my layout work in both IE and NS without errors in 800x600 or 1024x768. I then attempted to add a nested DIV in the #Center column in order to make an inset box for the content. The results in IE were pleasing but in NS I encountered an error. What happens is that the layer (as I do believe it becomes once I define its 'position') shows at the correct height, but floats on over to the left side of the page. Here's my fixed up code for centering the whole kit-and-kaboodle with the new layer added in.

    PHP Code:
    <html>
    <
    head>
    <
    title></title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!--
    Beginning of all CSS Related Definitons---------------------------->
    <
    style type="text/css">
    <!--
    BODY {
    margin0px;
    background-color#000000;
    color#FFFFFF;
    font-familyArial;
    }
    #Container {
    positionabsolute;
    top0;
    left50%;
    height100%;
    margin-left: -370px;
    }
    #LeftColumn {
    floatleft;
    width130px;
    height100%;
    background-color#000066;
    border#0066FF ridge;
    border-width0px 2px 0px 2px;
    margin0;
    }
    #CenterColumn { 
    background-color#000000;
    border#0066FF ridge;
    border-width2px 0px 0px 0px;
    }
    #RightColumn {
    floatright;
    width130px;
    height100%;
    background-color#000066;
    border-color#0066FF;
    border-width0px 2px 0px 2px;
    border-styleridge;
    margin0;
    }
    #Top {
    width739px;
    height150px;
    background-color#000066;
    border-color#0066FF;
    border-width2px 2px 0px 2px;
    border-styleridge;
    margin0;
    }
    #Content {
    positionabsolute;
    height50%;
    width449px;
    font-size10pt;
    padding15px;
    background-color#000000;
    margin15px;
    border-width2px 2px 2px 2px;
    border-styleridge;
    border-color#0066FF;
    }
    -->
    </
    style>
    <!--
    End of all CSS Related Definitions---------------------------------->
    </
    head>
    <
    body>
    <
    DIV id="Container">
        <
    DIV id="Top"></DIV>
        <
    DIV id="LeftColumn"></DIV>
        <
    DIV id="RightColumn"></DIV>
        <
    DIV id="CenterColumn"><DIV id="Content">This is a simple 3 column w/header layoutIt is 
        100
    table free!</DIV></DIV>
    </
    DIV>
    </
    body>
    </
    html

  • #4
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your header div did not reach the right side of screen at 1024x768 in Moz. I've fixed that. Your container div was doing nothing more than causing a black margin down the left of viewport at 1024x768. I removed it. Your content div was quite semanticly meaningless, so I replaced it with <p>. Text no longer overlaps, but isn't fixed either.
    Code:
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!--Beginning of all CSS Related Definitons---------------------------->
    <style type="text/css">
    BODY {
    margin: 0px;
    background-color: #000000;
    color: #FFFFFF;
    font-family: Arial;
    }
    #LeftColumn {
    float: left;
    width: 130px;
    height: 100%;
    background-color: #000066;
    border: #0066FF ridge;
    border-width: 0px 2px 0px 2px;
    margin: 0;
    }
    #CenterColumn { background-color: #000000;
    border: #0066FF ridge;
    border-width: 2px 0px 0px 0px;
    }
    #RightColumn {
    float: right;
    width: 130px;
    height: 100%;
    background-color: #000066;
    border-color: #0066FF;
    border-width: 0px 2px 0px 2px;
    border-style: ridge;
    margin: 0;
    }
    #Top {
    height: 150px;
    background-color: #000066;
    border-color: #0066FF;
    border-width: 2px 2px 0px 2px;
    border-style: ridge;
    margin: 0;
    }
    #CenterColumn p {
    height: 50%;
    font-size: 10pt;
    padding: 15px;
    background:#000;
    margin-left: 100px;
    border:2px ridge #0066FF;
    }
    </style>
    <!--End of all CSS Related Definitions---------------------------------->
    </head>
    <body>
        <DIV id="Top"></DIV>
        <DIV id="LeftColumn"></DIV>
        <DIV id="RightColumn"></DIV>
        <DIV id="CenterColumn"><p>This is a simple 3 column w/header layout. It is 
        100% table free!</p></DIV>
    </body>
    </html>
    Andrew

    I take no responsibility for the above nonsense.


    Left Justified

  • #5
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow. You just did what I initially wanted to do when I started coding the page. Damn, I got a long way to go with this CSS. But hey, it's all fun to me (aside form the occasional urges to catapult my keyboard into utter oblivion) . Well, thanks so much for your help! It's appreciated very much so. As you recommended I will start coding and testing in NS 7.0. I'm going to grab Mozilla also and Firebird too.

  • #6
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just for your own knowledge, all I did was remove the #container <div>, and remove the width of the #top <div>.
    Sometimes it's better to let elements size themselves, and restrict their size using margins (on them) and/or padding (on their parent div).

    Have fun, CSS rocks
    Andrew

    I take no responsibility for the above nonsense.


    Left Justified


  •  

    Posting Permissions

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