Цей сайт найкраще переглядати в сучасному браузері з включеним JavaScript.

Допоможіть переробити шаблон з Table в div-и

Marchello

Потрібна допомога в переробці шаблону Joomla 1.5 bt travelin. Я поможливості перевів частину сам, а ось зрештою не получається перевести table в div-и. Можливо хтось з таким стикався, може щось пыдказати. Ось PHP код:

<?php

defined( '_JEXEC' ) or die( 'Restricted access' );

$dir = dirname(__FILE__);

require($dir . '/config.php');

require($dir . '/template.inc.php');

$tpl = new TplBtTravelIn();

$cmenu_css = $tpl->show_menu ? '<link href="' . $tpl->path . '/css/cmenu.css" rel="stylesheet" type="text/css" />' . "\n" : '';

$cmenu_js = $tpl->show_menu ? '<script type="text/javascript" src="' . $tpl->path . '/js/cmenu.js"></script>' . "\n" : '';

$ddp2_width = $tpl->width - 64;

echo <<<EOF

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$this->language}" lang="{$this->language}" >

<head>

<jdoc:include type="head" />

<style type="text/css">

.ddp2_content { width: {$ddp2_width}px; }

</style>

<link href="{$tpl->path}/css/layout.css" rel="stylesheet" type="text/css" />

<link href="{$tpl->path}/css/template.css" rel="stylesheet" type="text/css" />

$cmenu_css

<!--[if lt IE 7]>

<link href="{$tpl->path}/css/template_ie6.css" rel="stylesheet" type="text/css" />

<![endif]-->

</head>

<body>

$aa

EOF;

if ($tpl->seocp) {

echo '	<div style="display:none"><div id="mainbody">' . "\n";

echo '		<jdoc:include type="component" />' . "\n";

echo '	</div></div>' . "\n";

}

echo '<div align="center">' . "\n";

echo '<table cellspacing="0" cellpadding="0" width="' . $tpl->width . '" style="text-align:left">' . "\n";

echo '	<tr>' . "\n";

echo '		<td id="r1lb" valign="top" rowspan="2"><img src="' . $tpl->path . '/images/layout/r1l.gif" alt="" /></td>' . "\n";

echo '		<td id="top" valign="top">' . "\n";

echo '			<div id="top_r1_over"></div>' . "\n";

echo '			<div id="top_r1">' . "\n";

$tpl->echo_positions('', 'top', 'toolbar');

echo '			</div>' . "\n";

echo '			<div id="top_r2_over"></div>' . "\n";

echo '			<div id="top_r2">' . "\n";

$tpl->echo_positions('', 'icon', 'inset');

echo '			</div>' . "\n";

echo '			<div id="top_r3_over"></div>' . "\n";

echo '			<div id="top_r3">' . "\n";

echo '				<div cellspacing="0" cellpadding="0" width="100%">' . "\n";

if ($tpl->show_menu) {

echo <<<EOF

						<div id="cmenu">

							<table cellspacing="0" cellpadding="0">

								<tr>
EOF;

for ($i = 0, $len = count($tpl->menu_head_tags); $i < $len; $i++) {

	$mi = &$tpl->menu_head_tags[$i];

	printf(

'										<td class="cmenu_hd_gap"></td>

									<td class="%s">&nbsp;</td>

									<td class="%s" id="%s">%s</td>

									<td class="%s">&nbsp;</td>

',

		$mi->selection == 0 ? 'cmenu_hd_norm_left' : 'cmenu_hd_sel_left',

		$mi->selection == 0 ? 'cmenu_hd_norm_body' : 'cmenu_hd_sel_body',

		$mi->head_id,

		$mi->full_link,

		$mi->selection == 0 ? 'cmenu_hd_norm_right' : 'cmenu_hd_sel_right'

	);

}

echo '										<td class="cmenu_hd_gap"></td>' . "\n";

echo <<<EOF

								</tr>

							</table>

						</div>

EOF;

}

else {

$tpl->echo_position('header');

}

echo '				</div>' . "\n";

echo '			</div>' . "\n";

echo '		</td>' . "\n";

echo '		<td id="r1rb" valign="top" rowspan="2"><img src="' . $tpl->path . '/images/layout/r1r.gif" alt="" /></td>' . "\n";

echo '	</tr>' . "\n";

echo '	<tr>' . "\n";

echo '		<td id="r1body" valign="top">' . "\n";

$tpl->echo_positions('', 'advert1', 'advert2', 'advert3');

// output main body area

$col_span = 0;

if ($tpl->modcount('left'))

$col_span += 2;

if ($tpl->modcount('right'))

$col_span += 2;

$col_span = $col_span == 0 ? '' : ' colspan="' . ($col_span + 1) . '"';

echo '<table cellspacing="0" cellpadding="0" width="100%">' . "\n";

echo '	<tr>' . "\n";

echo '		<td id="main_path_l"></td>' . "\n";

echo '		<td id="main_path_c"' . $col_span . '>' . "\n";

echo '			<img src="' . $tpl->path . '/images/layout/pathway.gif" alt="" border="0" style="float:left" />' . "\n";

echo '			&nbsp; <span id="pathway_start">' . JText::_('') . '</span>&nbsp;' . "\n";

echo '			<span id="pathway">' . "\n";

echo '				<jdoc:include type="modules" name="breadcrumb" />' . "\n";

echo '			</span>' . "\n";

echo '		</td>' . "\n";

echo '		<td id="main_path_r"></td>' . "\n";

echo '	</tr>' . "\n";

// output top row of main body

echo '	<tr>' . "\n";

if ($tpl->modcount('left')) {

echo '		<td id="main_left_tl"><img src="' . $tpl->path . '/images/layout/main_left_tl.gif" alt="" /></td>' . "\n";

echo '		<td id="main_left_tc"></td>' . "\n";

echo '		<td id="main_left_tr"><img src="' . $tpl->path . '/images/layout/main_left_tr.gif" alt="" /></td>' . "\n";

}

else {

echo '		<td id="main_body_tl"><img src="' . $tpl->path . '/images/layout/main_body_tl.gif" alt="" /></td>' . "\n";

}

echo '		<td id="main_body_tc"></td>' . "\n";

if ($tpl->modcount('right')) {

echo '		<td id="main_right_tl"><img src="' . $tpl->path . '/images/layout/main_right_tl.gif" alt="" /></td>' . "\n";

echo '		<td id="main_right_tc"></td>' . "\n";

echo '		<td id="main_right_tr"><img src="' . $tpl->path . '/images/layout/main_right_tr.gif" alt="" /></td>' . "\n";

}

else {

echo '		<td id="main_body_tr"><img src="' . $tpl->path . '/images/layout/main_body_tr.gif" alt="" /></td>' . "\n";

}

echo '	</tr>' . "\n";

// output middle row of main body

echo '	<tr>' . "\n";

if ($tpl->modcount('left')) {

echo '		<td id="main_left_ml"></td>' . "\n";

echo '		<td id="main_left_mc" valign="top">' . "\n";

$tpl->echo_position('left');

echo '		</td>' . "\n";

echo '		<td id="main_left_mr"></td>' . "\n";

}

else {

echo '		<td id="main_body_ml"></td>' . "\n";

}

echo '		<td id="main_body_mc" valign="top">' . "\n";

// output position newsflash

if ($tpl->modcount('newsflash')) {

$tpl->echo_position('newsflash');

echo '			<div class="gap"></div>' . "\n";

}

// output main body

if ($tpl->seocp)

echo '		<div id="mainbody_area"></div>' . "\n";

else

echo '		<jdoc:include type="component" />' . "\n";

// output position banner

if ($tpl->modcount('banner')) {

echo '			<div class="gap"></div>' . "\n";

$tpl->echo_position('banner');

}

echo '		</td>' . "\n";

if ($tpl->modcount('right')) {

echo '		<td id="main_right_ml"></td>' . "\n";

echo '		<td id="main_right_mc" valign="top">' . "\n";

$tpl->echo_position('right');

echo '		</td>' . "\n";

echo '		<td id="main_right_mr"></td>' . "\n";

}

else {

echo '		<td id="main_body_mr"></td>' . "\n";

}

echo '	</tr>' . "\n";

// output bottom row of main body

