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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with tables to CSS

    I've worked with CSS for at least 1 and a half now and I think I'm pretty damn good, but one problem I've always had is liquid layouts. Getting the percents right without tables is kinda a problem.

    I run a forum at songswewearpantsto.com (Fan forum) and I run it using phpBB. Recently, I came upon punBB and I fell in love with it because of the complete lack of Tables. I set out to convert a tables layout into CSS. Well halfway through it I hit a problem. I can't get the right DIV to go down gracefully when you have a 800x600 resolution (That's one problem I wanted to fix with the converstion. Here's where I'm at on the CSS converstion. (Link). Please help me by making the tables to CSS converstion work. Thank you very much and I think I'll stay on this forum for a long long time.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    A fluid layout in CSS isn't that hard really. Basically you have the fixed width left nav and then the content which just has a left margin that is equal to or greater than the width of the left nav.
    http://bonrouge.com/2c-hf-fluid.php
    For you good browsers you can use min-width so the browser will make a scrollbar at the width you set. For IE there is a way to fake min-width.
    http://www.cssplay.co.uk/boxes/minwidth.html
    It will work but you might want to change the #FFF to match your background color. You can also use javascript if you prefer.
    Code:
    <!--[if gte IE 5]>
    <style type="text/css">
    body {width:expression( documentElement.clientWidth < 600 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 600 ? "600px" : "auto") : "600px") : "auto" );}
    </style>
    <![endif]-->
    Just change the 600 to match the width you want to set the 'min-width' as.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks man, I'll come back in like 30 minutes when I try this out.


  •  

    Posting Permissions

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