如何将模板从表转换为div

时间：2011-05-01 07:15:00

标签： php css html-table

我已经在几周内尝试转换此模板：

<!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>

CSS是：

.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;
}

你知道如何将它从表转换为div的好教程吗？

修改

可以在http://www.cmsimple-styles.com/cmsimplestyles/en/?Templates:Template_Downloads__1找到它的模板和屏幕截图。这座寺庙被称为“cmsimple de”。它有一点在页面上：）

2 个答案:

答案 0 :(得分：0)

用div

替换'table''tr''td'

设置tr的宽度与表格的宽度相同

答案 1 :(得分：0)

CSS显示属性可以在这里提供帮助吗？

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

它可能不是最好的方式 - 仍然是桌面设计 - 但它应该可靠地运行并且全部来自css。 （从未尝试过这个，所以不确定你需要设置哪些其他属性。）

相关问题
最新问题