Непонятная ошибка в вёрстке

zuldek · January 2, 2011

Замучился уже их вертеть.. что уже только не делал. По идее всё просто - ставлю фиксированный размер у ячеек, которые не должны тянутся и прописываю 100% размер для тех которые должны тянутся. Вот схема проблемной части макета

вот сама страница

страница

Табличную структуру я переписывал заново несколько раз.

Прошу помочь понять в чём ошибка.

Edited January 2, 2011 by zuldek

Temiks · January 2, 2011

не нужно указываать контенту ширину, а только шапке и футеру, а контен потом будет сам тянуться

страницу можно сделать с главной таблицы и трех колонок

zuldek · January 2, 2011

Temiks said:
не нужно указываать контенту ширину, а только шапке и футеру, а контен потом будет сам тянуться
страницу можно сделать с главной таблицы и трех колонок

Хорошо, но как я понимаю, от ширины контента и количества колонок тут же мало что зависит, ведь речь идёт о высоте... или я не правильно понял комментарий?

Спасибо за ответ.

Temiks · January 2, 2011

высота выщитуется из количества контента , например как тут

http://imm.io/2Spy

покажите скрин того что вам нужно сделать

zuldek · January 2, 2011

Temiks said:
высота выщитуется из количества контента , например как тут
http://imm.io/2Spy
покажите скрин того что вам нужно сделать

Сделать нужно всё как тут http://www.darwell.ru/test.htm

Только чтобы ячейки с фиксированным размером не растягивались.

Вот там по непонятной причине растягивается ячейка вторая сверху в первой колонке. размер этой ячейки прописан 350 пикселе, равный размеру вложенной в эту учейку таблицы с прямоугольником. Однако по мере наполнения контента в крайнем правом столбце (набил его единицами "1") она растягивается, хотя растягиваться по мере наполнения контента должны только 3 ячейки, - первая (та которая с прямоугольником и градиентом), вторая (та самая, которая набита единицами для проверки вёртски), и третья (пустая ячейка между первым столбцом и ячейкой, набитой единицами).

А у меня по непонятной причине тянутся по высоте все ячейки первой колонки

Edited January 2, 2011 by zuldek

Temiks · January 2, 2011

подвал я так понял должен быть "прибитым" к низу?

уберите высоту 100% и все будет ок, но подвал не будет прижат

Завтра попробую помочь

пока вот что набросал , но не все

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Облом</title>
<style type="text/css">
	.container {
		width: 1000px;
		height: 100%;
		background-color: red;
}
.header {
	width: 700px;
	height: 100px;
	background-color: blue;
}
td.col1 {
	width: 50px;
	background-color: violet;
}
.content {
	width: 700px;
	background-color: white;
}
.footer {
	height: 70px;
	width: 700px;
	background-color: #00FF00;
}
	</style>
  </head>
  <body>
	  <table class="container" >
		  <tr>
			  <td class="header" >
				  Шапка
			  </td>
			  <td class="col1" >
				  Колонка 1
			  </td>
			  <td>
				  Колонка 2
			  </td>
		  </tr>
		  <tr>
			  <td class="content" >
				  Котент
			  </td>
		  </tr>
		  <tr>
			  <td class="footer" >
				  Футер
			  </td>
		  </tr>
	  </table>

  </body>
</html>

офф

вот доделал, но не уверен чи будет прижат футер при другом доктайпе

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Облом</title>
<style type="text/css">
	.container {
		width: 1000px;
		height: 100%;
		background-color: red;
}
.header {
	width: 700px;
	height: 100px;
	background-color: blue;
}
td.col1 {
	width: 50px;
	background-color: violet;
}
.content {
	width: 700px;
	background-color: white;
}
.footer {
	height: 70px;
	width: 700px;
	background-color: #00FF00;
}
	</style>
  </head>
  <body>
	  <table class="container" >
		  <tr>
			  <td class="header" colspan="1" >
				  Шапка
			  </td>
			  <td class="col1" rowspan="3" valign="top" >
				  Колонка 1
			  </td>
			  <td rowspan="3" valign="top" >
				  Колонка 2
			  </td>
		  </tr>
		  <tr>
			  <td class="content" >
				  Котент
			  </td>
		  </tr>
		  <tr>
			  <td class="footer" >
				  Футер
			  </td>
		  </tr>
	  </table>

  </body>
