SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A challenge(?) for CSS gurus. Table-less layout problems

    I'm working on a redesign of my site and want to layout the interface w/o tables. I've done this successfully with other pages but not other that contained so many graphics. Here's the link

    http://www.peterbailey.net/new/

    And here's a page with the screenshot I took from IE and NS6 and a Photoshopped version of what it should look like

    http://www.peterbailey.net/new/problem.htm

    I want this to work in IE5+ and Gecko

    To view the source for the pertinent files, go here

    http://www.peterbailey.net/new/showsrc.php

    I've identified several errors, but I don't know how to get around them.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all, you probably want to change the DOCTYPE, and get your page (especially your CSS files)

    My first recommendation:

    You are centering the whole page, that is a logical group make use of it: wrap the whole secion in a <div>. Absolutly position it in the center, then the rest is easy. Why? It means that you can absolutly position things in your page, as they will be relative to the centered section. Set the top of everything you need to set. (for example, the header at top:0px, the content at top:130px or so etc)

    Next, I'd take a look at the menu. Just use text, put it in a <div>, and using positioning, place it exactly where you want it. (padding: 0px; margin: 0px

    hth,
    Douglas
    Hello World

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That sounds ok, but what about the tiling background images at the top and bottom? It is because of those That I separated the page into 3 'rows' instead of just centering the whole thing?

    The method I understand for centering an object horizontally within it's container is:

    div#body {
    margin-left: auto;
    margin-right: auto;
    }

    Is this accurate? It was not working properly in IE6...

    Change the DOCTYPE to what?

    I'm gonna work on this and let you know how it comes out...
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.w3schools.com/xhtml/xhtml_dtd.asp

    IE6 is starting to get smart. Mozilla does it a bit too. You have a HTML 4 header (the doctype). margin:auto is XHTML/CSS, aka not in HTML 4, so if you declare your page as HTML 4, IE doesn't use it Change it to

    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    or somtheing similar (its at the top of your page, and more explination on the link above)

    For the bars at the top and bottom, well that's easy Because your "backgrounds" have no texture etc, you can just put them in as images, and set: {position: absolute; bottom: 0px; width: 100%} and put them in your parent <div>. If you wanted to get complicated, you could apply that style above to an empty div, and then set the background style of that <div>. That way it won't even come up in non standards browsers (you are hiding your style sheet, right??)

    Douglas
    Hello World

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh yes, thank you. I'm getting closer. I think I may need 1 or 2 more nudges in the right direction. Visit the link (the showsrc.php page has been updated) www.peterbailey.net/new/test.htm

    How can I get the stuff at the bottom to align with the bottom of div#container and NOT the bottom of the page? Also, you can probably see in IE that the top BG image doesn't show up to the left.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •