SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Dancing on the tables

    Well, without them actually...

    I'm doing my first "corporate" xhtml strict/css site - a tableless beauty I hope it shall be....

    However, I'm a little stuck with positioning.

    Basically, I (as usual), want it to look mesmerising at 800*600, beautiful at 1024*768 and beyond and rather cute at 640*480.

    Here are some rough screenshots (our own platinum is taking care of the beauty on this project) that give an idea of how I want it to look at various resolutions....


    (@ 1024-768)


    (@800*600)


    (@640*480)

    As you can see, essential content is viewable at all res's and it remains pretty when you go higher.

    Now with tables, I could set the body background to one colour, have tables another, then set definitions for the various cells.

    However, how can I create a "container" for the rest of the css posisitioning if I'm going table-less. I effectively want a centered container, from which all pixel values are based...

    thanks,
    H
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  2. #2
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <style>
    #container {
     margin: auto;
     position: relative;
     width: 400px;
     padding-left: 160px;
     padding-right: 200px;
     }
    
    #header {
     position: absolute;
     top: 0;
     left: 0;
     width: 760px;
     }
    
    #menuleft {
     position: absolute;
     top: 160px;
     left: 0;
     width: 200px;
     }
    
    #menuright {
     position: absolute;
     top: 200px;
     left: 600px;
     width: 160px;
     }
    </style>
    <!-- ... -->
    <div id="container">
     <div id="header"> ... </div>
     <h1>Content Place Your Content Here</h1>
     yadda, yadda, yadda
     <div id="menuleft"> ... </div>
     <div id="menuright"> ... </div>
    </div>
    Or something like that. The "position" property on the container element (it doesn't have to be relative) should let you position it's children anywhere inside of it, I think. :-)

    ~~Ian

  3. #3
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Excellent, that's pretty much where I was headed - was a little unclear on reletive/absolute relationships - will it stay centered though?

    ...
    <!-- ... -->
    Last edited by TheOriginalH; Sep 6, 2002 at 06:58.
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  4. #4
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since you haven't move the container with "top", "left", "right" or "bottom" properties, the "margin: auto" should take effect. :-)

    Note: I have no idea if IE5 gets that part of the box-model right--to my memory it was flawed there, but in the direction you're aiming for.

    ~~Ian

  5. #5
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hmmm - seems to work in Mozilla but not IE - and in both cases I can't define a background colour for the container that differs from the body - this may not be as easy as I'd hoped!
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  6. #6
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well for centering i would use the bluerobot trick. here are the basics.

    Code:
    body {
        text-align: center;
    }
    
    #container {
        text-align: left;
        margin: 0 auto;
    }
    IE 5 applies the text-align to the block element so it makes the site centered.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  7. #7
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Aaaarrgh!!

    Well that, combined with taking the padding out of the container, worked......except at 640*480 where I loose the left portion of the page

    (In Mozilla, not IE...)
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS


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
  •