#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    178
    Rep Power
    12

    CSS layout problem...


    this is killing me...i can't make this work...

    the problem is everything shifts to the left margin at x=0px;y=0px...it should be centering itself on the page...what am i doing wrong?

    in the stylesheet...

    #alles {
    position: relative;
    width: 751px;
    height: auto;
    margin: 0px auto;
    z-index: 1;
    }
    #topbox {
    float: left;
    position: relative;
    width: 308px;
    height: 36px;
    top: 0px;
    left: 40px;
    text-align: left;
    z-index: 1;
    background-color: #000000;
    }
    #randadv {
    float: right;
    position: relative;
    width: 388px;
    height: 30px;
    text-align: right;
    z-index: 1;
    padding-top: 3px;
    }
    #featuredthings {
    position: absolute;
    width: 358px;
    left:393px;
    top:36px;
    height: 120px;
    text-align: left;
    background-color: #f3f3f3;
    z-index: 1;
    }
    #limg {
    position: absolute;
    width: 40px;
    left:0px;
    top:171px;
    height:auto;
    text-align: left;
    z-index: 1;
    }
    #blog {
    position: absolute;
    width: 325px;
    left:40px;
    top:171px;
    height:104px;
    text-align: left;
    z-index: 1;
    }

    then it's called up like this...

    <div id="alles">

    <div id="topbox"></div>
    <div id="randadv"><span class="topdate">Today is the best day you've ever had
    today</span></div>

    <div id="featuredthings"><span class="featured">Featured_things</span></div>

    <div id="limg"><img src="imgs/3a.jpg" width="33" height="33"></div>

    <div id="blog">Blog stuff here</div>

    </div>

    thanks for any advice...v
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Lyon, France
    Posts
    49
    Rep Power
    11
    My first post.. yeaaayyy

    1. Certain browsers require that the body tag has text-align:center set within the stylesheet before centering any child content assigned a margin:auto

    2. Floated divs don't need to have an explicit position:relative set within the stylesheet so these rules can be removed (if nothing else, it cuts a few bytes from the css filesize!)

    Hope that fixes the problem..

    Cha'mone,
    OCB
  4. #3
  5. Freelance Webdesigner
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    38
    Rep Power
    12

    well i think it's better


    well i think it's better if you use tables for ur design.
  6. #4
  7. what's your moniker?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Highland Park, NJ
    Posts
    201
    Rep Power
    12

    Re: well i think it's better


    Originally posted by dotcommakers
    well i think it's better if you use tables for ur design.
    Bah!! Tables are evil
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    7
    Rep Power
    0
    Well I can only speak from my experience but it's not too easy to use div's in this fashion to make a page that will display well in any browser - it can be done, but like dotcommakers tables are just better for layout control, simply cos they are designed to create a structure where cells (i.e td) are grouped and follow a set of rules for width/height. Div's don't do this by default, so you're just making more work for yourself for no reason.
  10. #6
  11. what's your moniker?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Highland Park, NJ
    Posts
    201
    Rep Power
    12
    actually, tables aren't designed to make layouts. the height attribute isn't even supported: run a table site in validator.w3.org

    css isn't any more difficult, it's just a different skill to learn. csszengarden.com has some great examples of layouts that can be done with stylesheets
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    7
    Rep Power
    0
    Erm, try www.crymsonspyder.com/newcs in validator.w3.org (though don't go finding any errors on the pages, cos it's not 100% tested yet lol).

    Height isn't supported in HTML, but that's cos you're supposed to do all the size/colour etc. stuff with css for all objects, divs, tables everything.

IMN logo majestic logo threadwatch logo seochat tools logo