How to convert template from table to div [closed]
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this questionI 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="site开发者_开发问答title"></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?
<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.)
replace 'table' 'tr' 'td' with div
set tr's width the same with table's width
加载中,请稍侯......
精彩评论