</html>

zuldek · January 2, 2011

да в том то и дело что подвал должен быть прижат к низу, и колонки крайняя правая, и центральная в левом столбце должны растягиваться по высоте.

Вот я просто взял набил абзацев в третьей колонке по вашему листингу и открыл в эксполрере. Получается точно такая же ошибка как и у меня, растягиваются почему-то все три колонки первого столбца а не только белая

ошибка

При этом, кстати в Firefox пример отображается нормально, а в IExplorer 8.0.6001 происходит именно то что я написал с кодом по ссылке выше.

Edited January 2, 2011 by zuldek

zuldek · January 2, 2011

Чтобы вам было видно что показал IExplorer, уменьшил маштаб страницы когда делал скрин - скрин

upd.

В других браузерах всё нормально, что же не нарвится IE в такой вёрстке...

Edited January 2, 2011 by zuldek

Temiks · January 3, 2011

у меня все ок отображает в ие, как и в ФФ, если уменьшить масштаб то так и должно быть, так как ширина у вас фиксирована, а высота резиновая

а про футер можно в инете поискать, та и на этом форуме уже не раз поднимали темы про футер

а можно скрин того с чего вы делаете

Temiks · January 3, 2011

как прижать футер (пока што контент не тянется )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4.01/loose.dtd
<html>
  <head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css" >

	  * {
	  margin:0;
	  }

	  html, body {
	  height:100%;
	  }
	  .container {
	  min-height:100%;
	  height:auto  !important;
	  height:100%;
	  margin:0 auto -4em;
	  background-color: red;
	  }
	  .header {
		  height: 150px;
		  background-color: green
}
	  .content {
		  background-color: yellow;
		  height: 100%;
}
	  .footer {
	  height:4em;
	  background-color: blue
	  }


	</style>
  </head>
  <body>
	  <div class="container">
		  <div class="header" >
			 <p>Шапка</p>
		  </div>
	  <div class="content">Котнент</div>
	  </div>
	  <div class="footer">
	  <p>Текст в футере</p>
	  </div>
  </body>
</html>

Scrum · January 3, 2011

Интересно сколько столетий еще будут мусолить оный вопрос ?

Temiks · January 3, 2011

Scrum said:
Интересно сколько столетий еще будут мусолить оный вопрос ?

наверное еще много

zuldek · January 3, 2011

Temiks said:
наверное еще много

Давно просто вёрсткой не занимался.

Вот сделал, как и говорили, снял для всех TD значение 100% оно осталось только для таблиц, вложенные в теги TD (<td><table height="100%">...) таких таблицы всего 2, - 1 ( левый столбец, четвёртая ячейка сверху (прямоугольник с градиентами и текстом тот который без картинок) 2, - сайдбар, весь третий столбец. Для наглядности поставил границы у таблиц и выключил reset.css (убирает отступы от таблиц и тд), и вот 3 браузера показывают совершенно разную картину - http://darwell.ru/page.php

Опера 11 тупо не растягивает прямоугольник с контентом -

IE почему-то растягивает и фиксированную ячейку первого столбца (в ней прямоугольник с большой картинкой), и ячейку с контентом (прямоугольник с градиентом) одновременно -

FF отображает вот всё нормально так как нужно. -

Edited January 3, 2011 by zuldek

Temiks · January 3, 2011

.

Edited January 3, 2011 by Temiks

zuldek · January 3, 2011

Temiks said:
напиши мне в ICQ .

удали из игнор листа уин и поясни вопрос спамфильтра плз

 TemikS (12:58:14 3/01/2011)
You have attempts: 1.
Осталось попыток: 1.
Please, type answer on question which you can see below.
Код

 DOS (12:58:38 3/01/2011)
Cod

 TemikS (12:58:38 3/01/2011)
You failed antispam verification. You have no attemts. Your UIN (450275445) is ignored.
Вы не прошли антиспам-фильтр. У вас не осталось попыток. Ваш UIN (450275445) игнорируется.

Edited January 3, 2011 by zuldek

Sign In

Непонятная ошибка в вёрстке

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information