Using CSS instead of Tables

**fileserverdirect** · 02-17-2008, 01:32 AM

I have always heard that you should never use tables for layouts... well at the time, tables were simple and easy. But I relize how stupid I am to do this (2 years later) And I'm thinking about changing over to CSS. I have a very complicated site, (those who have seen it before know) with up to 5 NESTED TABLES and sometimes 6, but thats when it is absoultly needed. Im sorry I cannot leave a link to the page because my hosting company is changing servers and everything is offline. But can someone maybe point me to a tutorial on converting it.
--
NOTE: Can a mod please move this to the CSS section (sorry, I relized it right before I posted)

**BLiZZaRD** · 02-17-2008, 05:05 PM

Well, basic understanding of CSS, as well as usage of divs, IDs and Classes will go a long way. Manual transform is also the best (stay away from automatic converters, they don't re-code to standards, and you will do it by hand in the end anyway).

On that note look here for some basic rules again, stay away from their "buy our converter" pages, just read the info.

You will also want to code your CSS in a separate file, not on the page as it will start to confuse you later.

Just remember, easier to make a container div, with position:relative set, then you can place any div inside that with position:absolute for better layout.

Classes are for a group of different items through out the page(s) with the same attributes, IDs are for elements with a singular attribute not shared by anything else on any page.

It may take a couple days to get the hang of it, but stick with it and it will go a lot faster as you get the hang of it.

**Twey** · 02-18-2008, 08:22 AM

It all depends on the layout. Some layouts look much simpler with tables than CSS, and some look much simpler with CSS than tables. There are, unfortunately, still some layouts which can be achieved with tables that can't be achieved at all with CSS (in IE). Tables are not good for search engines, and offer no benefits (and substantial disadvantages) over CSS in any situation, other than the aforementioned ease of use for some designs. If you do run into a design that can't be accomplished with CSS without confusing IE, it's often worth creating another design that can.

Finally, a tutorial: http://www.howtocreate.co.uk/tutorials/css/

**fileserverdirect** · 02-18-2008, 06:06 PM

O.K. I uploaded a current version of my site to a free temporary host. Just look at the source, to decide which is best (redesigning or leaving it alone)

http://ohptesting.awardspace.com/index.php?w=y

Note: none of the links on the page work, and please don't nag me about spelling, it is still in development.

**boogyman** · 02-18-2008, 07:09 PM

just looking at the rendered version, and not the code that could be done with css.

it would be somewhat of a complicated floating structure, but basically it would look something like this, without getting too indepth

Code:

body {
     background: #cccccc url('__path_to_left_image__') repeat-y top left;
}
div#container {
     background: #ffffff url('__path_to_right_image__') repeat-y top right;     
     text-align: left;
}
div#left {
     float: left;
     width: 20%;
     color: #ffffff;
}
div#left h3 {
     display: block;
     background-color: #000000;
     color: inherit;
}
div#left ul {
     background-color: #0000ff;
     color: inherit
}
div#left ul li {
     display: block;
     list-style-type: none;
}
div#left ul li a#LocalLink {
     text-indent: -1000px;
     background: url('_local_link_image') no-repeat top left;
}
div#right {
     float: right;
     width: 74%;
}
div#right div {
     clear: both;
     display: block;
     text-align: left;
}
div#right div h2 {
     text-align: center;
}
div#right p.leftEl {
     float: left;
     width: 45%;
}
div#right p.rightEl {
     float: right;
     width: 45%;
}
div#footer {
     clear: both;
}

HTML Code:

<body>

<div id="container">
     <div id="header">
           <h1>Onion House Productions</h1>
           <ul id="nav">
                <li>link</li>
                <li>link</li>
                <li>link</li>
           </ul>
     </div>
     <div id="left">
          <h3>HEADER</h3>
          <ul class="localNav">
               <li id="LocalLink">link</li>
               <li>link</li>
               <li>link</li>
          </ul>
          <h3>HEADER</h3>
          <ul class="localNav">
               <li>link</li>
               <li>link</li>
               <li>link</li>
          </ul>
          __Ads__
     </div>
     <div id="right">
          <div>
               <h2>Onion House Products Services</h2>
               <p class="leftEl">
                    <h3>HEADER</h3>
                    <ul>
                          <li>LIST ITEM</li>
                          <li>LIST ITEM</li>
                          <li>LIST ITEM</li>
                    </ul>
               </p>
               <p class="rightEl">
                    <h3>HEADER</h3>
                    <ul>
                          <li>LIST ITEM</li>
                          <li>LIST ITEM</li>
                          <li>LIST ITEM</li>
                    </ul>
               </p>
          </div>
          <div>
               <h2>OHP Client Services</h2>
               <p class="leftEl">
                    <h3>HEADER</h3>
                    <ul>
                          <li>LIST ITEM</li>
                          <li>LIST ITEM</li>
                          <li>LIST ITEM</li>
                    </ul>
               </p>
               <p class="rightEl">
                    <h3>HEADER</h3>
                    <ul>
                          <li>LIST ITEM</li>
                          <li>LIST ITEM</li>
                          <li>LIST ITEM</li>
                    </ul>
               </p>
          </div>
     </div>
     <div id="footer">
            __Footer__
     </div>
</div>

</body>

if you cannot follow that then let me know which part you have having difficulties on and I will explain it more.

I will tell you right now that you need to watch out for IE6 and below rendering the middle "gutter" when floating elements.
The best way to do this is with percentages, however if you do find yourself using absolute values, be sure to leave yourself a big gutter, and if you can test is on IE6 to make sure that your elements are not "stacking" rather than being displayed inline

Thread: Using CSS instead of Tables

Thread Tools

Search Thread

Using CSS instead of Tables

Bookmarks

Bookmarks

Posting Permissions