echo '	<tr>' . "\n";

if ($tpl->modcount('left')) {

echo '		<td id="main_left_bl"></td>' . "\n";

echo '		<td id="main_left_bc"></td>' . "\n";

echo '		<td id="main_left_br"></td>' . "\n";

}

else {

echo '		<td id="main_body_bl"></td>' . "\n";

}

echo '		<td id="main_body_bc"></td>' . "\n";

if ($tpl->modcount('right')) {

echo '		<td id="main_right_bl"></td>' . "\n";

echo '		<td id="main_right_bc"></td>' . "\n";

echo '		<td id="main_right_br"></td>' . "\n";

}

else {

echo '		<td id="main_body_br"></td>' . "\n";

}

echo '	</tr>' . "\n";

echo '</table>' . "\n";

if ($tpl->modcount('user1') || $tpl->modcount('user2') || $tpl->modcount('user3')) {

echo '			<div class="gap"></div>' . "\n";

$tpl->echo_positions('', 'user1', 'user2', 'user3');

}

if ($tpl->modcount('user4') || $tpl->modcount('user5') || $tpl->modcount('user6')) {

echo '			<div class="gap"></div>' . "\n";

echo '			<table cellspacing="0" cellpadding="0" width="100%">' . "\n";

echo '				<tr>' . "\n";

echo '					<td id="blue_tl"></td>' . "\n";

echo '					<td id="blue_tc"></td>' . "\n";

echo '					<td id="blue_tr"></td>' . "\n";

echo '				</tr>' . "\n";

echo '				<tr>' . "\n";

echo '					<td id="blue_ml"></td>' . "\n";

echo '					<td id="blue_mc">' . "\n";

$tpl->echo_positions('', 'user4', 'user5', 'user6');

echo '					</td>' . "\n";

echo '					<td id="blue_mr"></td>' . "\n";

echo '				</tr>' . "\n";

echo '				<tr>' . "\n";

echo '					<td id="blue_bl"></td>' . "\n";

echo '					<td id="blue_bc"></td>' . "\n";

echo '					<td id="blue_br"></td>' . "\n";

echo '				</tr>' . "\n";

echo '			</table>' . "\n";

}

echo '		</td>' . "\n";

echo '	</tr>' . "\n";

echo '	<tr>' . "\n";

echo '		<td id="r2l"></td>' . "\n";

echo '		<td id="r2c"></td>' . "\n";

echo '		<td id="r2r"></td>' . "\n";

echo '	</tr>' . "\n";

echo '	<tr>' . "\n";

echo '		<td id="r2lb"></td>' . "\n";

echo '		<td id="r2body" valign="top">' . "\n";

$tpl->echo_positions('', 'user7', 'user8', 'user9');

echo '		</td>' . "\n";

echo '		<td id="r2rb"></td>' . "\n";

echo '	</tr>' . "\n";

echo '	<tr>' . "\n";

echo '		<td id="r3l"></td>' . "\n";

echo '		<td id="r3c"></td>' . "\n";

echo '		<td id="r3r"></td>' . "\n";

echo '	</tr>' . "\n";

echo '	<tr>' . "\n";

echo '		<td id="r3lb"></td>' . "\n";

echo '		<td id="r3body" valign="top">' . "\n";

$tpl->echo_positions('', 'bottom', 'footer');

echo '		</td>' . "\n";

echo '		<td id="r3rb"></td>' . "\n";

echo '	</tr>' . "\n";

echo '	<tr>' . "\n";

echo '		<td id="r4l"></td>' . "\n";

echo '		<td id="r4c"></td>' . "\n";

echo '		<td id="r4r"></td>' . "\n";

echo '	</tr>' . "\n";

echo '	<tr>' . "\n";

echo '		<td></td>' . "\n";

echo '		<td id="r5c" align="center" valign="top">' . "\n";

echo '		</td>' . "\n";

echo '		<td></td>' . "\n";

echo '	</tr>' . "\n";

echo '</table>' . "\n";

echo '</div>' . "\n";

echo <<<EOF

</body>

</html>

EOF;

?>

код CSS

