VPF::Проблемка с растяжкой страницы.

Insane18

Дата 2.3.2009, 16:30 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 31
Регистрация: 15.1.2007

Репутация: нет
Всего: нет

Помогите разобраться плиз! Есть у меня страничка сверстанная. Она растягивается. При добавлении большого количества этеменотв таблицы, левая и правая колонки растягиваются. Как сделать так чтоб не растягивались? Помогите плиз!!!

Код


<!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-->&nbsp;</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;">КАК&nbsp;&nbsp;&nbsp;&nbsp; КУПИТЬ&nbsp;&nbsp;&nbsp;&nbsp;  ДОСТАВКА&nbsp;&nbsp;&nbsp;&nbsp;     ГАРАНТИЯ&nbsp;&nbsp;&nbsp;&nbsp;     ИНФОРМАЦИЯ&nbsp;&nbsp;&nbsp;&nbsp;     КОНТАКТЫ&nbsp;&nbsp;&nbsp;&nbsp;</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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="header">Категории</span></span></td>
    
    <td width="4" rowspan="4" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td width="100%" valign="top"background="images/header_mini.jpg" bgcolor="#2b3747" style=""><br style="line-height: 10px;">
      <span class="menu">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Добро пожаловать!!!! </span></td>
    <td width="4" rowspan="4" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td width="186" valign="right" background="images/header_mini.jpg"><br style="line-height: 10px;">
    <span class="menu">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;</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 />
     &nbsp;&nbsp;<input name="" type="image" src="images/look_at.gif" /><br />
     &nbsp;&nbsp;<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 />
     &nbsp;&nbsp;<input name="" type="image" src="images/look_at.gif" /><br />
     &nbsp;&nbsp;<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 />
     &nbsp;&nbsp;<input name="" type="image" src="images/look_at.gif" /><br />
     &nbsp;&nbsp;<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 />
     &nbsp;&nbsp;<input name="" type="image" src="images/look_at.gif" /><br />
     &nbsp;&nbsp;<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 />
     &nbsp;&nbsp;<input name="" type="image" src="images/look_at.gif" /><br />
     &nbsp;&nbsp;<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 />
     &nbsp;&nbsp;<input name="" type="image" src="images/look_at.gif" /><br />
     &nbsp;&nbsp;<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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="header">Спец. предложение</span></span></td>
    <td valign="top" background="images/header_mini.jpg"><br style="line-height: 10px;">
        <span class="menu">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Производители</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>&nbsp;</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>

Вот исходный код и также прикрепляю архив со страничкой и картинками.

Присоединённый файл ( Кол-во скачиваний: 4 )

Complect.rar 194,48 Kb

FortMax

Дата 3.3.2009, 04:52 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 485
Регистрация: 2.10.2006
Где: Россия, г. Бироби джан ЕАО

Репутация: 3
Всего: 5

задать им фиксированную ширину

--------------------

Insane18

Дата 3.3.2009, 08:36 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 31
Регистрация: 15.1.2007

Репутация: нет
Всего: нет

Так они в длину растягиваются а не в ширину)))

FortMax

Дата 3.3.2009, 10:23 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 485
Регистрация: 2.10.2006
Где: Россия, г. Бироби джан ЕАО

Репутация: 3
Всего: 5

Insane18, под длиной,я так понял имеется в виду высота !? так нужно её зафиксировать !

--------------------

Insane18

Дата 3.3.2009, 22:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 31
Регистрация: 15.1.2007

Репутация: нет
Всего: нет

она зафиксирована но всеравно тянется...((

insaneghost

Дата 13.3.2009, 14:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 34
Регистрация: 11.3.2009

Репутация: нет
Всего: нет

где же она зафисирована, когда у вас некоторые размеры в таблице заданы в процентах???

из-за этого и тянется... задавайте размер в пикселях.

Это сообщение отредактировал(а) insaneghost - 13.3.2009, 14:40

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »