display: table для ослов

Yahoo! · December 9, 2009

Как заставить ослов 7-ой и ниже версии понимать display: table , table-cell свойства?

psywalker · December 9, 2009

Как заставить ослов 7-ой и ниже версии понимать display: table , table-cell свойства?

1) Таблица

2) Есть экспрешан для выравнивание вертикального

Yahoo! · December 9, 2009

1) хотелось бы сделать симантичный код и ради ослов которые в будущем сдохнут применять таблицы...

2) надо не для вертикального выравнивания, а для каркаса, хоть ява скриптом

Edited December 9, 2009 by Yahoo!

psywalker · December 9, 2009

1) хотелось бы сделать симантичный код и ради ослов которые в будущем сдохнут применять таблицы...
2) надо не для вертикального выравнивания, а для каркаса, хоть ява скриптом

Взгляни как сюда

http://silverflame.at.tut.by/sticky1.html

http://silverflame.at.tut.by/sticky_2.html

Это решения SelenITа, может слышал о нём

Yahoo! · December 9, 2009

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

psywalker · December 9, 2009

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

Ну как бы да, там разберёшься

Yahoo! · December 10, 2009

эх, а вот как избавиться от проблемы, при которой шапка и подвал подстраиваются под первую колонку там не показано=(

вот, код, намутил, без поддержки пока IE7 и ниже

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru" dir="ltr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>index</title>
	<style type="text/css">
	  html, body {width: 100%; height: 100%}
	  body {margin: 0; padding: 0; background: #fff}
	  #page {display: table; width: 100%; height: 100%}
	  #header {display:table-header-group; background: pink}
	  #content {display:table-row-group; background: #6ab; width: 100%}
	  #footer {display:table-footer-group; background: #93c}
	  .table-cell {display: table-cell}
	  #header .table-cell,
	  #footer .table-cell {height: 1px}
	  #leftColumn {width: 30%; min-width: 150px; background: gold}
	  #centerColumn {width: 50%; background: #bca}
	  #rightColumn {width: 20%; min-width: 100px; background: #7af}

	</style>
</head>
<body>
	<div id="page">
		<div id="header">
			<div class="table-cell">
				header
			</div>
		</div>
		<div id="content">
			<div id ="leftColumn" class="table-cell">
				left
			</div>	
			<div id ="centerColumn" class="table-cell">
				center
			</div>
			<div id ="rightColumn" class="table-cell">
				right
			</div>			
		</div>
		<div id="footer">
			<div class="table-cell">
				nogBAJI HAX
			</div>		
		</div>
	</div>
</body>
</html>

можешь что-нибудь подсказать, колонки должны быть от шапки до футера(важно)! Поискал, нашёл свойство column-span, но думаю и объяснять нечего=)

psywalker · December 10, 2009

экспрешн, как потом выяснилось, надо еще доработать — для IE7 использовать document.body, как там, а для IE6 — document.documentElement)

Это тебе наводка

Я сам не пробовал, расскажешь потом

Yahoo! · December 10, 2009

Если честно, из этой строки

экспрешн, как потом выяснилось, надо еще доработать — для IE7 использовать document.body, как там, а для IE6 — document.documentElement)

я ничего не понял =) я в экспрэшнах нуб нубком

походу когда замутю, на хабре статью напишу=)))) по универсальному каркасу=)))

psywalker · December 10, 2009

походу когда замутю, на хабре статью напишу=)))) по универсальному каркасу=)))

Не вздумай этого делать, Хабровец ты наш, эти приёмы как раз из статьи SelenITа, которая УЖЕ запостена на Хабре

Yahoo! · December 11, 2009

=) а я расскажу не про авто-подвал, а про колонки которые растянуты от шапки до подвала=) кстати это походу 6-ой способ одинаковых колонок

но здесь надо мне кажется обёртками (без display: table-cell)

х3 короче, попробую к сегодняшнему вечеру сделать

и вообще я пошутил=))

Yahoo! · December 11, 2009

Всё же придётся на чистых таблицах сделать=(

psywalker · December 11, 2009

Всё же придётся на чистых таблицах сделать=(

Вот и запости таблицу тада на Хабре

Yahoo! · December 11, 2009

Чё улыбашься?=)))

Самому не интересно решить эту задачу дивами, или знаешь что нереал?

psywalker · December 11, 2009

Чё улыбашься?=)))
Самому не интересно решить эту задачу дивами, или знаешь что нереал?

На чистом CSS с резиновым подвалом не реал :rolleyes:

Yahoo! · December 11, 2009

Тогда верстальщики поймут меня, когда увидят в коде таблицу=)

вроде в HTML5 + CSS3 можно спокойно реализовать задуманное

Yahoo! · December 13, 2009

слушай, а без чистого как сделать??=)

Edited December 13, 2009 by Yahoo!

psywalker · December 13, 2009

слушай, а без чистого как сделать??=)

Я не владею JS

Yahoo! · December 13, 2009

Ты мне кстати как-то давал экспрешн, но он в ие7 нормально работал, а в ие6 напрочь ломал вёрстку, вернее вытягивал контент на бесконечную высоту.

psywalker · December 13, 2009

Ты мне кстати как-то давал экспрешн, но он в ие7 нормально работал, а в ие6 напрочь ломал вёрстку, вернее вытягивал контент на бесконечную высоту.

Даа, было дело. height: expression(document.body.clientHeight+'px');

Yahoo! · December 13, 2009

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

hf3 · December 13, 2009

height: expression(screen.availHeight+'px');

вот так попробуй.

psywalker · December 13, 2009

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

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

height: expression(screen.availHeight+'px');
вот так попробуй.

А что это означает дословно?

Yahoo! · December 13, 2009

Простите за нубство, у него там такая строка

expression(document.body.offsetHeight - offsetParent.getElementsByTagName('thead')[0].getElementsByTagName('div')[0].offsetHeight-offsetParent.getElementsByTagName('tfoot')[0].getElementsByTagName('div')[0].offsetHeight+'px'

и как сюда приписать

expression(screen.availHeight+'px') ?

Yahoo! · December 14, 2009

psywalker ну что там, кстати, можно и в гугл меня отправить=))), я там искал ничего не нашёл.

psywalker · December 14, 2009

psywalker ну что там, кстати, можно и в гугл меня отправить=))), я там искал ничего не нашёл.

Я не знаю что там, так как не владею JS.

Sign In

display: table для ослов

Question

Link to comment

Share on other sites

34 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