Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old December 21st, 2004, 04:53 PM
Authorized User
 
Join Date: Dec 2004
Location: , , United Kingdom.
Posts: 20
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to DSteven Send a message via MSN to DSteven
Default three-column layout help

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
Reply With Quote
  #2 (permalink)  
Old December 21st, 2004, 07:46 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
Reply With Quote
  #3 (permalink)  
Old December 22nd, 2004, 05:57 AM
Friend of Wrox
 
Join Date: Jun 2003
Location: , , United Kingdom.
Posts: 1,212
Thanks: 0
Thanked 1 Time in 1 Post
Default

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
Reply With Quote
  #4 (permalink)  
Old December 22nd, 2004, 09:39 AM
Authorized User
 
Join Date: Dec 2004
Location: , , United Kingdom.
Posts: 20
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to DSteven Send a message via MSN to DSteven
Default

ok thank you all so much

Reply With Quote
  #5 (permalink)  
Old December 22nd, 2004, 11:20 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
Reply With Quote
  #6 (permalink)  
Old December 22nd, 2004, 03:47 PM
Authorized User
 
Join Date: Dec 2004
Location: , , United Kingdom.
Posts: 20
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to DSteven Send a message via MSN to DSteven
Default

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

Reply With Quote
  #7 (permalink)  
Old December 22nd, 2004, 04:14 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
Reply With Quote
  #8 (permalink)  
Old December 23rd, 2004, 04:15 AM
Authorized User
 
Join Date: Dec 2004
Location: , , United Kingdom.
Posts: 20
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to DSteven Send a message via MSN to DSteven
Default

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??

Reply With Quote
  #9 (permalink)  
Old December 28th, 2004, 10:02 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
IE 6 & 7 issues in two column layout Cyber Shiva BOOK: CSS Instant Results 0 July 7th, 2008 03:47 AM
3 column layout acevision7 BOOK: Professional CSS: Cascading Style Sheets for Web Design 0 February 24th, 2008 11:13 PM
2-column layout kennethjaysone CSS Cascading Style Sheets 2 January 12th, 2008 06:44 AM
Center two column layout nloding CSS Cascading Style Sheets 1 June 21st, 2006 12:11 PM
layout adflynn Java GUI 0 November 9th, 2004 06:33 AM



All times are GMT -4. The time now is 04:04 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.