How to convert template from table to div


Tags: php,css,table,html

Problem :

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>&nbsp;</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 guys 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 :)



Solution :

The CSS display property could help here?

<table> --> #topdiv { display:table; }
<tr> --> .row { display:table-row; }
<td> --> .cell { display:table-cell; }

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.)


    CSS Howto..

    how to show product info after image in bigger zoom levels

    How to do valid CSS for li text and li text with image?

    How to change the color of the active link in the menu

    How to write page specific CSS in backbone js

    how to add a CSS class inside a JavaScript setup code?

    How to load all CSS and JS from one html file?

    CSS - How to remove unwanted margin between elements?

    How to add TITLE and ALT to an background image (CSS Sprites)?

    How do I access font features in CSS?

    How to code html mailings?

    How to shift the alignment of text in a select dropdown toward the top and left with CSS?

    showing element out of scroll area

    how to DRY up (remove redundancy) from this css class selector declaration?

    How to make the main content div fill height of screen with css [duplicate]

    How can I change the content of