/**
 * Layout CSS for the BonusThemes.com Travel In Template
 *
 * @package bt_travelin
 * @version 1.0
 * @copyright BonusThemes.com 2008
 * @link http://www.bonusthemes.com/goto/bt_travelin
 */

* {
	margin: 0;
	padding: 0;
}

html {
	margin-bottom: 1px;
	height: 100% !important;
	height: auto;
}

body {
	height: 100%;
	background: #eaf4fb url(../images/layout/back.gif) repeat-x top left;
}

.gap {
	width: 10px;
	height: 10px;
	overflow: hidden;
}

#spacer1, #spacer2, #spacer3, #spacer4, #spacer5, #spacer6, #spacer7 {
	height: 20px;
	overflow: hidden;
}

#top {
	height: 210px;
	overflow: hidden;
	background: #fff url(../images/layout/top_back.gif) repeat-x top left;
}

#top_r1_over {
	height: 10px;
	overflow: hidden;
}
#top_r1 {
	height: 30px;
	overflow: hidden;
}
#top_r2_over {
	height: 25px;
	overflow: hidden;
}
#top_r2 {
	height: 70px;
	overflow: hidden;
}
#top_r3_over {
	height: 10px;
	overflow: hidden;
}
#top_r3 {
	height: 51px;
	overflow: hidden;
}


#r1lb {
	width: 32px;
	overflow: hidden;
	background: url(../images/layout/r1lb.gif) repeat-y top left;
}

#r1rb {
	width: 32px;
	overflow: hidden;
	background: url(../images/layout/r1rb.gif) repeat-y top left;
}

#r1body {
	background-color: #fff;
}

#r2l {
	height: 16px;
	overflow: hidden;
	background: url(../images/layout/r2l.gif) no-repeat top left;
}
#r2c {
	height: 16px;
	overflow: hidden;
	background: url(../images/layout/r2c.gif) repeat-x top left;
}
#r2r {
	height: 16px;
	overflow: hidden;
	background: url(../images/layout/r2r.gif) no-repeat top left;
}

#r2lb {
	width: 32px;
	overflow: hidden;
	background: url(../images/layout/r2lb.gif) repeat-y top left;
}
#r2body {
	background-color: #34b4e6;
}
#r2rb {
	width: 32px;
	overflow: hidden;
	background: url(../images/layout/r2rb.gif) repeat-y top left;
}

#r3l {
	height: 17px;
	overflow: hidden;
	background: url(../images/layout/r3l.gif) no-repeat top left;
}
#r3c {
	height: 17px;
	overflow: hidden;
	background: url(../images/layout/r3c.gif) repeat-x top left;
}
#r3r {
	height: 17px;
	overflow: hidden;
	background: url(../images/layout/r3r.gif) no-repeat top left;
}

#r3lb {
	width: 32px;
	overflow: hidden;
	background: url(../images/layout/r3lb.gif) repeat-y top left;
}
#r3body {
	background-color: #258fcd;
}
#r3rb {
	width: 32px;
	overflow: hidden;
	background: url(../images/layout/r3rb.gif) repeat-y top left;
}

#r4l {
	height: 27px;
	overflow: hidden;
	background: url(../images/layout/r4l.gif) no-repeat top left;
}
#r4c {
	height: 27px;
	overflow: hidden;
	background: url(../images/layout/r4c.gif) repeat-x top left;
}
#r4r {
	height: 27px;
	overflow: hidden;
	background: url(../images/layout/r4r.gif) no-repeat top left;
}

#r5c {
	padding-top: 20px;
	padding-bottom: 20px;
}

#main_path_l {
	width: 15px;
	height: 38px;
	overflow: hidden;
	background: url(../images/layout/main_path_l.gif) no-repeat top left;
}
#main_path_c {
	height: 38px;
	overflow: hidden;
	background: url(../images/layout/main_path_c.gif) repeat-x top left;
}
#main_path_r {
	width: 15px;
	height: 38px;
	overflow: hidden;
	background: url(../images/layout/main_path_r.gif) no-repeat top left;
}

#main_body_tl, #main_body_tr, #main_body_bl, #main_body_br,
#main_left_tl, #main_left_tr, #main_left_bl, #main_left_br,
#main_right_tl, #main_right_tr, #main_right_bl, #main_right_br {
	width: 15px;
	height: 15px;
	overflow: hidden;
}

#main_body_tc, #main_body_bc,
#main_left_tc, #main_left_bc,
#main_right_tc, #main_right_bc {
	height: 15px;
	overflow: hidden;
}

#main_body_ml, #main_body_mr,
#main_left_ml, #main_left_mr,
#main_right_ml, #main_right_mr {
	width: 15px;
	overflow: hidden;
}

#main_left_tr, #main_left_mr, #main_left_br, 
#main_right_tl, #main_right_ml, #main_right_bl {
	width: 30px;
}

#main_body_tl { background: url(../images/layout/main_body_tl.gif) no-repeat top left; }
#main_body_tc { background: url(../images/layout/main_body_tc.gif) repeat-x top left; }
#main_body_tr { background: url(../images/layout/main_body_tr.gif) no-repeat top left; }
#main_body_ml { background: url(../images/layout/main_body_ml.gif) repeat-y top left; }
#main_body_mc { background-color: #fff; }
#main_body_mr { background: url(../images/layout/main_body_mr.gif) repeat-y top left; }
#main_body_bl { background: url(../images/layout/main_body_bl.gif) no-repeat top left; }
#main_body_bc { background: url(../images/layout/main_body_bc.gif) repeat-x top left; }
#main_body_br { background: url(../images/layout/main_body_br.gif) no-repeat top left; }

#main_left_tl { background: url(../images/layout/main_left_tl.gif) no-repeat top left; }
#main_left_tc { background: url(../images/layout/main_left_tc.gif) repeat-x top left; }
#main_left_tr { background: url(../images/layout/main_left_tr.gif) no-repeat top left; }
#main_left_ml { background: url(../images/layout/main_left_ml.gif) repeat-y top left; }
#main_left_mc { background-color: #ddf4ff; width: 165px; } /* left_width */
#main_left_mr { background: url(../images/layout/main_left_mr.gif) repeat-y top left; }
#main_left_bl { background: url(../images/layout/main_left_bl.gif) no-repeat top left; }
#main_left_bc { background: url(../images/layout/main_left_bc.gif) repeat-x top left; }
#main_left_br { background: url(../images/layout/main_left_br.gif) no-repeat top left; }

#main_right_tl { background: url(../images/layout/main_right_tl.gif) no-repeat top left; }
#main_right_tc { background: url(../images/layout/main_right_tc.gif) repeat-x top left; }
#main_right_tr { background: url(../images/layout/main_right_tr.gif) no-repeat top left; }
#main_right_ml { background: url(../images/layout/main_right_ml.gif) repeat-y top left; }
#main_right_mc { background-color: #ddf4ff; } /* right_width */
#main_right_mr { background: url(../images/layout/main_right_mr.gif) repeat-y top left; }
#main_right_bl { background: url(../images/layout/main_right_bl.gif) no-repeat top left; }
#main_right_bc { background: url(../images/layout/main_right_bc.gif) repeat-x top left; }
#main_right_br { background: url(../images/layout/main_right_br.gif) no-repeat top left; }

#blue_tl {
	width: 16px;
	height: 16px;
	overflow: hidden;
	background: url(../images/layout/blue_tl.gif) no-repeat top left;
}
#blue_tc {
	height: 16px;
	overflow: hidden;
	background: url(../images/layout/blue_tc.gif) repeat-x top left;
}
#blue_tr {
	width: 16px;
	height: 16px;
	overflow: hidden;
	background: url(../images/layout/blue_tr.gif) no-repeat top left;
}
#blue_ml {
	width: 16px;
	overflow: hidden;
	background: url(../images/layout/blue_ml.gif) repeat-y top left;
}
#blue_mc {
	background-color: #ddf4ff;
}
#blue_mr {
	width: 16px;
	overflow: hidden;
	background: url(../images/layout/blue_mr.gif) repeat-y top left;
}
#blue_bl {
	width: 16px;
	height: 16px;
	overflow: hidden;
	background: url(../images/layout/blue_bl.gif) no-repeat top left;
}
#blue_bc {
	height: 16px;
	overflow: hidden;
	background: url(../images/layout/blue_bc.gif) repeat-x top left;
}
#blue_br {
	width: 16px;
	height: 16px;
	overflow: hidden;
	background: url(../images/layout/blue_br.gif) no-repeat top left;
}

#r2body .gap {
	width: 25px;
	background: url(../images/layout/splitter.gif) no-repeat center center;
}



.ddp1_tl, .ddp1_tc, .ddp1_tr, .ddp1_ml, .ddp1_content, .ddp1_mr, .ddp1_bl, .ddp1_bc, .ddp1_br, .ddp1_tag_l, .ddp1_tag, .ddp1_tag_r {
	background: #d3e7f1;
}
.ddp1_tc {
	height: 12px;
}
.ddp1_bl {
	width: 12px;
	height: 12px;
	background: url(../images/layout/ddp1_bl.gif) no-repeat top left;
}
.ddp1_br {
	width: 12px;
	height: 12px;
	background: url(../images/layout/ddp1_br.gif) no-repeat top left;
}
.ddp1_tag_l {
	width: 17px;
	height: 18px;
	background: url(../images/layout/ddp1_left.gif) no-repeat top left;
}
.ddp1_tag_r {
	width: 17px;
	height: 18px;
	background: url(../images/layout/ddp1_right.gif) no-repeat top left;
}
.ddp1_tag {
	background: #d3e7f1 url(../images/layout/ddp1_bullet.gif) no-repeat 0px 6px;
}
.ddp1_tag h3 {
	text-indent: 12px;
	color: #258fcc;
	font-weight: normal;
	font-size: 11px;
	height: 18px;
	line-height: 18px;
	margin: 0;
	padding: 0;
}
.ddp1_content {
}


.ddp2_tl { background: url(../images/layout/ddp2_tl.gif) no-repeat top left; }
.ddp2_tc { background: url(../images/layout/ddp2_tc.gif) repeat-x top left; }
.ddp2_tr { background: url(../images/layout/ddp2_tr.gif) no-repeat top left; }
.ddp2_ml { background: url(../images/layout/ddp2_ml.gif) repeat-y top left; }
.ddp2_mr { background: url(../images/layout/ddp2_mr.gif) repeat-y top left; }
.ddp2_bl { background: url(../images/layout/ddp2_bl.gif) no-repeat top left; }
.ddp2_bc { background: url(../images/layout/ddp2_bc.gif) repeat-x top left; }
.ddp2_br { background: url(../images/layout/ddp2_br.gif) no-repeat top left; }
.ddp2_tl, .ddp2_tr, .ddp2_bl, .ddp2_br {
	width: 12px;
	height: 12px;
}
.ddp2_ml, .ddp2_mr {
	width: 12px;
}
.ddp2_tc, .ddp2_bc {
	height: 12px;
}
.ddp2_tag_l {
	width: 15px;
	height: 14px;
	background: url(../images/layout/ddp2_left.gif) no-repeat top left;
}
.ddp2_tag_r {
	width: 15px;
	height: 14px;
	background: url(../images/layout/ddp2_right.gif) no-repeat top left;
}
.ddp2_tag {
	background: #35b4e7 url(../images/layout/ddp2_bullet.gif) no-repeat 0px 4px;
}
.ddp2_tag h3 {
	text-indent: 12px;
	color: #fff;
	font-weight: normal;
	font-size: 11px;
	height: 14px;
	line-height: 14px;
	margin: 0;
	padding: 0;
}
.ddp2_content {
	background: #35b4e7;
}

Буду вдячний любій допомозі. Ато ламаю голову над тим шаблоном вже не перший день.

gruz

Без розуміння теорії і набуття певного досвіду нічого ти не зробиш. Хіба хтось все зробить за тебе.

Опановуй:
http://www.google.com.ua/search?q=div+%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B0&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-GB:official&client=firefox-a

http://www.pmob.co.uk/temp/3colfixedtest_4.htm

Тут я багато взяв корисного: http://matthewjamestaylor.com/

З table в div не стільки перероблюють, скільки роблять наново. Там старі CSSи хіба для кольорів і розміру шрифтів згодяться. І то для довідки. Все треба наново робити.