Вопрос по IE

ageent · May 26, 2009

Делаю простой резиновый макет. Не выходит установить ширину столбцов. Структура такая:

Шапка

Колонка Колонка Колонка

Подвал

Не могу зафиксить левую и правую колонку! Как решается даная проблема? Ответ дивами не предлагать, так как в макете куча разных тянущихся фонов. Которые можно было-бы очень легко сделать решив данную проблему.

Код прилагаю.

<?xml version="1.0"?>
<!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>Untitled Document</title>
</head>

<style type="text/css">
html, body{ height:100%;}
body {padding:0px;margin:0px;font:13px Arial, Helvetica, sans-serif; background:#c7eaff;}
</style>

<body> 

<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
	<td colspan="3" height="237" valign="top">
Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.
	</td>
  </tr>
  <tr>
	<td width="100">Эта колонка в ie не зафиксирована</td>
	<td> </td>
	<td width="100">Эта колонка в ie не зафиксирована</td>
  </tr>
  <tr>
	<td colspan="3" height="150"> </td>
  </tr>
</table>

</body>
</html>

psywalker · May 26, 2009

Вот вам ссылка на правильную табличную вёрстку, выучите и научитесь правильно верстать хотябы таблицами: http://www.pastukhova.com/lesson1.php

ageent · May 26, 2009

Вы не вьехали в мою проблему, а тупо скинули мне ссылку, которая никаким боком ее не решает.

Edited May 26, 2009 by ageent

=Shaman= · May 26, 2009

Смешно то, что div-овая верстка позволяет оперировать все теми же фонами, что и табличная.

А по ссылке вам предлагают ознакомиться с правилами табличной верстки.

ageent · May 26, 2009

Предлагаю скопировать выше преведенный мною код, вставить в файл с расширением htnl вдумчиво прочитать мой вопрос, а потом уже умничать.

Edited May 26, 2009 by ageent

psywalker · May 26, 2009

ageent

Предлагаю вам воспользоваться поисковиком и таким образом решить вашу проблему

ageent · May 26, 2009

хм, я смотрю вы никак не можете понять мою проблему

>Предлагаю скопировать выше преведенный мною код, вставить в файл с расширением htnl вдумчиво прочитать мой вопрос, а потом уже умничать.

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

psywalker · May 26, 2009

А сделать так не пробовали?

<!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>Untitled Document</title>
</head>

<style type="text/css">
html, body{ height:100%;}
body {padding:0px;margin:0px;font:13px Arial, Helvetica, sans-serif; background:#c7eaff;}
</style>

<body>

<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
	<td colspan="3" height="237" valign="top">
Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.Если мы уберем текст в ie колонки будут зафиксированны.
	</td>
  </tr>
  <tr>
	<td >Эта колонка в ie не зафиксирована</td>
	<td width="100%"> </td>
	<td width="100">Эта колонка в ie не зафиксирована</td>
  </tr>
  <tr>
	<td colspan="3" height="150"> </td>
  </tr>
</table>

</body>
</html>

ageent · May 26, 2009

точняком. сенкс.

ageent · May 26, 2009

Еще вопрос, как в данную ячуйку вставить div что-бы по высоте он был такой же как td ?

  <tr>
	<td valign="top"><div class="p1" style="height:100%; background:#00F;">!!Сюда тыкаем див!!</div></td>
	<td width="100%"> </td>
	<td width="100">Эта колонка в ie не зафиксирована</td>
  </tr>

Edited May 26, 2009 by ageent

psywalker · May 26, 2009

Попробуй такой вариант:

<!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>Untitled Document</title>
<style type="text/css">
html, body{ height:100%;}
body {padding:0px;margin:0px;font:13px Arial, Helvetica, sans-serif; background:#c7eaff;}
table { height: 100%; width: 100%;}

table th {}
#one { width: 300px; background: #009; height: 100%;}
#two { background: #F00; }
#three {width: 300px; background: #0F3;
 /* Цвет фона второй колонки */
}
div {  height: 100%; width: 100px; background: #960;}
</style>
</head>



<body>

<table>
	<tr>
		<th colspan="3">Header</th>
	</tr>
	<tr>
		<td id="one"><div>Left2</div></td>	
		<td id="two">Center</td>
		<td id="three">Right</td>
	</tr>
	<tr>
		<th colspan="3">Footer</th>
	</tr>
</table>

</body>
</html>

ageent · May 26, 2009

неа не работает, при увеличении header или footer макет увеличивается. Это легко по скролингу определить. высота ячейки выходит равна не высоте столбца td а высоте html, body

Edited May 26, 2009 by ageent

Searcher · May 26, 2009

для ячейки надо position:relative

ageent · May 26, 2009

Чет без толку

 <td id="one" style="position:relative;"><div>Left2</div></td> 
и так 
<td id="one" style="position:relative;"><div style="position:relative;">Left2</div></td>

выложи пример.

psywalker · May 26, 2009

ageent

выложи пример.

Ты лучше сам выложи скрин того, что ты хочешь получить в итоге

ageent · May 26, 2009

я хочу что-бы див был такой же по высоте как и td

в этом примере.

<?xml version="1.0"?>
<!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>Untitled Document</title>
</head>

<style type="text/css">
html, body{ height:100%;}
body {padding:0px;margin:0px;font:13px Arial, Helvetica, sans-serif; background:#c7eaff;}
</style>

<body> 

<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
	<td colspan="3" height="237" valign="top"></td>
  </tr>
  <tr>
	<td width="100">Эта колонка в ie не зафиксирована</td>
	 <td valign="top" width="100%"><div class="p1" style="height:100%; background: #0FF">!!ВОТ ЭТОТ DIV по высоте должен быть таким же как и высота этой ячейки!!</div></td>
	<td width="100">Эта колонка в ie не зафиксирована</td>
  </tr>
  <tr>
	<td colspan="3" height="150"> </td>
  </tr>
</table>

</body>
</html>

Edited May 26, 2009 by ageent

Searcher · May 26, 2009

а от чего 100% то? вы как себе представляете 100%, если высота строки формируется исходя из контента, а у контента задана высота от еще неизвестной высоты ячейки?!

укажите ячейке с дивом высоту

psywalker · May 26, 2009

Прошу вас, выкиньте ваш код, и вставьте мой, у меня прекрасно всё работает, а у вас нет

<!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>Untitled Document</title>
<style type="text/css">
html, body{ height:100%;}
body {padding:0px;margin:0px;font:13px Arial, Helvetica, sans-serif; background:#c7eaff;}
table { height: 100%; width: 100%;}

table th { height: 200px;}
#one { width: 300px; background: #009; height: 60%; position: relative;}
#two { background: #F00; }
#three {width: 300px; background: #0F3;
 /* Цвет фона второй колонки */
}
div {  height: 100%; width: 100px; background: #960;}

</style>
</head>



<body>


<table>
	<tr>
		<th colspan="3">Header</th>
	</tr>
	<tr>
		<td id="one"><div>DIV LEFT</div></td>	
		<td id="two"><div>DIV CENTER</div></td>
		<td id="three">Right</td>
	</tr>
	<tr>
		<th colspan="3">Footer</th>
	</tr>
</table>

</body>
</html>

ageent · May 26, 2009

я не могу указать высоту. так как макет резиновый. header и footer имеею фиксированный размер, а content(середина) меняет свой размер в зависимости от разрешения браузера.

psywalker · May 26, 2009

ageent

Тоесть ты не можешь указать высоту ячейки, в которой лежит div?

Мы вам уже бытый час рассказываем, почему у вас не работает то, что вы хотите получить, а вы делаете по свойму и опять задаёте свой вопрос, вы издеваетесь?

Edited May 26, 2009 by psywalker

Searcher · May 26, 2009

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

psywalker · May 26, 2009

Searcher

Всё, тогда пусть сам ищет нереальный вариант для своей цели, давайте оставим его в покое)))

Edited May 26, 2009 by psywalker

ageent · May 26, 2009

Это плохое решение ( не в обиду )

1. У нас всегда будут полосы прокрутки

2. Только что вы подогнали #one { width: 300px; background: #009; height: 60%; position: relative;} где height: 60%; если посмотреть на большом разрешении то мы увидим разрывы http://www.ageent.ru/demo/1.jpg http://www.ageent.ru/demo/1.jpg, если же сделать height:100% то при открытии страницы мы просто не увидим footera http://www.ageent.ru/demo/2.jpg

или я не прав?

я просто хочу знать, есть ли реально работающее нормальное решении этой проблемы что-бы использовать это в будущем.

psywalker · May 26, 2009

Всё, я понял, в чём дело, кажется проблема решается следующим образом:

1) Вы задаёте Таблице высоту 100%

2) Следовательно её высота, это экран

3) А сумма высоты ваших строк не равна 100%, и поэтому происходят такие разрывы, кстати помойму только в Опере

Решение: Шапка+Подвал= 40% + Контент(60%)= 100%

Нужно сделать сумму всех строк равной 100%, например так:

<!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>Untitled Document</title>
<style type="text/css">
html, body{ height:100%;}
body {padding:0px;margin:0px;font:13px Arial, Helvetica, sans-serif; background:#c7eaff;}
table { height: 100%; width: 100%;}

table th { height: 20%;}
#one { width: 300px; background: #009; height: 60%;}
#two { background: #F00; height: 60%;}
#three {width: 300px; background: #0F3;height: 40%
 /* Цвет фона второй колонки */
}
div {  height: 100%; width: 100px; background: #960;}

</style>
</head>



<body>


<table>
	<tr>
		<th colspan="3">Header</th>
	</tr>
	<tr>
		<td id="one"><div>DIV LEFT</div></td>	
		<td id="two"><div>DIV CENTER</div></td>
		<td id="three">Right</td>
	</tr>
	<tr>
		<th colspan="3">Footer</th>
	</tr>
</table>

</body>
</html>

Edited May 26, 2009 by psywalker

Searcher · May 26, 2009

лучшее решение - верстка блоками

http://www.code-sucks.com/css%20layouts/fa.../faux-23-3-col/

http://layouts.ironmyers.com/

http://tjkdesign.com/articles/one_html_mar...css_layouts.asp

http://blog.html.it/layoutgala/

ageent · May 26, 2009

так выходит что footer и header у нас не в px а в процентах. ладно фиг с ним.

Searcher

ссылки кстати путевые. заценил

Edited May 26, 2009 by ageent

Sign In

Вопрос по IE

Question

Link to comment

Share on other sites

29 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

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