Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript
Перезагрузить страницу

Глюки с table height 100%. И у вложенной, и у основной. Помогите.


Глюки с table height 100%. И у вложенной, и у основной. Помогите.

Обсуждение темы Глюки с table height 100%. И у вложенной, и у основной. Помогите. в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Структура шаблона: Основная таблица height и width 100%. Три колонки в левой и правой идет бэкграунд, полностью который видят те у кого ширикоформатники. ...


Закрытая тема
 
Опции темы
Старый 11.09.2009, 04:02   #1
Структура шаблона:
Основная таблица height и width 100%. Три колонки в левой и правой идет бэкграунд, полностью который видят те у кого ширикоформатники.
В центральной еще она таблица с контентом. Вот она то и не понимает что высота у нее должна быть 100%.
Че ток не перепробовал уже дулировал хайт и в табле тэге и в цсс и сцц для таблиц всех ставил 100%, и как на форумах совветуют пробовал ставить для tr
хайт 100% и строки которые не тянутся высоту в 1пиксел. Ничерта не пашет.
Высота 100% вложенной для этого шаблона критична.

Помимо этого вылез в файрфокксе интересный глюк. Фон по бокам заканчивается не доходя до конца страницы. Нет "но репит" у меня не написан. Фон множится, но почему то обрывается. Хотя таблица основная растягивается на 100%, а значит и боковые ячейки в которых он. Первый раз такое вижу

Привожу код. многое для удобоваримости выкинул

Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML LANG=ru>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Untitled Document</title>
<style type="text/css">

html{
height:100%;
margin:0px;
}

body{
height:100%;
background-color:#000000;
margin:0px;
}

p {
margin:0px
}

#book{
	height:100%;
	border:0px;
	width: 892px;
}

#head{
	background:url(images/head.jpg) no-repeat;
	height:201px;
	margin:0px;
	width: 910px;
}

#L{
	background-image: url(images/L.jpg);
	background-repeat: repeat-y;
	background-position: right;
}
#R{
	background-image: url(images/R.jpg);
	background-repeat: repeat-y;
	background-position: left;
}
#menu{
	background-image: url(images/31.jpg);
	background-repeat: no-repeat;
	background-position: top;
	height: 142px;
}
#td11 {
	background-image: url(images/11.jpg);
	background-repeat: no-repeat;
	width: 30px;
	height:170px
	}
#td12 {
	height:100%;
	background-image: url(images/12.jpg);
	background-repeat: repeat-y;
	vertical-align: bottom;
	
}
#td13 {
	background-image: url(images/13.jpg);
	background-repeat: no-repeat;
	height:80px
}
#td21 {
	background-image: url(images/21.jpg);
	background-repeat: no-repeat;
	width: 20px;
}
#td22 {
	background-image: url(images/22.jpg);
	background-repeat: repeat-y;
	vertical-align: top;
	
}
#td23 {
	background-image: url(images/23.jpg);
	background-repeat: no-repeat;
	vertical-align: top;
}
#td31 {
	background-repeat: no-repeat;
	vertical-align: top;
	width: 142px;
}
#td32 {
	background-image: url(images/32.jpg);
	background-repeat: repeat-y;
	vertical-align: top;
	width: 142px;
}
#td33 {
	background-image: url(images/33.jpg);
	background-repeat: no-repeat;
}
#td41 {
	background-image: url(images/41.jpg);
	background-repeat: no-repeat;
	width: 40px;
}
#td42 {
	background-image: url(images/42.jpg);
	background-repeat: repeat-y;
}

#td43 {
	background-image: url(images/43.jpg);
	background-repeat: no-repeat;
}
#td51 {
	background-image: url(images/51.jpg);
	background-repeat: no-repeat;
	width: 610px;
	}
#td52 {
	background-image: url(images/52.jpg);
	background-repeat: repeat-y;
	vertical-align: top;
}

#td53 {
	background-image: url(images/53.jpg);
	background-repeat: no-repeat;
}

