Hello everybody!
First off all: thank you for your reactions: it made me realize that
using tables for layout just complicated things... I've done some
reading this morning and decided to go with CSS.
I've included my test page below. It contains all test layouts I want
to create using my routine (WOOHOO!). I know it's rather long, but
please just copy-paste the code in a HTML editor and check it out.
You'll see that I've got some problems with implementing the last 3
layouts. Do any of you have any ideas of what could be wrong? Thx!
<!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">
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #CCCCCC;
}
..gridlightblue
{
background-color: #99CCCC;
border: 1px solid #666666;
font-size: 18px;
font-weight: bold;
color: #003366;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
}
..gridlightblue A
{
color: #003366;
text-decoration: none;
}
..griddarkblue {
text-align: center;
vertical-align: middle;
background-color: #003366;
border: 1px solid #666666;
font-size: 18px;
font-weight: bold;
color: #99CCCC;
margin:10px 0px 0px 10px;
float:left;
}
..griddarkblue A
{
color: #99CCCC;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">MNO</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">PQR</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">JKL</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:210px;height:145px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:210px;height:145px;"><a
href="#">DEF</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:300px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:300px;"><a
href="#">DEF</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:210px;height:300px;"><a
href="#">ABC</a></div>
</div>
<h1>TESTING...</h1>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:210px;height:145px;"><a
href="#">GHI</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:210px;height:145px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">GHI</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
<div class="griddarkblue" style="width:210px;height:93px;"><a
href="#">MNO</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:210px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">MNO</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:210px;height:93px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">MNO</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:300px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">GHI</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:300px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:196px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">MNO</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:210px;height:93px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:196px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
</div>
<h1>PROBLEMS...</h1>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:300px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:145px;"><a
href="#">GHI</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:300px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
</div>
<br>
<div class="gridlightblue" style="width:250px;height:320px;">
<div class="griddarkblue" style="width:210px;height:93px;"><a
href="#">ABC</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">DEF</a></div>
<div class="griddarkblue" style="width:100px;height:196px;"><a
href="#">GHI</a></div>
<div class="griddarkblue" style="width:100px;height:93px;"><a
href="#">JKL</a></div>
</div>
</body>
</html>
Kind regards,
Joris
Mark Parnell <we*******@clarkecomputers.com.au> wrote in message news:<1l*****************************@40tude.net>. ..
On Fri, 20 Aug 2004 09:44:59 +0800, SM <sm********@hotmail.com> declared
in alt.html,comp.infosystems.www.authoring.html:
Where can I learn to code tables like that?
Why would you want to? Tabular data is rarely that complicated.
http://www.allmyfaqs.com/faq.pl?Tableless_layouts