Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    please help me convert table to CSS layout

    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>

  • #2
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    851
    Thanks
    11
    Thanked 79 Times in 77 Posts
    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
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •