...

View Full Version : 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?



<!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 (http://www.extendstudio.com/product/tableless-css-layouts-for-dreamweaver.html) - 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/convert-your-html-tables-to-css
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum