Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    29
    Rep Power
    0

    Question CSS: Tableless layout


    Hi,

    Learning CSS and trying to convert a table layout to DIVs.

    Example.....

    PHP Code:
    x---------------------------------------------------------x
    |                                                         |
    |                          
    Banner                         |
    |                                                         |
    x---------------------------------------------------------x
    Nav 1 Nav 2 Nav 3 Nav 4 | [Nav graphic] | Nav 5   |
    x--------------x------------------------------------------x
    |              |                                          |
    |     
    Menu     |                                          |
    |    (
    Fixed    |             Introduction                 |
    |    
    Height)   |            (Fixed Height)                | 
    |              |                                          |
    x--------------x------------------------------------------x
    |                                                         |
    |                                                         |
    |                                                         |
    |                       
    Main Text                         |
    |            (
    Auto Height So it can expand)             |
    |                                                         |
    |                                                         |
    |                                                         |
    x-----------------------------------------x---------------x
    |              Closing Text               |    Photo      |
    |             (
    Fixed Height)              |   (Fixed      |
    |                                         |   (
    Height)    |
    |                                         |               |
    |                                         |               |
    x---------x-------------------------------x-----x---------x
    |         |      Graphic Footer Bar       |               |    
    x---------x---------x-----------------x---------x---------x
    |         |         |    Stats Bar    |         |         |
    |         |         |                 |         |         |
    x---------x---------x-----------------x---------x---------x
    |         |         |   Text Nav Bar  |         |         |
    x---------------------------------------------------------
    Problem:

    How do I align the vertical columns (nav buttons especially)? I don't know enough about DIVs to know how to align them flush against each other. That's 6 columns of graphic images.

    Could someone post a code example to learn from?

    Heads up welcome.
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    Code:
    <style type="text/css">
    #banner
      {
      float: left;
      width: 100%;
      }
    #nav1
      {
      clear: left;
      }
    .nav
      {
      float: left;
      width: 20%;
      }
    #menu
      {
      clear: left;
      float: left;
      width: 20%;
      }
    #intro
      {
      float: left;
      width: 80%;
      }
    #main
      {
      clear: left;
      width: 100%;
      }
    Code:
    <div id="banner">Banner</div>
    <div id="nav1" class="nav">Nav 1</div>
    <div id="nav2" class="nav">Nav 2</div>
    <div id="nav3" class="nav">Nav 3</div>
    <div id="nav4" class="nav">Nav 4</div>
    <div id="nav4" class="nav">Nav 5</div>
    <div id="menu">Menu</div>
    <div id="intro">Intro</div>
    <div id="main">Main</div>
    There are other options. You could use absolute positioning depending on your implementation. I recommend reading sections 8-16 of the w3c's CSS recommendation to learn more about the posibilities. Another good place to start is http://glish.com/css.
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  4. #3
  5. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Here's another approach. It combines float and static positioning. http://garyblue.port5.com/webdev/layouttrial.html

    I also highly recommend Big John's site, /*Position Is Everything*/. Every article is worthy of study.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    29
    Rep Power
    0
    Thank you, guys! Did the trick! Been experimenting this morning and figured out the DIVs needed a "wrapper". Was doing it without one, with quite unpredictable results. :/

    Have to get into the mindset of treating DIVs just like nesting tables.

    Trying to code this page as XHTML with an external CSS. It sure does look more organized than trying to nest 10 tables!

    Thanks again,
    Taro
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Have to get into the mindset of treating DIVs just like nesting tables.
    No! You must get entirely away from the nested table paradigm. CSS positioning is entirely different. Nesting is only one tool among many. Again, I suggest Big John's site, especially this article for starters.

    Notice that in my example, except for the unnecessary wrapper, there is no nesting. Everything is positioned by floating or using the normal flow.

    The wrapper div is a convenience only. It allows for easy sizing and, in this case, centering. The size was set as a percentage of the viewport. It could just as easily been made fixed, or proportional to the user's font size.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    29
    Rep Power
    0
    Originally Posted by kk5st
    The wrapper div is a convenience only. It allows for easy sizing and, in this case, centering. The size was set as a percentage of the viewport. It could just as easily been made fixed, or proportional to the user's font size.
    How about vertical aligning?

    Experimenting with the positioning between browsers (IE 6; Opera; Mozilla Firefox; Netscape 7) and can't seem to get Firefox or Netscape to be flush with the top (no top margin).

    Is there a way around that besides two seperate stylesheets?
  12. #7
  13. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    Try no top padding either:
    Code:
    body
      {
      margin: 0;
      padding: 0;
      }
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    36
    Rep Power
    11
    Originally Posted by jharnois
    Code:
    .nav
      {
      float: left;
      width: 20%;
      }
    I've been playing around with a similar layout scheme and have had some interesting results when using a percentage to state the width of the .nav div. IE and Mozilla each interpreted it differently (based on padding, margin and border size) and in one browser it would wrap, while in the other it would be perfectly sized. (I had an overall div to center the content, which was a fixed width and that caused it to wrap). Weird stuff.
  16. #9
  17. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    Not wierd at all ... very common and well documented. In short: Microsoft can't read. Basically, they didn't read the w3c recommendation correctly and screwed everything up. IE5.X includes the padding, margin, and borders in the width, while Mozilla does it right and adds the padding, margin, borders to the width.

    http://glish.com/css is a good place to read more on the problem and get solutions.
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    29
    Rep Power
    0
    This is the code I'm experimenting with......

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>How do you vertical align elements in Mozilla&#63;</title>
    <style type="text/css">
    <!--/*--><![CDATA[/*><!--*/
    body {
    margin : 0; 
    padding : 0; 
    background-color : #000; 
    } 
    #wrapper {
    width : 98%; 
    margin-top : 0; 
    margin-bottom : 0; 
    margin-left : 10px; 
    margin-right : 0; 
    background-color : #000; 
    } 
    #text {
    float : left; 
    width : auto; 
    height : auto; 
    background-color : #000; 
    font-family : Verdana, Arial, Helvetica, sans-serif; 
    font-size : 14px; 
    font-weight : bold; 
    color : #969696; 
    text-align : justify; 
    } 
    .photo1 {
    float : left; 
    margin-top : 1em; 
    margin-left : 0; 
    margin-right : 1em; 
    margin-bottom : 2em; 
    } 
    .photo2 {
    float : right; 
    margin-top : 1em; 
    margin-left : 1em; 
    margin-right : 0; 
    margin-bottom : 2em; 
    } 
    /*]]>*/--></style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="text">
    	<p><span class="photo1"><img src="/images/xhtml/whatthe.png" width="200" height="220" longdesc="/i_am/a/designer/not_a/programmer/index.htm" alt="What the heck is this&#63;" /></span>Some sample text that has no other other reason but to show the alignment of text on this page. Interesting that it will break only at certain points.
    	<span class="photo2"><img src="/images/xhtml/onestandardplease.png" width="200" height="220" longdesc="/too_many/browsers/index.htm" alt="How many browsers now must we design for&#63;" /></span>Some sample text that has no other other example of example but to show the alignment of text on this page. Interesting that it will break only at certain points. Mozilla Firefox and Netscape 7 are claimed to be swell browsers, yet are a b*tch to wrap a design around.</p>
    </div>
    </div>
    </body>
    </html>
    Perhaps someone can spot where the problem is, as the code is W3C validated.

    Taro
  20. #11
  21. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    What exactly are you trying to align vertically? Tell me what you expect this to look like.
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    29
    Rep Power
    0
    A picture is worth a thousand words

    Enclosed is what is not aligned and seems to refuse to be flushed to the top margin.

    Taro
    Attached Images
  24. #13
  25. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    I made some subtle changes in the style rules and removed the <?xml... line (which puts ie6 into quirks mode) from the top. I also rearranged the html and added some options, since I don't really know how you want things to appear. The code is valid XHTML 1.0 strict.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <meta http-equiv="Content-Type"
        content="text/html; charset=UTF-8" />
    
        <title>Float alignments</title>
    <style type="text/css">
    <!--/*--><![CDATA[/*><!--*/
    body {
        margin : 0; 
        padding : 0; 
        background-color : #000;
        color: #ccc;
        text-align: center;
        font-size: 87%;
        }
    
    p {
        font-size: 1em;
        } 
    
    #wrapper {
        width : 98%;
        text-align: left; 
        margin: 0 auto;
        }
     
    .text {
        background-color : #000; 
        font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif; 
        font-weight : bold; 
        color : #ccc;
        text-align : justify; 
        }
    
    .photo1 {
        float : left; 
        margin-top : 1em; 
        margin-left : 0; 
        margin-right : 1em; 
        margin-bottom : 2em;
        border: 1px solid white;
        }
    
    .photo2 {
        float : right; 
        margin-top : 1em; 
        margin-left : 1em; 
        margin-right : 0; 
        margin-bottom : 2em;
        border: 1px solid white;
    } 
    /*]]>*/-->
    </style>
      </head>
    
      <body>
        <div id="wrapper">
          <img class="photo1" src="/images/xhtml/whatthe.png" width="200"
          height="220"
          longdesc="/i_am/a/designer/not_a/programmer/index.htm"
          alt="What the heck is this?" /> <img class="photo2"
          src="/images/xhtml/onestandardplease.png" width="200"
          height="220" longdesc="/too_many/browsers/index.htm"
          alt="How many browsers now must we design for?" /> 
    
          <div class="text">
            <p>Some sample text that has no other other reason but to show
            the alignment of text on this page. Interesting that it will
            break only at certain points.</p>
    
            <p>Some sample text that has no other other example of example
            but to show the alignment of text on this page. Interesting
            that it will break only at certain points. Mozilla Firefox and
            Netscape 7 are claimed to be swell browsers, yet are a b*tch to
            wrap a design around.</p>
          </div>
    
          <p style="clear: both;">Is that &uarr; what you want, or is this
          &darr;?</p>
    
          <div class="text">
            <img class="photo1" src="/images/xhtml/whatthe.png" width="200"
            height="220"
            longdesc="/i_am/a/designer/not_a/programmer/index.htm"
            alt="What the heck is this?" /> 
    
            <p>Some sample text that has no other other reason but to show
            the alignment of text on this page. Interesting that it will
            break only at certain points.</p>
            <img class="photo2" src="/images/xhtml/onestandardplease.png"
            width="200" height="220"
            longdesc="/too_many/browsers/index.htm"
            alt="How many browsers now must we design for?" /> 
    
            <p>Some sample text that has no other other example of example
            but to show the alignment of text on this page. Interesting
            that it will break only at certain points. Mozilla Firefox and
            Netscape 7 are claimed to be swell browsers, yet are a b*tch to
            wrap a design around.</p>
          </div>
    
          <p style="clear: both;">Or, one more option &darr;.</p>
    
          <div class="text">
            <img class="photo1" src="/images/xhtml/whatthe.png" width="200"
            height="220"
            longdesc="/i_am/a/designer/not_a/programmer/index.htm"
            alt="What the heck is this?" /> 
    
            <p>Some sample text that has no other other reason but to show
            the alignment of text on this page. Interesting that it will
            break only at certain points.</p>
            <br style="clear:both;" />
             <img class="photo2" src="/images/xhtml/onestandardplease.png"
            width="200" height="220"
            longdesc="/too_many/browsers/index.htm"
            alt="How many browsers now must we design for?" /> 
    
            <p>Some sample text that has no other other example of example
            but to show the alignment of text on this page. Interesting
            that it will break only at certain points. Mozilla Firefox and
            Netscape 7 are claimed to be swell browsers, yet are a b*tch to
            wrap a design around.</p>
          </div>
        </div>
      </body>
    </html>
    Take a look. The options demonstrate how the order of the html affects the rendering.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  26. #14
  27. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Looks like we crossed in the mail.

    Remember that <p>s have an intrisic margin. Add this rule;

    p { margin-top: 0; }

    That should do it. At least it did in my example code.

    cheers,

    gary
    Last edited by kk5st; February 19th, 2004 at 05:52 PM. Reason: Type Os
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  28. #15
  29. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    29
    Rep Power
    0
    Thanks, KK.

    The margin-top value of 0 did the trick in both browsers.

    Will remember to remove the <?xml from the language line when finished (this is an experimentation.....learning property values and want to learn the code correctly, not start writing in "quirk" code).

    BTW, what's the order of properties and values in CSS, top down? Like to know what's the most important to begin with and what to end with. Does the border property go at the end of the statement, or does it really matter how it's ordered?

    Example:

    Code:
    #text {
    float : left; 
    width : auto; 
    height : auto; 
    background-color : #000; 
    font-family : Verdana, Arial, Helvetica, sans-serif; 
    font-size : 0.7em; 
    font-weight : bold; 
    color : #969696; 
    text-align : justify;
    border-left: 4px solid #ff0000;
    border-right: 4px solid #ff0000; 
    }
    Again, thanks for the tutorial!
    Taro
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo