PDA

Click to See Complete Forum and Search --> : convert tables to CSS

chesswill
09-19-2005, 07:12 AM
I have used tables on my website to lay out the images and some css for font etc. I have read often on webdeveloper that its not best practice to use tables for doing this and so I would like to convert my tables to css. Could someone please get me started?

http://www.gordonengraving.co.uk
KDLA
09-19-2005, 09:06 AM
Give this a try:
http://www.w3schools.com/css/default.asp

Your site is pretty basic. It shouldn't be that hard to convert to CSS.

The hardest part is recovering from "box layout syndrome" and getting used to the design freedom css allows.

KDLA
NogDog
09-19-2005, 09:32 AM
I might approach it something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<link type="text/css" rel="stylesheet" href="http://www.gordonengraving.co.uk/style.css">
<style type="text/css">
<!--
#contact {
margin: 1em 0;
padding: 0.5em 0 1em 0;
border-top: solid 2px silver;
border-bottom: solid 2px silver;
}
.address {
float: left;
margin-right: 3em;
}
.clear {
margin: 0;
padding: 0;
font-size: 1px;
line-height: 1px;
clear: both;
height: 1px;
}
#contact h5 {
margin-top: 0;
}
-->
</style>
</head>
<body>
<p>...start of page...</p>
<div id="contact">
<h4>Contact Details</h4>
<div class="address">
<h5>Address:</h5>
<p>Gordon Engraving Ltd<br>
Roper Road, Roper Close<br>
CANTERBURY<br>
Kent, CT2 7EP<br>
U.K.</p>
</div>
<div class="address">
<h5>Electronic:</h5>
<p>Tel: 01227 766229</p>
<p>Fax: 01227 762264</p>
<p>Email:
<a href="mailto:gordon-engraving@lineone.net">gordon-engraving@lineone.net</a>
</p>
</div>
<div class="clear"></div>
</div> <!-- contact -->
<p>...rest of page...</p>
</body>
</html>
chesswill
09-19-2005, 10:44 AM
So the contact details are floating on the left.

How do you determine the positioning of the right hand paragraph or images for example?
Fang
09-19-2005, 11:38 AM
More fun with an address:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>address</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
dl {
margin:auto;
overflow: auto;width:80%;
border-top:solid 2px #ccc;
border-bottom:solid 2px #ccc;
padding:1em 0;
}
dt {font-weight:bold;}
dd {float:left;}
-->
</style>

</head>
<body>
<dl>
<dt>Contact Details</dt>
<dd>
<address>Gordon Engraving Ltd<br>Roper Road, Roper Close<br>CANTERBURY<br>Kent, CT2 7EP<br>U.K.</address>
</dd>
<dd>Tel: 01227 766229<br>Fax:01227 762264<br>Email: <a href="mailto:gordon-engraving@lineone.net">gordon-engraving@lineone.net</a></dd>
</dl>
<p>more content ...</p>
</body>
</html>
NogDog
09-19-2005, 02:54 PM
So the contact details are floating on the left.

How do you determine the positioning of the right hand paragraph or images for example?
In my example I used the margin-right value of the floated elements to separate one from the next. You could assigned fixed widths to those elements if you wanted more control on their exact locations, and/or you could also adjust the margin-left (and top or bottom) for further positioning tweaks.
Jona
09-19-2005, 02:58 PM
I think there is some explanation necessary, but I haven’t the time at this very moment. However, I did put the following .zip file together so you can see how it’s done in CSS. At least, how I would do it. Notice the appropriate use of HTML elements such as ADDRESS, UL, and DL.