#td61 {
	background-image: url(images/61.jpg);
	background-repeat: no-repeat;
	width: 20px;
}
#td62 {
	background-image: url(images/62.jpg);
	background-repeat: repeat-y;
	vertical-align: top;
}

#td63 {
	background-image: url(images/63.jpg);
	background-repeat: no-repeat;
}
#td71 {
	background-image: url(images/71.jpg);
	background-repeat: no-repeat;
	width: 30px;
}
#td72 {
	background-image: url(images/72.jpg);
	background-repeat: repeat-y;
	vertical-align: bottom;
}

#td73 {
	background-image: url(images/73.jpg);
	background-repeat: no-repeat;
}
#x {
	background-image: url(images/x.jpg);
	background-repeat: no-repeat;
	height: 40px;
	width: 892px;
}
#z {
	height: 88px;
	width: 892px;
}
#lastbase {
	background-position: top;
	height: 100%;
	background-color: #f2e4bf;
	width: 220px;
	float: right;
	margin-right: 15px;
}
#centralcontent {
	height: 100%;
	width: 350px;
	float: left;
	padding-left: 15px;
	vertical-align: top;
}
#centralnewsdiv {
	height: 100%;
	background-color: #f2e4bf;
	width: 350px;
}
#centraluproundcorner {
	height: 11px;
	width: 350px;
	background-repeat: no-repeat;
	background-image: url(images/content-top.gif);
}
#centraldownroundcorner {
	height: 11px;
	width: 350px;
	background-repeat: no-repeat;
	background-image: url(images/content-bottom.gif);
}

#tr100
{ height:100%
}
</style>
</head>
<body>
<table style="width:100%; height:100%;" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="L">&nbsp;</td>
    <td width="892" valign="top" align="center">
    <div id="head"></div>
    <table id="book" height="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td id="td11">&nbsp;</td>
    <td id="td21">&nbsp;</td>
    <td rowspan="2" id="td32">
    <div id="menu"> </div>
    </td>
    <td id="td41">&nbsp;</td>
    <td id="td51">&nbsp;</td>
    <td id="td61">&nbsp;</td>
    <td id="td71">&nbsp;</td>
  </tr>
  <tr id="tr100" height="100%">
    <td id="td12"><img src="images/1x.png" width="30" height="77"></td>
    <td id="td22">&nbsp;</td>
    <td id="td42">&nbsp;</td>
    <td id="td52">
    <div id="centralcontent">
    <div id="centraluproundcorner"></div>
    <div id="centralnewsdiv">
      <p>1414 </p>
      <p>fg</p>
      <p>fg</p>
      <p>fg</p>
    </div>
    <div id="centraldownroundcorner"></div>
    </div>
        <div class="style1" id="lastbase">Watchmen: The End Is Nigh Part 2<br>
      27.08, ????? ???? </div>    </td>
    <td id="td62"><img src="images/6x.jpg" width="20" height="81"></td>
    <td id="td72"><img src="images/7x.png" alt="" width="30" height="77"></td>
  </tr>
  <tr>
    <td id="td13">&nbsp;</td>
    <td id="td23">&nbsp;</td>
    <td id="td33">&nbsp;</td>
    <td id="td43">&nbsp;</td>
    <td id="td53">&nbsp;</td>
    <td id="td63">&nbsp;</td>
    <td id="td73">&nbsp;</td>
  </tr>
</table>
<div id="x"> </div>
<div id="z"><img src="images/z1.jpg" alt="???????? ?????" width="179" height="88" title="???????? ?????"><img src="images/z2.jpg" alt="VIP" width="185" height="88" title="VIP"><img src="images/z3.jpg" alt="??????????????" width="180" height="88" title="??????????????"><img src="images/z4.jpg" width="180" height="88"><img src="images/z5.jpg" width="168" height="88" alt="FAQ" title="FAQ"></div>    </td>
    <td id="R">&nbsp;</td>
  </tr>
</table>    
</body>
</html>
Где прблема?

Код на ура прошел валидность Дрима и http://validator.w3.org/ до того как я увидел чт таблица не тянется и начал "химичить". Когда уже эти браузеры начнут за невалидность браковать
Последний раз редактировалось volFernion; 11.09.2009 в 04:10..
 
Старый 11.09.2009, 04:02
Ссылки
Старый 11.09.2009, 07:01   #2
Блин не оформил код, а сообщение не могу отредктировать. Че за глюк

Дубль:
Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML LANG=ru>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Untitled Document</title>
<style type="text/css">

html{
height:100%;
margin:0px;
}

body{
height:100%;
background-color:#000000;
margin:0px;
}

p {
margin:0px
}

#book{
	height:100%;
	border:0px;
	width: 892px;
}

#head{
	background:url(images/head.jpg) no-repeat;
	height:201px;
	margin:0px;
	width: 910px;
}

#L{
	background-image: url(images/L.jpg);
	background-repeat: repeat-y;
	background-position: right;
}
#R{
	background-image: url(images/R.jpg);
	background-repeat: repeat-y;
	background-position: left;
}
#menu{
	background-image: url(images/31.jpg);
	background-repeat: no-repeat;
	background-position: top;
	height: 142px;
}
#td11 {
	background-image: url(images/11.jpg);
	background-repeat: no-repeat;
	width: 30px;
	height:170px
	}
#td12 {
	height:100%;
	background-image: url(images/12.jpg);
	background-repeat: repeat-y;
	vertical-align: bottom;
	
}
#td13 {
	background-image: url(images/13.jpg);
	background-repeat: no-repeat;
	height:80px
}
#td21 {
	background-image: url(images/21.jpg);
	background-repeat: no-repeat;
	width: 20px;
}
#td22 {
	background-image: url(images/22.jpg);
	background-repeat: repeat-y;
	vertical-align: top;
	
}
#td23 {
	background-image: url(images/23.jpg);
	background-repeat: no-repeat;
	vertical-align: top;
}
#td31 {
	background-repeat: no-repeat;
	vertical-align: top;
	width: 142px;
}
#td32 {
	background-image: url(images/32.jpg);
	background-repeat: repeat-y;
	vertical-align: top;
	width: 142px;
}
#td33 {
	background-image: url(images/33.jpg);
	background-repeat: no-repeat;
}
#td41 {
	background-image: url(images/41.jpg);
	background-repeat: no-repeat;
	width: 40px;
}
#td42 {
	background-image: url(images/42.jpg);
	background-repeat: repeat-y;
}

#td43 {
	background-image: url(images/43.jpg);
	background-repeat: no-repeat;
}
#td51 {
	background-image: url(images/51.jpg);
	background-repeat: no-repeat;
	width: 610px;
	}
#td52 {
	background-image: url(images/52.jpg);
	background-repeat: repeat-y;
	vertical-align: top;
}

#td53 {
	background-image: url(images/53.jpg);
	background-repeat: no-repeat;
}

#td61 {
	background-image: url(images/61.jpg);
	background-repeat: no-repeat;
	width: 20px;
}
#td62 {
	background-image: url(images/62.jpg);
	background-repeat: repeat-y;
	vertical-align: top;
}

#td63 {
	background-image: url(images/63.jpg);
	background-repeat: no-repeat;
}
#td71 {
	background-image: url(images/71.jpg);
	background-repeat: no-repeat;
	width: 30px;
}
#td72 {
	background-image: url(images/72.jpg);
	background-repeat: repeat-y;
	vertical-align: bottom;
}

#td73 {
	background-image: url(images/73.jpg);
	background-repeat: no-repeat;
}
#x {
	background-image: url(images/x.jpg);
	background-repeat: no-repeat;
	height: 40px;
	width: 892px;
}
#z {
	height: 88px;
	width: 892px;
}
#lastbase {
	background-position: top;
	height: 100%;
	background-color: #f2e4bf;
	width: 220px;
	float: right;
	margin-right: 15px;
}
#centralcontent {
	height: 100%;
	width: 350px;
	float: left;
	padding-left: 15px;
	vertical-align: top;
}
#centralnewsdiv {
	height: 100%;
	background-color: #f2e4bf;
	width: 350px;
}
#centraluproundcorner {
	height: 11px;
	width: 350px;
	background-repeat: no-repeat;
	background-image: url(images/content-top.gif);
}
#centraldownroundcorner {
	height: 11px;
	width: 350px;
	background-repeat: no-repeat;
	background-image: url(images/content-bottom.gif);
}

#tr100
{ height:100%
}
</style>
</head>
<body>
<table style="width:100%; height:100%;" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="L">&nbsp;</td>
    <td width="892" valign="top" align="center">
    <div id="head"></div>
    <table id="book" height="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td id="td11">&nbsp;</td>
    <td id="td21">&nbsp;</td>
    <td rowspan="2" id="td32">
    <div id="menu"> </div>
    </td>
    <td id="td41">&nbsp;</td>
    <td id="td51">&nbsp;</td>
    <td id="td61">&nbsp;</td>
    <td id="td71">&nbsp;</td>
  </tr>
  <tr id="tr100" height="100%">
    <td id="td12"><img src="images/1x.png" width="30" height="77"></td>
    <td id="td22">&nbsp;</td>
    <td id="td42">&nbsp;</td>
    <td id="td52">
    <div id="centralcontent">
    <div id="centraluproundcorner"></div>
    <div id="centralnewsdiv">
      <p>1414 </p>
      <p>fg</p>
      <p>fg</p>
      <p>fg</p>
    </div>
    <div id="centraldownroundcorner"></div>
    </div>
        <div class="style1" id="lastbase">Watchmen: The End Is Nigh Part 2<br>
      27.08, ????? ???? </div>    </td>
    <td id="td62"><img src="images/6x.jpg" width="20" height="81"></td>
    <td id="td72"><img src="images/7x.png" alt="" width="30" height="77"></td>
  </tr>
  <tr>
    <td id="td13">&nbsp;</td>
    <td id="td23">&nbsp;</td>
    <td id="td33">&nbsp;</td>
    <td id="td43">&nbsp;</td>
    <td id="td53">&nbsp;</td>
    <td id="td63">&nbsp;</td>
    <td id="td73">&nbsp;</td>
  </tr>
</table>
<div id="x"> </div>
<div id="z"><img src="images/z1.jpg" alt="???????? ?????" width="179" height="88" title="???????? ?????"><img src="images/z2.jpg" alt="VIP" width="185" height="88" title="VIP"><img src="images/z3.jpg" alt="??????????????" width="180" height="88" title="??????????????"><img src="images/z4.jpg" width="180" height="88"><img src="images/z5.jpg" width="168" height="88" alt="FAQ" title="FAQ"></div>    </td>
    <td id="R">&nbsp;</td>
  </tr>
</table>    
</body>
</html>
Добавлено через 2 часа 29 минут

Все исправил глюк. Так и не понял в чем проблема была. Решилась тупо заменой дивов на строки таблицы. В шапке и внизу. От хер пойми все ж правильно. Зато еще одну создал главная таблица съезжает.
Последний раз редактировалось volFernion; 11.09.2009 в 07:01.. Причина: Добавлено сообщение
 
Старый 15.09.2009, 18:05   #3
У таблицы нет атрибута height и нет CSS-стиля height. Задать такую высоту везде только за счёт указанных атрибутов (без JS) вам не удастся.
 
Старый 15.09.2009, 18:05
Закрытая тема

« jQuery. Изменение атрибута name в ИЕ6 | Не могу создать автоматическое отправление страницы сайта »



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите исправить глюки во флеш игре bratmaxim Технологии Flash 10 19.07.2012 19:50
Помогите переделать с table на div misterleks HTML, CSS, JavaScript 11 19.11.2010 16:51
document.height yuk ASP, Perl, PHP и MySQL 0 27.01.2007 12:52
Помогите отловить глюки в игре puas Технологии Flash 4 11.10.2004 16:23


Текущее время: 23:20. Часовой пояс GMT +4.



Справка - Обратная связь - Web-silver.ru - Архив - Календарь - Карта - Вверх

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум