Table hack to CSS — OZONE Asylum, home of the Mad Scientists

Topic: Table hack to CSS $Pages that link to <a href="https://ozoneasylum.com/backlink?for=22213" title="Pages that link to Topic: Table hack to CSS" rel="nofollow" >Topic: Table hack to CSS\$

Author	Thread
Radical Rob Bipolar (III) Inmate From: Kapolei, Hawaii USA Insane since: Jun 2001	posted 06-17-2004 02:30 OK I've been working with CSS for a little while trying to grasp all the finer points but was forced to piece together really quick as a demo of what a site will look like. Any simple suggestions of ways to convert completely to CSS... I know everyone hates these table hacked sites but it was the best I could do under such short notice. Also, any critiques on the colors, layout, etc. would be greatly appreciated. I haven't built anything else besides what you see so I want to get my feedback before I put to much work into it. thanks oops... here's the site http://www.hvug.com (Edited by Radical Rob on 06-17-2004 02:30)
Tyberius Prime Paranoid (IV) Mad Scientist with Finglongers From: Germany Insane since: Sep 2001	posted 06-17-2004 08:15 you know... that looks really like a mostly empty page on 1280x1024 pixels... and I have to scroll even to see the dummy content. Argh.
Radical Rob Bipolar (III) Inmate From: Kapolei, Hawaii USA Insane since: Jun 2001	posted 06-17-2004 11:55 Suggestion? I was trying to keep it simple, plain and when content arrives, informative. I'm totally open to suggestions.
WarMage Maniac (V) Mad Scientist From: Rochester, New York, USA Insane since: May 2000	posted 06-17-2004 16:24 Don't load it into a frame. I don't see how you did the CSS for layout. If you want to get into doing CSS layouts just forget the table exists. Start with a blank template file (use XHTML) code: <!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"> <head> <title>The Page's Title</title> <style type="text/css" media="all"> body{ } #head{ } #menu{ } #content{ } #foot{ } </style> </head> <body> <div id="head"><h1>Page's Title Area</h1></div> <div id="menu"> <ul> <li><a rel="nofollow" href="#">Item 1</a></li> <li><a rel="nofollow" href="#">Item 2</a></li> </ul> </div> <div id="content"> <h1>Content</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ornare orci ac magna mattis tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas non libero. Suspendisse potenti. Nullam tincidunt nisl et lectus. Quisque posuere. Suspendisse dapibus dignissim risus. Donec quis ante mollis magna posuere porttitor. Sed massa lorem, porta ut, eleifend id, placerat id, mauris. Duis facilisis nisl. Nulla sagittis, sapien at convallis molestie, ligula felis viverra turpis, eu malesuada nisl arcu a odio. Aliquam ac nibh. Quisque vehicula lorem eget tortor. Aenean molestie, magna sed tristique iaculis, leo dolor iaculis ante, vitae hendrerit sapien felis eget tellus. Morbi non turpis. Suspendisse vestibulum, ligula a porttitor placerat, lectus sapien venenatis elit, nec aliquam nulla nunc in dolor. In non nisl. Mauris semper, nisl non convallis aliquet, erat tellus rhoncus lacus, et consectetuer felis velit vitae lectus.</p> </div> <div id="foot">@copy; My Site 2004</div> </body> </html> The above is a nice starting template, it is a clean slate with only minor structural elements, and you can easily start working the CSS to get the desired template or style. This is how I start doing the layout for most of my sites. Once you have the layout done and tested you can then move on to chopping the page up into your template files, adding in the necessary meta information, along with working in your other style sheets as needed and what not. Starting off your design using tables and not doing thing the CSS way from the beginning is just begging for some problems. If you start off correctly you will not have a hard time doing things the "right" way. You might want to check out http://www.bluerobot.com http://www.glish.com/css These sites have a good number of pre-packaged layouts, which can make things a whole lot easier when starting out. (Edited by WarMage on 06-17-2004 16:25)
Radical Rob Bipolar (III) Inmate From: Kapolei, Hawaii USA Insane since: Jun 2001	posted 06-17-2004 22:06 Sweet... thanks.

Don't load it into a frame. I don't see how you did the CSS for layout. If you want to get into doing CSS layouts just forget the table exists. Start with a blank template file (use XHTML)

code:

<!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">

<head>

  <title>The Page's Title</title>

  <style type="text/css" media="all">

    body{

      

    }



    #head{



    }



    #menu{



    }



    #content{



    }



    #foot{



    }

  </style>

</head>

<body>

  <div id="head"><h1>Page's Title Area</h1></div>



  <div id="menu">

    <ul>

      <li><a rel="nofollow" href="#">Item 1</a></li>

      <li><a rel="nofollow" href="#">Item 2</a></li>

    </ul>

  </div>



  <div id="content">

     <h1>Content</h1>

     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ornare orci ac 

      magna mattis tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

      Maecenas non libero. Suspendisse potenti. Nullam tincidunt nisl et lectus. Quisque 

      posuere. Suspendisse dapibus dignissim risus. Donec quis ante mollis magna 

      posuere porttitor. Sed massa lorem, porta ut, eleifend id, placerat id, mauris. Duis 

      facilisis nisl. Nulla sagittis, sapien at convallis molestie, ligula felis viverra turpis, eu 

      malesuada nisl arcu a odio. Aliquam ac nibh. Quisque vehicula lorem eget tortor. Aenean 

      molestie, magna sed tristique iaculis, leo dolor iaculis ante, vitae hendrerit sapien 

      felis eget tellus. Morbi non turpis. Suspendisse vestibulum, ligula a porttitor placerat, 

      lectus sapien venenatis elit, nec aliquam nulla nunc in dolor. In non nisl. Mauris 

      semper, nisl non convallis aliquet, erat tellus rhoncus lacus, et consectetuer felis 

      velit vitae lectus.</p>

  </div>



  <div id="foot">@copy; My Site 2004</div>

</body>

</html>

The above is a nice starting template, it is a clean slate with only minor structural elements, and you can easily start working the CSS to get the desired template or style. This is how I start doing the layout for most of my sites. Once you have the layout done and tested you can then move on to chopping the page up into your template files, adding in the necessary meta information, along with working in your other style sheets as needed and what not.

Starting off your design using tables and not doing thing the CSS way from the beginning is just begging for some problems. If you start off correctly you will not have a hard time doing things the "right" way.

You might want to check out
http://www.bluerobot.com
http://www.glish.com/css
These sites have a good number of pre-packaged layouts, which can make things a whole lot easier when starting out.

(Edited by WarMage on 06-17-2004 16:25)

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Table hack to CSS

Insert Slimies »

Insert UBB Code »

Topic: Table hack to CSS $Pages that link to <a href="https://ozoneasylum.com/backlink?for=22213" title="Pages that link to Topic: Table hack to CSS" rel="nofollow" >Topic: Table hack to CSS\$