...
PDA

would appreciate it if someone could help convert tables to css

jasonpc1
09-13-2010, 08:12 PM
I have tried and keep deleting the file and starting again, i just can not get the background to be in the center or the header part inside the body box, just a complete mesh up on my part.

I found these templates a few years ago and would like to know how to convert this to css as it is all using tables which i do not want to use and i hear they are bad to use.


<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;">
</head>
<body>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="756" height="291" style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td width="134" height="1" bgcolor="#7E8079"><img src="images/spacer.gif" width="134" height="1" border="0"></td>
<td width="15" height="1"><img src="images/spacer.gif" width="15" height="1" border="0"></td>
<td width="44" height="1"><img src="images/spacer.gif" width="44" height="1" border="0"></td>
<td width="309" height="1"><img src="images/spacer.gif" width="309" height="1" border="0"></td>
<td width="142" height="1"><img src="images/spacer.gif" width="17" height="1" border="0"></td>
<td width="156" height="1"><img src="images/spacer.gif" width="121" height="1" border="0"></td>
</tr>

<tr>
<td colspan="3" bgcolor="#000018" background="images/back-navy.gif" width="193" height="119"><img name="index_r1_c1" src="images/index_r1_c1.gif" width="193" height="118" border="0"></td>
<td colspan="3" bgcolor="#000018" valign="top" background="images/back-navy.gif" width="577" height="119">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="98%" id="AutoNumber4">
<tr>
<td width="55%" style="border-style: none; border-width: medium">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="100%" id="AutoNumber5" height="119">
<tr>
<td width="100%" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom: medium none #111111" height="117">
<p style="margin-left: 14"><b> <font face="Verdana" size="6" color="#FFFFFF">Title</font></b></td>
</tr>
</table>
</td>
<td width="45%" style="border-style: none; border-width: medium">
<p align="center">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="6" bgcolor="#7E8079" width="770" height="19">
<p align="right" style="margin-right: 7">&nbsp;</td>
</tr>
<tr>
<td rowspan="2" bgcolor="#7E8079" valign="top" width="134" height="140">
<!--
<div align="center">
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="81%" id="AutoNumber1" height="133">
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17">
</td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#555652">
<p align="center"><b><font face="Verdana" size="2" color="#FFFFFF">Main
Menu</font></b></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
</table>
</center>
</div>
-->
</td>
<td align="left" valign="top" height="1" bgcolor="#DCDDDB" width="15"><img name="index_r3_c2" src="images/index_r3_c2.gif" width="15" height="18" border="0"></td>
<td colspan="2" bgcolor="#DCDDDB" valign="top" width="353" height="1">
<p style="margin-top: 0; margin-bottom: 0"></td>
<td align="right" valign="top" height="1" bgcolor="#DCDDDB" width="142"><img name="index_r3_c5" src="images/index_r3_c5.gif" width="17" height="18" border="0"></td>
<td rowspan="2" bgcolor="#7E8079" valign="top" height="140" width="156">



<!--
<div align="center" style="width: 156; height: 259">
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="90%" id="AutoNumber2" height="1">
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17">
</td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#555652">
<p align="center"><b><font face="Verdana" size="2" color="#FFFFFF">Link
/ News Box</font></b></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="17" bgcolor="#DCDDDB">
<p style="margin: 1 4"><font face="Verdana" size="2" color="#555652">
Your Link</font></td>
</tr>
</table>
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="89%" id="AutoNumber3">
<tr>
<td width="100%" style="border-style: none; border-width: medium" bgcolor="#555652">
<p align="center"><b><font face="Verdana" size="2" color="#FFFFFF">Text
Box</font></b></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" bgcolor="#DCDDDB">
<p style="margin-left: 4; margin-right: 4; margin-top: 1; margin-bottom: 4">
<font face="Verdana" size="1" color="#555652">Use this box to type any
specials, new updates or even gallery pics here.</font></td>
</tr>
</table>
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
</center>
</div>
-->


</td>
</tr>
<tr>
<td colspan="4" bgcolor="#DCDDDB" valign="top" width="510" height="246">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="100%" id="AutoNumber6">
<tr>
<td width="100%" style="border-style: none; border-width: medium">
<p align="center"><b><font face="Verdana" size="4" color="#333333">Welcome</font></b></td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium">
<p style="margin: 0 14; ">&nbsp;
<p style="margin: 0 14; ">&nbsp;
<p style="margin: 0 14; ">&nbsp;
<p style="margin: 0 14; ">Our site is in developement and will
be live shortly.<font face="Verdana" size="2" color="#333333">
</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="6" bgcolor="#7E8079" width="770" height="12">&nbsp;
</td>
</tr>
<tr>
<td colspan="6" bgcolor="#000018" background="images/back-navy.gif" width="770" height="12">
<p align="center" style="margin-top: 4; margin-bottom: 4">
<FONT
face=Verdana color=#FFFFFF size=1>footer</FONT></td>
</tr>
</table>
</center>
</div>
</body>
</html>
teedoff
09-14-2010, 01:29 AM
Maybe you should start with the basics and first figure out what style layout you want. It seems the particular layout could easily translate to a 5 div layout. By 5 divs I mean there are 4 distinct sections to the page layout.

