I have tried in weeks to convert this template:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<?php echo head();?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body leftmargin="10" topmargin="10" marginwidth="10" marginheight="10" class="background"<?php echo onload();?>>
<a name="top"></a>
<table border="0" align="center" cellpadding="7" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td><table class="main" align="center" width="755" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="header"colspan="2"><div class="sitetitle"></div></td>
</tr>
<tr>
<td valign="top" width="220"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table class="navigation" align="left" width="170" border="0" cellpadding="5" cellspacing="0">
<tr>
<td></td>
</tr>
<tr>
<td valign="top"> <?php echo toc();?> </td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo sitemaplink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo printlink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo mailformlink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo guestbooklink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo languagemenu();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo loginlink();?></p></td>
</tr>
<tr>
<td valign="top" class="menu"><p><?php echo lastupdate();?></p></td>
</tr>
<tr>
<td class="eckenaviunten"></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td class="searchbox"><?php echo searchbox();?></td>
</tr>
</table></td>
</tr>
</table></td>
<td valign="top" width="550"> <table width="550" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="locator"><?php echo locator();?></div></td>
</tr>
</table>
<table align="center" width="550" border="0" cellpadding="5" cellspacing="0">
<tr>
<td class="eckeoben"></td>
</tr>
<tr>
<td class="content" valign="top"> <?php echo editmenu();?> <?php echo content();?>
<?php echo submenu();?></td>
</tr>
<tr>
<td class="eckeunten"></td>
</tr>
</table>
<br>
<br>
</td>
</tr>
<tr>
<td class="endline" colspan="2"><div align="center"><?php echo footer();?></div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
The CSS is:
.codeview {
background-color: #CCCCCC;
border: 1px solid #999999;
}
BODY,TD{
font-family:Verdana, Geneva, Arial, Helvetica;
font-size:8pt;
color:#000000;
}
H1,H2,H3{
font-size:13pt;
font-weight:bold;
margin-bottom:6px;
font-family: Arial, Helvetica, sans-serif;
}
H4{
font-size:11px;
font-family: Arial, Helvetica, sans-serif;
background-image: url(images/infotable.png);
border: 1px solid #003399;
padding: 2px 4px;
font-weight: bold;
color: #003399;
}
ul.menulevel1,ul.menulevel2,ul.menulevel3,ul.sitemaplevel1,ul.sitemaplevel2,ul.sitemaplevel3,ul.submenu,ul.search{padding-left: 0;margin-left: 0;list-style: none;}
form{margin:0;}
IMG{border:0;}
li{line-height:1.5;}
.doc{padding-left: 15px;background-image: url(menu/doc.gif);background-repeat: no-repeat;}
.docs{padding-left:15px;background-image: url(menu/docs.gif);background-repeat:no-repeat;}
.sdoc{padding-left: 15px;background-image: url(menu/sdoc.gif);background-repeat: no-repeat;}
.sdocs{padding-left: 15px;background-image: url(menu/sdocs.gif);background-repeat: no-repeat;}
.sitemaplevel1 .doc{padding-left: 15px;background-image: url(menu2/doc.gif);background-repeat: no-repeat;}
.sitemaplevel1 .docs{padding-left:15px;background-image: url(menu2/docs.gif);background-repeat:no-repeat;}
.sitemaplevel1 .sdoc{padding-left: 15px;background-image: url(menu2/sdoc.gif);background-repeat: no-repeat;}
.sitemaplevel1 .sdocs{padding-left: 15px;background-image: url(menu2/sdocs.gif);background-repeat: no-repeat;}
.submenu .doc{padding-left: 15px;background-image: url(menu2/doc.gif);background-repeat: no-repeat;}
.submenu .docs{padding-left:15px;background-image: url(menu2/docs.gif);background-repeat:no-repeat;}
.submenu .sdoc{padding-left: 15px;background-image: url(menu2/sdoc.gif);background-repeat: no-repeat;}
.submenu .sdocs{padding-left: 15px;background-image: url(menu2/sdocs.gif);background-repeat: no-repeat;}
.search .doc{padding-left: 15px;background-image: url(menu2/doc.gif);background-repeat: no-repeat;}
.search .docs{padding-left:15px;background-image: url(menu2/docs.gif);background-repeat:no-repeat;}
.search .sdoc{padding-left: 15px;background-image: url(menu2/sdoc.gif);background-repeat: no-repeat;}
.search .sdocs{padding-left: 15px;background-image: url(menu2/sdocs.gif);background-repeat: no-repeat;}
a{text-decoration:none;font-weight:bold;}
a:link,a:visited{color:#1B366C;}
a:active,a:hover{color:#728DC3;}
.sitename{font-weight:normal;font-size:20pt;}
.menulevel1{font-size:8pt;color:#FCDE1C;}
.menulevel1 a{font-weight:normal;color:#FFFFFF;}
.menulevel1 a:link,.menulevel1 a:visited{color:#FFFFFF;}
.menulevel1 a:active,.menulevel1 a:hover{color:#FCDE1C;}
.sitemaplevel1,.sitemaplevel2,.sitemaplevel3{font-size:9pt;}
.sitemaplevel1 a,.sitemaplevel2 a,.sitemaplevel3 a{font-weight:normal;color:black;}
.sitemaplevel1 a:link,.sitemaplevel2 a:link,.sitemaplevel3 a:link,.sitemaplevel1 a:visited,.sitemaplevel2 a:visited,.sitemaplevel3 a:visited{color:black;}
.sitemaplevel1 a:active,.sitemaplevel2 a:active,.sitemaplevel3 a:active,.sitemaplevel1 a:hover,.sitemaplevel2 a:hover,.sitemaplevel3 a:hover{color:black;}
.submenu{
font-size:8pt;
color: #FFFFFF;
}
.submenu a{font-weight:normal;color:black;}
.submenu a:link,.submenu a:visited{color:black;}
.submenu a:active,.submenu a:hover{color:#1B366C;}
.search a{font-weight:normal;color:black;}
.search a:link,.search a:visited{color:black;}
.search a:active,.search a:hover{color:black;}
.locator{
font-size:8pt;
color:white;
margin-bottom: 13px;
background-image: url(images/pageico.png);
background-repeat: no-repeat;
text-indent: 20px;
height: 19px;
padding-top: 3px;
}
.locator a{font-weight:normal;text-decoration:underline}
.locator a:link,.locator a:visited,.locator a:active,.locator a:hover{color:white;}
.menu{font-weight:normal;font-size:7pt;color:white;}
.menu a{
color:white;
font-size: 7pt;
font-weight: normal;
text-decoration: underline;
}
.menu a:link,.menu a:visited,.menu a:active,.menu a:hover{color:white;}
.login{font-weight:bold;font-size:8pt;color:grey;}
.login a,.login a:link,.login a:visited,.login a:active,.login a:hover{color:gray;}
.navigator{font-weight:bold;font-size:10pt;color:white;}
.navigator a:link,.navigator a:visited{color:#c0c0c0;}
.navigator a:active,.navigator a:hover{color:white;}
.edit{
font-size:8pt;
color:black;
background-color:#FFFFFF;
background-image: url(images/edit.jpg);
background-repeat: no-repeat;
}
.edit a:link,.edit a:visited,.edit a:active,.edit a:hover{font-weight:normal;color:black;}
input,select{font-size:8pt;}
textarea{font-family:Verdana,Geneva,Arial,Helvetica;font-size:8pt;background-color:white;width:98%;}
.searchbox .text,.searchbox .submit{border:2px solid #c0c0c0;background-color:white;}
.background {
background-color: #FFFFFF;
background-image: url(images/cmsimpledebg.png);
background-attachment: fixed;
}
.main {
background-image: url(images/center.png);
border-bottom: 2px solid #103482;
}
.eckeoben {
background-color: #FFFFFF;
background-image: url(images/eckeoben.png);
background-repeat: no-repeat;
background-position: left;
height: 17px;
}
.eckeunten {
background-color: #FFFFFF;
background-image: url(images/eckeunten.png);
background-repeat: no-repeat;
background-position: left;
height: 17px;
}
.content {
background-color: #FFFFFF;
padding-left: 20px;
padding-right: 20px;
}
.eckenavioben {
background-color: #3C5A99;
background-image: url(images/eckenavioben.png);
background-repeat: no-repeat;
background-position: right;
height: 17px;
}
.eckenaviunten {
background-color: #3C5A99;
background-image: url(images/eckenaviunten.png);
background-repeat: no-repeat;
background-position: right;
height: 17px;
}
.navigation {
background-color: #3C5A99;
padding-left: 5px;
background-image: url(images/navigation.png);
background-repeat: no-repeat;
}
.searchbox .text {
border: 1px solid #D5DDED;
color: #FFFFFF;
background-image: url(images/textfield.png);
text-indent: 2px;
}
.searchbox .submit {
border: 1px solid #103482;
color: #FFFFFF;
background-image: url(images/submit.png);
}
.header {
background-image: url(images/header.png);
background-repeat: no-repeat;
height: 180px;
}
.endline {
background-color: #BAD5FF;
padding-top: 2px;
padding-bottom: 2px;
}
.sitetitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #008040;
text-align: left;
position: relative;
padding-left: 220px;
}
.borderheadline {
background-image: url(images/boderheadline.png);
}
.infotable {
background-color: #CCCCCC;
background-image: url(images/infotable.png);
background-repeat: repeat-x;
border: 1px solid #003399;
}
.codeview {
background-color: #CCCCCC;
padding: 3px;
border: 1px solid #999999;
width: 100%;
overflow: auto;
}
.warning {
color: #FF0000;
background-image: url(images/ausrufezeichen.png);
text-indent: 30px;
height: 35px;
background-repeat: no-repeat;
font-weight: bold;
padding-top: 10px;
}
Do you know a good tutorial on how to convert it from table to div?
Edit:
The template and screenshot of it can be found at: http://www.cmsimple-styles.com/cmsimplestyles/en/?Templates:Template_Downloads__1. The temple is called “cmsimple de”. It’s a little down the page 🙂
The CSS display property could help here?
It probably isn’t the best way – is still is table design – but it should work reliably and all from css. (Never tried this personally, so not sure what other properties you’ll need to set.)