Помогите разобраться плиз! Есть у меня страничка сверстанная. Она растягивается. При добавлении большого количества этеменотв таблицы, левая и правая колонки растягиваются. Как сделать так чтоб не растягивались? Помогите плиз!!!
| Код |
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ Без Имени</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
<!--
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.header {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #333333; color: #242E3B}
.main_text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#c4dbf2;
}
.header_per {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #88C7F2; }
.descr {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #c4dbf2; }
body {
background-color: #2F3C4D;
}
div.t_1 {
width: 132px;
height: 88px;
float: left;
border-left: 1px dotted #6f757e;
border-top: 1px dotted #6f757e;
}
div.t_2 {
width: 50%;
height: 88px;
float: left;
border-left: 1px dotted #6f757e;
border-top: 1px dotted #6f757e;
}
div.t_3 {
width: 100px;
height: 88px;
float: left;
border-left: 1px dotted #6f757e;
border-top: 1px dotted #6f757e;
}
div.t_4 {
width: 150px;
height: 88px;
float: left;
border-left: 1px dotted #6f757e;
border-top: 1px dotted #6f757e;
border-right: 1px dotted #6f757e;
}
-->
</style>
</head>
<body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="100%" height="40" valign="top" background="images/1_hr.jpg"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="81" valign="top" background="images/2_hr.jpg"><img src="images/logo.jpg" width="250" height="81" /></td>
</tr>
<tr>
<td height="31" valign="top" background="images/3_hr.jpg"><div align="center" class="menu"><br style="line-height: 8px;">КАК КУПИТЬ ДОСТАВКА ГАРАНТИЯ ИНФОРМАЦИЯ КОНТАКТЫ </div></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="">
<!--DWLayoutTable-->
<tr>
<td width="311" height="220" valign="top"><img src="images/jelezo.jpg" width="313" height="220" /></td>
<td width="100%" valign="top" background="images/4-hr.jpg" ><div align="right"><img src="images/PC.jpg" width="477" height="220" /></div></td>
</tr><tr><td height="1"><img src="images/spacer.gif" alt="" width="313" height="1" /></td><td></td></tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#242e3b">
<!--DWLayoutTable-->
<tr>
<td width="188" height="31" valign="top" background="images/header_mini.jpg" ><br style="line-height: 10px;">
<span class="menu"> <span class="header">Категории</span></span></td>
<td width="4" rowspan="4" valign="top"><!--DWLayoutEmptyCell--> </td>
<td width="100%" valign="top"background="images/header_mini.jpg" bgcolor="#2b3747" style=""><br style="line-height: 10px;">
<span class="menu"> Добро пожаловать!!!! </span></td>
<td width="4" rowspan="4" valign="top"><!--DWLayoutEmptyCell--> </td>
<td width="186" valign="right" background="images/header_mini.jpg"><br style="line-height: 10px;">
<span class="menu"> <span class="header">Корзина</span></span></td>
</tr>
<tr>
<td height="263" valign="top" style="border-right:1px dotted; border-color:#6f757e; border-bottom:1px solid #FFFFFF; padding: 7px 15px 22px;"><br />
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a>
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a>
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a>
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a>
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a>
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a>
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a>
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a></td>
<td rowspan="2" valign="top" bgcolor="#2f3c4d" class="main_text" style="border:1px dotted; border-color:#6f757e; padding: 7px 15px 22px;" ><p>Бла бла бла фыв</p>
<p>фы</p>
<p>вфыв</p>
<p>фыв</p>
<p>фыв</p>
<p>фывфыв</p> <p>фыв </p>
<p> </p>
<div class="t_1">
<img src="images/temp/Untitled-2.jpg" />
</div>
<div class="t_2">
<span class="header_per">Fujitsu Siemens Tower</span><br />
<span class="descr">Корпус для ПК с интерфейсом бла бла бла, а так же еще чего то там.</span>
</div>
<div class="t_3" align="center">
<span class="header_per"><br /><br /><br />3500р.</span><br />
</div>
<div class="t_4" ><br /><br />
<input name="" type="image" src="images/look_at.gif" /><br />
<input name="" type="image" src="images/add_to_cart.gif" />
</div>
<div class="t_1">
<img src="images/temp/Untitled-2.jpg" />
</div>
<div class="t_2">
<span class="header_per">Fujitsu Siemens Tower</span><br />
<span class="descr">Корпус для ПК с интерфейсом бла бла бла, а так же еще чего то там.</span>
</div>
<div class="t_3" align="center">
<span class="header_per"><br /><br /><br />3500р.</span><br />
</div>
<div class="t_4" ><br /><br />
<input name="" type="image" src="images/look_at.gif" /><br />
<input name="" type="image" src="images/add_to_cart.gif" />
</div>
<div class="t_1">
<img src="images/temp/Untitled-2.jpg" />
</div>
<div class="t_2">
<span class="header_per">Fujitsu Siemens Tower</span><br />
<span class="descr">Корпус для ПК с интерфейсом бла бла бла, а так же еще чего то там.</span>
</div>
<div class="t_3" align="center">
<span class="header_per"><br /><br /><br />3500р.</span><br />
</div>
<div class="t_4" ><br /><br />
<input name="" type="image" src="images/look_at.gif" /><br />
<input name="" type="image" src="images/add_to_cart.gif" />
</div>
<div class="t_1">
<img src="images/temp/Untitled-2.jpg" />
</div>
<div class="t_2">
<span class="header_per">Fujitsu Siemens Tower</span><br />
<span class="descr">Корпус для ПК с интерфейсом бла бла бла, а так же еще чего то там.</span>
</div>
<div class="t_3" align="center">
<span class="header_per"><br /><br /><br />3500р.</span><br />
</div>
<div class="t_4" ><br /><br />
<input name="" type="image" src="images/look_at.gif" /><br />
<input name="" type="image" src="images/add_to_cart.gif" />
</div>
<div class="t_1">
<img src="images/temp/Untitled-2.jpg" />
</div>
<div class="t_2">
<span class="header_per">Fujitsu Siemens Tower</span><br />
<span class="descr">Корпус для ПК с интерфейсом бла бла бла, а так же еще чего то там.</span>
</div>
<div class="t_3" align="center">
<span class="header_per"><br /><br /><br />3500р.</span><br />
</div>
<div class="t_4" ><br /><br />
<input name="" type="image" src="images/look_at.gif" /><br />
<input name="" type="image" src="images/add_to_cart.gif" />
</div>
<div class="t_1">
<img src="images/temp/Untitled-2.jpg" />
</div>
<div class="t_2">
<span class="header_per">Fujitsu Siemens Tower</span><br />
<span class="descr">Корпус для ПК с интерфейсом бла бла бла, а так же еще чего то там.</span>
</div>
<div class="t_3" align="center">
<span class="header_per"><br /><br /><br />3500р.</span><br />
</div>
<div class="t_4" ><br /><br />
<input name="" type="image" src="images/look_at.gif" /><br />
<input name="" type="image" src="images/add_to_cart.gif" />
</div>
</td>
<td valign="top" class="main_text" style="border-left:1px dotted; border-color:#6f757e; border-bottom:1px solid #FFFFFF; padding: 7px 19px 22px;"><p class="main_text">Корсинко <img src="images/bag.gif" width="22" height="22" /></p></td>
</tr>
<tr>
<td height="31" valign="top" background="images/header_mini.jpg"><br style="line-height: 10px;">
<span class="menu"> <span class="header">Спец. предложение</span></span></td>
<td valign="top" background="images/header_mini.jpg"><br style="line-height: 10px;">
<span class="menu"> Производители</span></td>
</tr>
<tr>
<td height="202" valign="top" class="main_text" style="border-right:1px dotted; border-color:#6f757e; border-bottom:1px solid #FFFFFF; padding: 7px 19px 22px;">Пакупайти дурака))) </td>
<td> </td>
<td valign="top" style="border-left:1px dotted; border-color:#6f757e; border-bottom:1px solid #FFFFFF; padding: 7px 19px 22px;"><br />
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a>
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a>
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a>
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a>
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a>
<li style="color:#242e3b" class="bg_list"><a href="" >Процессор</a></td>
</tr>
<tr>
<td height="0"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr><td height="1"><img src="images/spacer.gif" alt="" width="188" height="1" /></td><td><img src="images/spacer.gif" alt="" width="4" height="1" /></td><td></td><td><img src="images/spacer.gif" alt="" width="4" height="1" /></td><td><img src="images/spacer.gif" alt="" width="186" height="1" /></td></tr>
</table>
</body>
</html>
|
Вот исходный код и также прикрепляю архив со страничкой и картинками. |