three-column layout help

DSteven · December 21st, 2004, 04:53 PM

ok i am a beginer at web degin and i wanted to make a three-colcum layout i followed the steps in the web prgramming with hmtl, xhtml, and css and i can't get it to wrok this what the code looks like

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.nav{
  float:left;
  width:100px;
  height:30em;
  font-weight:bold;
  background-color:#e3e3e3;
  padding:5px;}
</style>
</head>

<body>

<table width="700" algin="center" cellpadding="0" cellspacing="0">
   <tr>
      <td class="header" colspan="2">
         Graphics Co.
      </td>
       <td class="nav" valign="top" width="100">
         links
      </td>
       <td class="content">
         Welcome
       </td>
     </tr>
</table>
</body>
</html>
and i don't know what is wrong with it cna someone tell me what i need to do

sorry if i have posted it on the wrong board

richard.york · December 21st, 2004, 07:46 PM

Try this instead of a table:

<div class='header'>
</div>
<div class='nav'>
</div>
<div class='content'>
</div>

You might also add something like this so you can see the dimensions of each element without adding content.

div {
    border: 1px solid black;
    height: 50px;
    background: yellow;
}

I suppose, theoretically speaking, you could apply the float property to table cells, but why would you want to?

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

pgtips · December 22nd, 2004, 05:57 AM

Assuming that you want a layout like this:

Code:

________________________
|      header          |
________________________
|   nav   |  content   |
________________________

then in your example you're missing a closing </tr> after the header td.

Personally though, I agree with Richard. There's no need to use tables these days just for layout. CSS is the way to go.

rgds
Phil

DSteven · December 22nd, 2004, 09:39 AM

ok thank you all so much

richard.york · December 22nd, 2004, 11:20 AM

If you do go with a table layout, then you don't want to include the float: left; declaration in the style sheet rule, it would likely wreak havoc with the layout.

Tables aren't really intended to do page layout where standards and mark-up semantics are concerned, but they are often used for that purpose. Standards purists will tell you to use a table only when a situation calls for you to show relationships between data, e.g. for spreadsheet-ish data, since that's why tables exist. I tend to agree with that philosophy, though in the real-world it isn't always possible.

The following is my suggested approach, if using a table.

Code:

body {
    text-align: center; /* In IE, this will center the table on the page */
}

table.content {
    border-collapse: collapse; /* Same as cellspacing="0" */
    text-align: left;          /* In IE, this will prevent the content in each table cell from being centered */
    margin: auto;              /* This will center the table in standards-compliant browsers like Mozilla Firefox */
    width: 700px;
}
table.content td {
    vertical-align: top; /* This is the same as valign="top", and it will be applied to all table cells */
}
table.content th {
         /* This only applies to the header */
}
table.content tfoot td {
         /* This only applies to the footer */
}

Code:

<table class='content'>
    <colgroup>
        <col style='width: 100px;' />
        <col />
    </colgroup>
    <thead>
        <tr>
            <th colspan="2">
                Graphics Co.
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="nav">
                links
            </td>
            <td class="content">
                Welcome
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>A footer</td>
        </tr>
    </tfoot>
</table>

You're still using tables here, but some redundancy has been eliminated, you see that many attributes that are normally applied to the table and table cells directly have been moved to the style sheet. There are extra tags applied, which add more semantics to the markup. A <col> tag defines the width for the first column of the table, instead of applying a width attribute to each table cell of that column directly. The <thead> tags encompasses all the <th> tags, which are considered the table's headers. Likewise a <tfoot> tag encompasses the rows and cells that are considered the table's footers. Fair warning though, if when printing the document the table spans more than one page, the content of these tags are repeated at the top and bottom of each page (in most browsers). But that is often times desirable behavior.

Personally, I only use tables for layout when it is forced on me (e.g. by the company that I work for), in comparison the three <div> elements that I demonstrated in my previous post are capable of accomplishing the same thing with far less markup, and with much more flexibility. To see a demonstration of what I'm talking about, go to the CSS Zen Garden (http://www.csszengarden.com), and select from the different designs on the right side of the page. Be warned though, a standards-capable browser such as Mozilla Firefox (http://www.mozilla.org) is required! Each of the designs featured on this page uses the same underlying markup, only the style sheet is changed.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

DSteven · December 22nd, 2004, 03:47 PM

what is the dffernce between <div> and <table>?? and also richard.york could you explain your post again as i don't understand as i am only 15

richard.york · December 22nd, 2004, 04:14 PM

I'm probably not going to be able to explain this well enough in a few forum posts, but I'll give it my best. In fact, I spent an entire book of 648 pages explaining exactly this! So if you don't get it right away, no worries, most of us have spent a few years getting it down.

A <div> is what is known as a "block-level" element. In this case it is a generic container. As a block-level element it has some pre-defined rules that it must follow.

1. By default it takes up all the space available to it horizontally.
2. It expands vertically only as much as there is content inside of it.
3. Width applied to a block element is strict, if you apply a width of 200 pixels to a <div>, that width must be kept no matter how large the content it holds. (Internet Explorer does not adhear to this rule, but standards-compliant browsers [Mozilla Firefox, Apple Safari, Opera] do)

Some examples of block-level elements are[list] (unordered list), <li> (list-item), and <p> (paragraph). The names for these elements come with some more predefined behaviors that distinguishes them from the others. For instance a[list] element typically has some margin or padding applied to the left and top sides. <li> typically appear inside of[list] elements, and have bullets on the left side, together they define lists. A <p> will have some margin applied to the top. A <div> is a generic container, it has no margin, borders, padding or anything else special applied to it. But as block-level elements, they all conform to the two rules I mentioned.

A <table> is used to show relationships between data, e.g.

Code:

----------------------------------
| user  | name       | age | ************ |
----------------------------------
| joe45 | Joe Blow   | 19  | m   |
----------------------------------
| kat45 | Kathy Blow | 22  | f   |
----------------------------------

A <table> has some predefined behaviors it conforms to as well.

1. A <table> expands horizontally only enough to accomodate its content, this is called "shrink-to-fit"
2. A <table> contains rows "<tr>" and cells "<td> or <th>", which structure the data inside.
3. Width applied to a <table> is not strict, the browser may stretch the <table> if the content inside of it is greater than the width specified.
4. By default, there is usually some space applied between each table cell.

There are lots of things that you can do to <div> and <table> elements that change the rules of how they are laid out, the best way to learn is to experiment, write test cases and see what is possible for yourself. Get a few books on the topic, more than one is best because that helps you to get a different perspective on the more difficult topics.

Anyway, I hope I haven't confused you more! Let us know if you have more questions.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

DSteven · December 23rd, 2004, 04:15 AM

that has helped i should be able to understand it soon as i am going to a collage to course to do some web desgin so heopfully that will help me and also will i learn about <div> in the CSS book??

richard.york · December 28th, 2004, 10:02 AM

There's quite a bit of discussion of <div> element's in my CSS book (well block elements in general versus tables and inline elements), though I can't speak on whether other books discuss this as much, many CSS books are just references and don't touch on this topic at all. The point here being, stick with beginner's tutorials, and avoid reference books. Given you need more understanding of HTML, I'd start with Wrox's Beginning Web Programming with HTML, XHTML, and CSS and move into more complicated topics from there.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design