php - How to convert template from table to div -
i have tried in weeks convert 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 guys know tutorial on how convert table div?
edit:
the template , screenshot of can found at: http://www.cmsimple-styles.com/cmsimplestyles/en/?templates:template_downloads__1. temple called "cmsimple de". it's little down page :)
the css display property here?
<table> --> #topdiv { display:table; } <tr> --> .row { display:table-row; } <td> --> .cell { display:table-cell; } it isn't best way - still table design - should work reliably , css. (never tried personally, not sure other properties you'll need set.)
Comments
Post a Comment