Three Column Website Design

[Gogf]

What's the HTML for it? I want it to be like

         LOGO        
         LINKS        
LEFT   | CENTER | RIGHT  
TITLE  |CONTENT | TITLE
Link   |CONTENT | Link
Link   |CONTENT | Link

Basically, I want three, separately editable columns, with two things on top of them. Pretty much like the CFC and SCC homepages.

 

[MSTK]

Something along this line: (not meant to be used as a final draft)

<table border=0>
<tr><td colspan=3>LOGO</td></tr>
<tr><td colspan=3><a href="blah">LINKS</a></td></tr>
<tr><td>TITLE (left)</td>
<td rowspan=2>CONTENT (all of it)</td>
<td>TITLE (right)</td></tr>
<tr><td>Left Sidebar</td><td>Right Sidebar</td>
<tr><td>Footnotes</td></tr>
</table>

You still need to factor in the sizes of the cells, the alignment, the background images, etc.

On second thought, I just completely wasted your time...

 

[kcwong]

No, don't do it with tables. That's bad style - hard to maintain, hard to modify. Use Cascading Style Sheet (CSS) instead.

See
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml

For a better example. I google'd "CSS Columns" and found it.

 

[fret]

No, don't do it with tables. That's bad style - hard to maintain, hard to modify. Use Cascading Style Sheet (CSS) instead.

See
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml

For a better example. I google'd "CSS Columns" and found it.

I agree with you, but if somebody is asking about tables, I think using CSS to that extent is a little heavy.


I would use tables, but dont use 1 big table for the full page, the reason for this is that the colspan and rowspan attributes can create very complex tables that are sometimes hard to understand. A simpler method would be to use a layered cake method, in which case you would have two tables stacked on top of each other such as this -

Table 1 -

         LOGO        
         LINKS

would be -

<table>
    <tr>
        <td>LOGO</td>
    </tr>
    <tr>
        <td>LOGO</td>
    </tr>
</table>

and then Table 2, which would 'stack up' beneath table 1 would be -

LEFT   | CENTER | RIGHT  
TITLE  |CONTENT | TITLE
Link   |CONTENT | Link
Link   |CONTENT | Link

which would be...

<table>
    <tr>
        <td>TITLE</td>
        <td>CONTENT</td>
         <td>TITLE</td>
    </tr>
    <tr>
        <td>Link</td>
        <td>CONTENT</td>
         <td>Link</td>
    </tr>
   <tr>
        <td>Link</td>
        <td>CONTENT</td>
         <td>Link</td>
    </tr>
</table>

These would then stack up layer by layer creating the same end result on the page, but avoiding the potentialy confusing rowspan and colspan attributes. While this is straightforward, it does have its drawbacks - each cell accross the rows will always be the same hight, be that the smallest cell of the row, or a hieght that you set it to - there is no way out of this using this method.

A more complex, but much better and flexible way to build the bottom table in the layered cake would be to use a single row, 3 column table (therefore 1 x 3 cells) and then put a nested table in each of the three cells. Its worth readin up, do a search for nested tables tutorial on google and read it.

heres a basic example -

<table>
    <tr>
       <!-- BEGIN LEFT CELL -->
        <td>
             <table>
                <tr>
                   <td>Link</td>
                </tr>
                 <tr>
                   <td>Link</td>
                </tr>
                 <tr>
                   <td>Link</td>
                </tr>
             </table>
        </td>
        <!-- END LEFT CELL -->
         <!-- BEGIN MIDDLE CELL -->
        <td>
             <table>
                <tr>
                   <td>CONTENT</td>
                </tr>
                 <tr>
                   <td>CONTENT</td>
                </tr>
                 <tr>
                   <td>CONTENT</td>
                </tr>
             </table>
        </td>
        <!-- END MIDDLE CELL -->
        <!-- BEGIN RIGHT CELL -->
           <td>
             <table>
                <tr>
                   <td>Link</td>
                </tr>
                 <tr>
                   <td>Link</td>
                </tr>
                 <tr>
                   <td>Link</td>
                </tr>
             </table>
        </td>
        <!-- END RIGHT CELL -->
    </tr>
</table>

I havent checked but I hazard a guess that is the method used for the CFC index page.

 

[Jeratain]

The guys above are right. Either .CSS or tables are the way to go. Just for the love of God, don't use frames.

 

[Quentin]

I don't know why but I found it very funny Jeratain mentioned frames. LOL, frames. And yes I know what frames are. CFC is very similar to what fret described BTW.

 

[Gogf]

Thanks everyone!

I ended up using CSS. The website is here. The finished version (with the images and nav-bar) should be up soon.

 

[Grisu]

I only get the Apache Test Page...

 

[Jeratain]

Thanks everyone!

I ended up using CSS. The website is here. The finished version (with the images and nav-bar) should be up soon.

I don't see any CSS reference file in your source code...

 

[Gogf]

Sorry, someone else working on the site messed up the page. We still have the code, we're just editing it off server. The final version should be up today or tommorow.

 

[Gogf]

And the final version is up!

 

[Jeratain]

Looks pretty good. Good work!

The only thing I noticed was that this title image was a bit off - you might want to fix that: