please help me convert table to CSS layout

jasonpc1 · 10-29-2010, 09:35 AM

I have this template that i have tried to convert but just can not get my head around css fully.

I tried to put a blue background and place two white div's, one left and right side. but all seem to go down the page and once i got the sizes right the blue colors all went. ?!

Here is the original code that i had, can anyone help out?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<table cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" width="1065">
  <tr>
    <td width="1061" valign="top" bgcolor="#0000FF" style="border-style: none; border-width: medium">

      <table cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0; width: 100%; height: 72px;">

        <tr>
          <td width="33%" class="headerimage"><p style="margin-left: 7"> <b><font face="Arial" size="5" color="#FFFFFF"></font></b>
		  </td>
          <td width="16%" class="headerimage">&nbsp;</td>
          <td width="51%" class="headerimage"><p align="center" style="margin-top: 0; margin-bottom: 0"><b><i><font face="Verdana" color="#FFFFFF">header text</font></i></b></p>
		  <p align="center" style="margin-top: 0; margin-bottom: 0"><b><i> <font face="Verdana" color="#FFFFFF">on the net!'</font></i></b>
		  </td>

        </tr>
      </table>

	 </td>
  </tr>
  <tr> 
    <td width="1061" style="border-style: none; border-width: medium" height="41">

      <table cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" width="100%">
        <tr> 
          <td class="topmenu"> 
            <b><font face="Arial" size="2" color="#FFFFFF">Button</font></b></td>

          <td class="topmenu"> 
            <b><font face="Arial" size="2" color="#FFFFFF">Button</font></b></td>
          <td class="topmenu"> 
            <b><font face="Arial" size="2" color="#FFFFFF">Button</font></b></td>
          <td class="topmenu"> 
            <b><font face="Arial" size="2" color="#FFFFFF">Button</font></b></td>
          <td class="topmenu"> 
            <b><font face="Arial" size="2" color="#FFFFFF">Button</font></b></td>
        </tr>

      </table>

	  </td>
  </tr>
  <tr> 
    <td width="1061" style="border-style: none; border-width: medium" valign="top">

      <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0">
        <tr> 
          <td width="210" valign="top" bgcolor="#003399" style="border-style: none; border-width: medium">
		  <p align="center">MENU<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

		  </td>
          <td width="634" style="border-style: none; border-width: medium" valign="top"> 
		  WELCOME
          </td>
          <td width="211" style="border-style: none; border-width: medium" bgcolor="#003399" valign="top">
		  <div align="center">right side<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
		  </td>
        </tr>
      </table>

	  </td>
  </tr>
  <tr> 
    <td width="1061" style="border-style: none; border-width: medium" height="45">

      <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0; height: 1px;" width="100%">
        <tr> 
          <td width="100%" style="border-style: none; border-width: medium; height: 3px;" valign="top" bgcolor="#FF0066">&nbsp;</td>
        </tr>
        <tr> 
          <td width="100%" height="18" style="border-style: none; border-width: medium" bgcolor="#003399">

		  <p align="center"><b><font face="Arial" size="1" color="#FFFFFF">footer.</font></b>
		  </td>
        </tr>
      </table>

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

</body>

</html>

cdorob · 10-29-2010, 01:17 PM

Well, it's a bit hard to help you with the code unless someone will make the layout for you. But you could have a look at Flexi CSS Layouts - a Dreamweaver Extension that help you create Css layouts in Dreamweaver without coding.

Major Payne · 10-30-2010, 06:55 AM

Might help...

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
Why tables for layout is stupid: http://www.hotdesign.com/seybold/
How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/co...-tables-to-css
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Ima...ysterious_Gaps