wrapper: which wraps around the whole visible page
header: the top section, usually containing site logo and maybe navigations
main: the meat of the page which may contain paragraphs and heading tags
sidebar: optional div that could contain navigation ot local links
footer: which of course is the bottom section

Peronally, I think its almost easier to start with a fresh clean slate rather than try to convert a table layout to div layout.
Read some basic tutorials here (http://www.w3schools.com).
Doctor_Varney
09-14-2010, 02:04 AM
^ Agreed. Because of some very fundamental differences between tables and div layouts, you will be much better off starting from scratch.

First, you'll need to make an image of your intended layout, preferably with Photoshop. From there, you can make important decisions about how the div system is going to actually work.

Try not to design something that will give you massive headaches, but there's no reason not to set yourself challenges. Progessive challenges improve your game but headaches just hurt and can discourage you.

Remember that divs are not like table cells. They won't necessarily grid up in natural rows and columns like you've come to expect of tables, unless you tell them to - yet they do offer infinitely more possibilities.

A good tip when you're learning is to make a black and white version of your Photoshop layout and set that into your body background, as a guide. Then colour-code the backgrounds of your divs to help you see them during the positioning stage. You can also take precise measurements in Photoshop, either with the measure tool or by making slices to determine margins and widths. Slices can have many uses, apart from image-slicing.

Remember though - the key to web-designing is flexibilty. Always design so that things can move around a little, without breaking up your layout, ruining your careful design. Ideally, you want to plan for a number of possible changes which can occur when people view your page in different browsers, at different screen resolutions and with different text zoom sizes.

Learning the CSS Box Model is really the most important step in getting to grips with CSS. Once you have that, you're on the road to success. I've still got a lot to learn myself.

Read as many tutorials as you can, starting with the one teedoff has linked.

And good luck!

Dr. V
optimus203
09-14-2010, 02:35 AM
This was done really quickly, and far from perfect. But it might help get you on your way...


<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;">
</head>

<body>

<div id="wrapper" style="width:800px; margin:0 auto; background-color:#7E8079;">
<div id="header" style="height:120px;">
<div style="float:left; width:195px;"><img name="index_r1_c1" src="images/index_r1_c1.gif" width="195" height="118" border="0"></div>
<div style="color:#000; width:605px; float:left;">Title</div>
</div>

<div id="content">
<div id="sidebar-left" style="width:120px; background-color:#DCDDDB; margin:0 10px; float:left; display:inline;">
<p style="text-align:center; background-color:#FF9;">Main Menu</p>
<ul style="text-decoration:none; list-style-type:none; margin:0; padding-left:5px;">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>

<div id="content-center" style="width:520px; padding:0 10px; float:left; display:inline; background-color:#DCDDDB;">
<h1 style="text-align:center;">Welcome</h1>
<p>Our site is in developement and will be live shortly.<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
</div>

<div id="sidebar-right" style="width:120px; background-color:#DCDDDB; margin:0 10px; float:left; display:inline;">
<p style="text-align:center; background-color:#FF9;">Link / News Box</p>
<ul style="text-decoration:none; list-style-type:none; margin:0; padding-left:5px;">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>

<p style="text-align:center; background-color:#FF9;">Text Box</p>
<p>Text text text text...</p>
</div>
</div>

<br clear="all">
<div id="footer">
<p>Footer content</p>
</div>

</div>

</body>
</html>
jasonpc1
09-14-2010, 07:18 PM
Thank you for your help, this has helps me on my way to getting the same sort of look as the original template i had.

cheers

This was done really quickly, and far from perfect. But it might help get you on your way...


<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;">
</head>

<body>

<div id="wrapper" style="width:800px; margin:0 auto; background-color:#7E8079;">
<div id="header" style="height:120px;">
<div style="float:left; width:195px;"><img name="index_r1_c1" src="images/index_r1_c1.gif" width="195" height="118" border="0"></div>
<div style="color:#000; width:605px; float:left;">Title</div>
</div>

<div id="content">
<div id="sidebar-left" style="width:120px; background-color:#DCDDDB; margin:0 10px; float:left; display:inline;">
<p style="text-align:center; background-color:#FF9;">Main Menu</p>
<ul style="text-decoration:none; list-style-type:none; margin:0; padding-left:5px;">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>

<div id="content-center" style="width:520px; padding:0 10px; float:left; display:inline; background-color:#DCDDDB;">
<h1 style="text-align:center;">Welcome</h1>
<p>Our site is in developement and will be live shortly.<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
</div>

<div id="sidebar-right" style="width:120px; background-color:#DCDDDB; margin:0 10px; float:left; display:inline;">
<p style="text-align:center; background-color:#FF9;">Link / News Box</p>
<ul style="text-decoration:none; list-style-type:none; margin:0; padding-left:5px;">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>

<p style="text-align:center; background-color:#FF9;">Text Box</p>
<p>Text text text text...</p>
</div>
</div>

<br clear="all">
<div id="footer">
<p>Footer content</p>
</div>

</div>

</body>
</html>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum