SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question problems replacing tables with CSS

    Please see this

    I am pretty new to CSS, and trying to build a layout without using tables.
    I basically want one header (fixed size) two fixed sized frames (left and right), and a dynamic-size content center area.
    I have found some tutorials but couldn't achieve the effects i want. On this page (as well as on tutorials examples), everything is just fine as far as browser window is big enough.

    What i want is that as the browser window gets smaller, the center part gets smaller as well up to a certain point.
    Once let's say the center is 400 pix large, i'd like it not to resize anymore, and the browser scrollbar to appear.
    Also i want the right frame to always stay on the right of the center part whatever happens (i have achieved that nesting the frame).

    To prevent the center part from becoming smaller than a certain size, i tried using the min-width attribute, but it didn't help at all (the center still becoming smaller than that size). Anyone has a clue on using that attribute ?

    I used a trick to solve this problem, i.e. having an image of the center size i want put in there and made invisible (not in my example to make it understandable). as seen in the example, this prevents the center part from getting smaller and makes the scrollbar appear.

    Now there are two problems left :

    1) the center part doesn't get smaller, but the text still moves. What i'd like is something like what can be seen for example here, done with tables, the center content area resizes up to a certain point and then becomes scrollable including the text.

    2) if you make the browser window really tiny, and then scroll to the right, the top frame is cut !?!?

    Thanks for reading and thanks even more for anyone with a solution.

    Quentin

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Once let's say the center is 400 pix large, i'd like it not to resize anymore, and the browser scrollbar to appear.
    Look up the CSS min-width property. Unfortunately, this doesn't work in IE. Bad IE.

    Using the image to force the width is once approach, and might work better if you played around with the nesting to force the width of the entire page, rather than the center div.

    I'll go play for a bit and see what I can do...

  3. #3
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I've played around with your CSS and HTML, so get your brain round this:
    Code:
    <html><head><title></title>
    <style type="text/css">
    body {
       background-color: #fff;
       color: black; 
       font-family: verdana, arial, helvetica, sans-serif; 
       margin: 0; 
       min-width: 450px;
       padding: 0; 
    }
    #top {
       background-color: #aaa; 
       height: 90px; 
    }
    #leftframe {
       background-color: #666; 
       float: left; 
       height: 100%;
       width: 145px;  
    }
    #rightframe {
       background: #333; 
       float: right;
       height: 100%; 
       width: 145px; 
    }
    #center { 
       margin: 0 155px;
       text-align: center; 
    }
    #content { height: 100%; } 
    
    </style></head>
    
    <body>
    <div id="content">
       <div id="top"><img src="back0.gif" width="450px"></div>
       <div id="leftframe"> </div>
       <div id="rightframe"> </div>
       <div id="center">
          <p>;ljsfd;ljsd skdhfopefiwlh wuhkjsh sjdhflkshf 
          sfkjhskjhf djhfkjshf skdfhkjshdkjnvkjn jsdfhkjhsf
          djkhfkjshdkjfhs jkdh</p>
       </div>
    </div>
    </body></html>
    I've tested this in a recent Mozilla nightly build, IE6 and Opera 7 beta.

    Here's what you should pay attention to:
    • the float: left and float: right properties. It takes a bit of thought, but once you figure out how these work, together with the the complementary clear: property, life is much simpler. Read this for a rather dry discussion of how they should work. This renders absolute postioning unnecessary.
    • the "content" div is used to stop the center text squirting out the bottom when the page gets REALLY narrow.
    • the 450px wide image in the "top" div, combined with the "content" div containing everything, forces IE to stop squashing the page once it hits that width. However, more standards-compliant browsers like mozilla and Opera will keep squashing the lower part in order to keep the floating right div in the viewport. (I think this is a bug in IE, and Opera & moz are doing the right thing)
    • Luckily, however, Opera and Moz support the min-width CSS property, so sticking one of those on the body (here set to 450 px) keeps them in line when things get narrow.
    The "top div is cut off" thing is a side effect of the main problem - and goes away when we fix it. However, we still have a similar problem with the height (why is there a vertical scrollbar?) - I think I vaguely understand, but not well enough to explain to other people

    Other stuff I did in passing:
    • on sizes of zero, the unit identifier is optional. 0px = 0em = 0pt = 0cm = 0in = nothing, nada, zilch. So I usually leave it out, because I'm lazy and can't be bothered typing it.
    • when values of some of the margins/padding are the same, you can use shorthand. When you specify all four, you do them top/right/bottom/left - clockwise from the top. If you leave any out of this list, the missing value is assumed to be equal to its opposite - left = right, top = bottom. So margin: 0 10px 5px; will set the top to 0, right to 10px, and bottom to 5px. Left is missing, so it will take the same value as right. If you only give one value, it's applied to all four. Again, saves typing.
    • On colours, you can use another form of shorthand - #000 is the same as #000000, #ddd = #dddddd, etc. It's just #rgb instead of #rrggbb.

  4. #4
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    awesome

    thanks man that's great !
    both the text and top bar problems soved :-).
    well comes now with that vertical scroll, but i'm pretty sure i'll find a way to get around with it.

    Thanks again for your time

    Quentin

  5. #5
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    well...

    I've been fighting with this second problem a bunch of new hours, and still can't make it work...
    I think i have understood what it was though.

    check out this, which is the code kindly provided above. Everything works perfectly as i want it, except for the scrollbar which appears no matter what.

    as one can see with the text present on the page, the frames and center part start under the top banner (no padding). as the size fixed for the frames and center part is 100%, my guess is that it calculates their sixe on the screen size, then places them under the banner which makes them too big for the screen and makes the scrollbar appear.

    so i've been trying out solutions involving having the frames start at the top.

    First try was to put the "top" layer out of the content one, and absolute-position it. Then the image trick was not working anymore though. so i created a "bottom field of 1 pixel high and placed it inside the content div, and then it worked again, but there was a scrollbar, for one single pixel.
    The best solution i have achieved so far is here. I removed the scrollbar by setting frames heigth to 99% .
    I am not perfectly happy with it since 1) it's kinda cheating 2) it creates a white space at the bottom of the page which is gonna make me have to design "bottoms for the frames.
    I could do that, but still i'm interested if anyone has a better solution.

    Thanks
    Quentin

  6. #6
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [100% gives height of the viewport, and is then pushed down]

    Yeah, that's about it.

    The main problem with this layout as it stands is that when the content of the center div gets longer than the viewport is high. Then, you fall "out the bottom" of the side panels, or something equally messy.

    My usual approach to this general kind of layout is to let the side panels take their natural vertical size, and then just let the page carry on down, vertically. If the side panels are being used as link lists or whatever, this can look fine with careful choice of colours. However, that may not be what you want.

    As you've found, the best way to work this stuff out is to just play with it


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
  •