Menu
Community /Pin to ProfileBookmark
@NogDogSep 19.2005 — #I might approach it something like this:
@NogDogSep 19.2005 — #
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.
convert tables to CSS
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?
[url]http://www.gordonengraving.co.uk
Sign in
to post a comment6 Comments(s) ↴
0
@NogDogSep 19.2005 — #I might approach it something like this:[code=html]
<!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:[email protected]">[email protected]</a>
</p>
</div>
<div class="clear"></div>
</div> <!-- contact -->
<p>...rest of page...</p>
</body>
</html>
[/code]0
@NogDogSep 19.2005 — #So the contact details are floating on the left.
How do you determine the positioning of the right hand paragraph or images for example?[/QUOTE]
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.