[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Тема- резиновая див вёрстка, три колонки
sebastjan
обещал, вот и выставляю, почти готовый шаблон в три колонки с заливкой цветом колонок и постоянной резины.
Шапка, тело (три колонки с возможностью изменять цвет) независимо от контента всегда на 100% по высоте.
Подвал.
Сама идея не моя, но весьма интересная.
Прошу поэксперементировать, возможно появятся идеи более интересные.


<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
blick-stadt.de</title>
<style
type="text/css">
html, body {min-height: 100% !important;min-height: auto;height: 100%;border: none;}
body {margin: 0;padding: 0;}
.wrapper {
display: block;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
min-width: 800px;
background: yellow;
}
.header {
position: relative;
width: 100%;
height: 140px;
background: cyan;
z-index: 100;
}
.container {
z-index: 5000;
display: block;
height: 1%;
padding: 0 0 50px 0;
}
.content {
margin: 0 170px 0 0;
padding-left: 200px;
}
.column-r{
display: block;
position: absolute;
height: 100%;}
.column-r {
background: #33CC99;
width: 170px;
right: 0;}
.container .column-r{
position: relative;
float: right;
right: 0;
height: auto;
display: inline-block;}

.column-l{
display: block;
position: absolute;
height: 100%;}
.column-l {
background: red;
width: 180px;
left: 0;}
.container .column-l{
position: relative;
float: left;
right: 0;
height: auto;
display: inline-block;}
.footer {
margin: -50px 0 0 0;
height: 50px;
background: #BFF08E;
position: relative;
z-index: 100;
}
.clear, .footer { clear: both; }
</style>
</head>
<body>

<div
class="wrapper">
<div
class="column-l"> </div>
<div
class="column-r"> </div>
<!---------------------------------------->
<div class="header"> <b>Schapka</b> </div>
<div
class="container">
<div
class="column-l"> kolonka-levaja aa a aa a aa aa aaaaa aaa a a aa a a <br></div>
<div
class="column-r">
Бовари, переживает его сам: бессознательное просветляет глубокий синхронический
подход, так Г.Корф формулирует собственную антитезу. Синхронический подход,
согласно традиционным представлениям, образует героический миф, так Г.Корф формулирует
собственную антитезу. Весьма существенно следующее: художественная элита начинает
катарсис, таким образом, все перечисленные признаки архетипа и мифа подтверждают,
что действие механизмов мифотворчества сродни механизмам художественно-продуктивного
мышления. Аксиология вероятна. Элегия свободна. Действительно, художественное
восприятие монотонно диссонирует культовый образ, именно об этом комплексе движущих
сил писал З.Фрейд в теории сублимации. Интеллигенция изящно аккумулирует комплекс
априорной бисексуальности, так Г.Корф формулирует собственную антитезу. Согласно
теории "вчувствования", разработанной Теодором Липпсом, художественное восприятие
имеет импрессионизм, таким образом, сходные законы контрастирующего развития
характерны и для процессов в психике. Художественное опосредование изящно использует
первоначальный эйдос, так Г.Корф формулирует собственную антитезу. Теория наивного
и сентиментального искусства трансформирует социально-психологический фактор,
это же положение обосновывал Ж.Польти в книге "Тридцать шесть драматических
</div>

<div
class="content"> Контент <br>
Переходное состояние начинает персональный психологический
параллелизм, подобный исследовательский подход к проблемам художественной типологии
можно обнаружить у К.Фосслера. Художественное опосредование, в том числе, монотонно
дает статус художника, таким образом, все перечисленные признаки архетипа и
мифа подтверждают, что действие механизмов мифотворчества сродни механизмам
художественно-продуктивного мышления. Флобер, описывая нервный припадок Эммы
Бовари, переживает его сам: бессознательное просветляет глубокий синхронический
подход, так Г.Корф формулирует собственную антитезу. Синхронический подход,
согласно традиционным представлениям, образует героический миф, так Г.Корф формулирует
собственную антитезу. Весьма существенно следующее: художественная элита начинает
катарсис, таким образом, все перечисленные признаки архетипа и мифа подтверждают,
что действие механизмов мифотворчества сродни механизмам художественно-продуктивного
мышления. Аксиология вероятна. Элегия свободна. Действительно, художественное
восприятие монотонно диссонирует культовый образ, именно об этом комплексе движущих
сил писал З.Фрейд в теории сублимации. Интеллигенция изящно аккумулирует комплекс
априорной бисексуальности, так Г.Корф формулирует собственную антитезу. Согласно
теории "вчувствования", разработанной Теодором Липпсом, художественное восприятие
имеет импрессионизм, таким образом, сходные законы контрастирующего развития
характерны и для процессов в психике. Художественное опосредование изящно использует
первоначальный эйдос, так Г.Корф формулирует собственную антитезу. Теория наивного
и сентиментального искусства трансформирует социально-психологический фактор,
это же положение обосновывал Ж.Польти в книге "Тридцать шесть драматических
ситуаций". Шиллер утверждал: биографический метод традиционен. Выявляя устойчивые
архетипы на примере художественного творчества, можно сказать, что художественная
жизнь свободна. Переходное состояние начинает персональный психологический параллелизм,
подобный исследовательский подход к проблемам художественной типологии можно
обнаружить у К.Фосслера. Художественное опосредование, в том числе, монотонно
дает статус художника, таким образом, все перечисленные признаки архетипа и
мифа подтверждают, что действие механизмов мифотворчества сродни механизмам
художественно-продуктивного мышления. Флобер, описывая нервный припадок Эммы
Бовари, переживает его сам: бессознательное просветляет глубокий синхронический
подход, так Г.Корф формулирует собственную антитезу. Синхронический подход,
согласно традиционным представлениям, образует героический миф, так Г.Корф формулирует
собственную антитезу. Весьма существенно следующее: художественная элита начинает
катарсис, таким образом, все перечисленные признаки архетипа и мифа подтверждают,
что действие механизмов мифотворчества сродни механизмам художественно-продуктивного
мышления. Аксиология вероятна. Элегия свободна. Действительно, художественное
восприятие монотонно диссонирует культовый образ, именно об этом комплексе движущих
сил писал З.Фрейд в теории сублимации. Интеллигенция изящно аккумулирует комплекс
априорной бисексуальности, так Г.Корф формулирует собственную антитезу. Согласно
теории "вчувствования", разработанной Теодором Липпсом, художественное восприятие
имеет импрессионизм, таким образом, сходные законы контрастирующего развития
характерны и для процессов в психике. Художественное опосредование изящно использует
первоначальный эйдос, так Г.Корф формулирует собственную антитезу. Теория наивного
и сентиментального искусства трансформирует социально-психологический фактор,
это же положение обосновывал Ж.Польти в книге "Тридцать шесть драматических
ситуаций". Шиллер утверждал: биографический метод традиционен. Выявляя устойчивые
архетипы на примере художественного творчества, можно сказать, что художественная
жизнь свободна. Переходное состояние начинает персональный психологический параллелизм,
подобный исследовательский подход к проблемам художественной типологии можно
обнаружить у К.Фосслера. Художественное опосредование, в том числе, монотонно
дает статус художника, таким образом, все перечисленные признаки архетипа и
мифа подтверждают, что действие механизмов мифотворчества сродни механизмам
художественно-продуктивного мышления. Флобер, описывая нервный припадок Эммы
Бовари, переживает его сам: бессознательное просветляет глубокий синхронический
подход, так Г.Корф формулирует собственную антитезу. Синхронический подход,
согласно традиционным представлениям, образует героический миф, так Г.Корф формулирует
собственную антитезу. Весьма существенно следующее: художественная элита начинает
катарсис, таким образом, все перечисленные признаки архетипа и мифа подтверждают,
что действие механизмов мифотворчества сродни механизмам художественно-продуктивного
мышления. Аксиология вероятна. Элегия свободна. Действительно, художественное
восприятие монотонно диссонирует культовый образ, именно об этом комплексе движущих
сил писал З.Фрейд в теории сублимации. Интеллигенция изящно аккумулирует комплекс
априорной бисексуальности, так Г.Корф формулирует собственную антитезу. Согласно
теории "вчувствования", разработанной Теодором Липпсом, художественное восприятие
имеет импрессионизм, таким образом, сходные законы контрастирующего развития
характерны и для процессов в психике. Художественное опосредование изящно использует
первоначальный эйдос, так Г.Корф формулирует собственную антитезу. Теория наивного
и сентиментального искусства трансформирует социально-психологический фактор,
это же положение обосновывал Ж.Польти в книге "Тридцать шесть драматических
ситуаций". Шиллер утверждал: биографический метод традиционен. Выявляя усто </div>
<div
class="clear"> </div>
</div>
</div>
<div
class="footer"> Прижимающийся футер </div>

</body>
</html>





Спустя 7 часов, 4 минуты, 50 секунд (9.10.2011 - 07:45) imbalance_hero написал(а):
sebastjan
страничку бы в сети выложил... Потестили бы.

Спустя 3 часа, 4 минуты, 52 секунды (9.10.2011 - 10:50) ceil100 написал(а):
min-height: 100% !important;min-height: auto;
эти свойства вообще не имеют смысла
и divам зачем писать display:block;
это и так блочный элемент

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

Обычно этот вопрос решают при помощи картинки шириной с колонку и размноженной по вертикали

Спустя 2 часа, 30 минут, 22 секунды (9.10.2011 - 13:20) ceil100 написал(а):
как вариант, с картинками по бокам
картинка по ширине колонки, размножается по вертикали
это более сложный вариант, есть и проще
полностью валидный,работает во всех браузерах
придуман давно и не мной


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta
charset="UTF-8">
<title></title>
<style
type="text/css">
*{margin:0;padding:0;}
body,html,#wrap{height:100%;}
#wrap{width:960px;margin:auto;background:url(center.png) repeat-y 0 100%;}
#all{min-height:100%;margin-bottom:-50px;background:url(center.png) repeat-y 100% 0;}
#header {width:100%;height:130px;background:#eea32a}
*html
#all {height:100%;}
#footer {height:50px;width:100%;background:#ae24ee;}
#left{float:left;width:200px;}
#right{float:right;width:200px;}
#center{margin:0 200px;}
#content {overflow:hidden;padding:0 0 50px;background:url(center.png) repeat-y 0 100%;}
#in {width:100%;float:left;margin-right:-200px;}
#out {width:100%;float:right;margin-left:-200px;}
</style>
</head>
<body>
<div
id="wrap">
<div
id="all">
<div
id="header">header</div>
<div
id="content">
<div
id="out">
<div
id="in">
<div
id="center">center
</div>
</div>
<div
id="right">right</div>
</div>
<div
id="left">left</div>
</div>
</div>
<div
id="footer">footer</div>
</div>
</body>
</html>

Спустя 3 часа, 49 минут, 52 секунды (9.10.2011 - 17:10) sebastjan написал(а):
Не спорю, код в первом варианте довольно запутан, с лёгкостью можно убрать от туда строк так 20 и результат останеться тот же.
Предлагалось каждому выбрать и поэксперементировать а не получить готовое на блюдичке.
Ваш вариант тоже интересный и мной расматривался ранее, такой трюк с эмитацией колонки с бгфоном по моему на сегодняшний день является самым оптимальным и конечно же оптимальней первого варианта.
Но существенно отличаеться от первого, в первом варианте резиновая по высоте колонка существует реально в вашем - эмитация.
К сожалению див вёрстка в обоих вариантах имеет хаки и называть полностью валидной нельзя.
И что самое печальное - табличный вариант такого макета имееет в проловину легче вес.
Меньше килобайта, не говоря уже о кросброузерности.



Спустя 34 минуты, 2 секунды (9.10.2011 - 17:44) ceil100 написал(а):
Все зависит от задачи которую решаешь
Может кому и пригодится один из вариантов
Кстати можно и проще сделать #in и #out спокойно можно убрать и облегчить верстку, если это так принципиально

Я вообще сторонник простоты
Чем проще путь достижения конечной цели и меньше затрачено усилий, тем эффективней решение
Есть такое понятие: сильное решение.Оно всегда просто

Я думаю нужно смотреть, на то,что вам необходимо в итоге и отсекать все лишнее
А все эти навороты,завитушки и прочии прибамбасы, это только девкам пыль в глаза пускать:)
ну и заказчику, чтобы больше платил

Спустя 19 минут, 31 секунда (9.10.2011 - 18:04) sebastjan написал(а):
Ну если говорить о простоте, тогда я думаю всю эту канетель с дивами при формировании шаблона - можно сразу забыть и перенести див элементы в таблицу ,делая тем самым смешанную вёрстку.
Одна из проблемм с этими дивами - это жостко задавать размер высоты подвалу, а это актуально я думаю, так как часто со временем приходиться вставлять в подвал разные банеры и т.д.. что и поломает подвал.
С табличным вариантом такого не будет.
Ну в общем , как я понимаю к обсуждению пока что никто больше не присоединяется и ваианты не выставляет, подождём. dry.gif







Спустя 1 час, 6 минут, 32 секунды (9.10.2011 - 19:10) ceil100 написал(а):
Проблема в том, что табличная верстка все больше теряет валидность.
И сайты на дивах лучше индексируются поисковиками.
Когда мало контента, таблица не достает, до низа окна.
И многие табличные элементы уже деприкейтед насколько я знаю.
Придет HTML5 и вовсе кисло станет.
Главная проблема в том, что таблица вовсе не так проста, как может показаться.
Огромное количество тров и тдешек, попробуй разберись.
Там где можно обойтись несколькими дивами, приходится городить, кучу кода.
А ведь потом все это нужно будет поддерживать.
И верстка на дивах,гораздо более гибка чем на таблицах, этого тоже не нужно забывать
Наверное можно разделить так: для простого по структуре сайта можно таблицы использовать, чисто информационного, а для сложного по конструкции и расположению элементов на дивах

Вообще интересная тема, можно топик открыть: DIV vs TABLE, за и против...
Посмотреть мнения народа

Спустя 5 минут, 16 секунд (9.10.2011 - 19:15) bulgakov написал(а):
Цитата
Проблема в том, что табличная верстка все больше теряет валидность.
И сайты на дивах лучше индексируются поисковиками.

Да ладно? кто вам такое сказал?
Цитата
И многие табличные элементы уже деприкейтед насколько я знаю.

Посмотрите эту табличку как на ней видно деприкейтед объявлены элементы влияющие на отображение страницы, размеры и формы шрифта, цвета и другое, все то что вынесено в css. А вот таблицы вполне себе не деприкейтед.

Спустя 1 минута, 41 секунда (9.10.2011 - 19:17) ceil100 написал(а):
кстати хак всего один и тот для шестого ишака.
а он уже почил в бозе
так, что можно все-таки сказать, что 100% валидная верстка:)

Спустя 8 минут, 52 секунды (9.10.2011 - 19:26) ceil100 написал(а):
маленько погорячился:)
не элементы
некоторые свойства,то бишь атрибуты которые обычно к таблицам применяют

Спустя 5 минут, 4 секунды (9.10.2011 - 19:31) ceil100 написал(а):
Цитата (bulgakov @ 9.10.2011 - 16:15)
Цитата
Проблема в том, что табличная верстка все больше теряет валидность.
И сайты на дивах лучше индексируются поисковиками.

Да ладно? кто вам такое сказал?


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

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

Спустя 4 минуты, 18 секунд (9.10.2011 - 19:35) bulgakov написал(а):
Цитата
а вы попробуйте просмотреть сайт на таблицах и сайт на дивах, через обычную читалку и поймете разницу.

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

Спустя 2 минуты, 39 секунд (9.10.2011 - 19:38) bulgakov написал(а):
Бот грабит весь текстовый контент сайта, потом на серверах очищается от элементов разметки, потом разбивается по словам, потом происходит морфологический анализ и слова приводятся к своей первой лексической форме, то есть без склонений, потом еще для оптимизации делается индексация, индексация может проходить несколько раз. Ну а дальше уже секретный у каждого поисковика свой - алгоритм оценки релевантности сайта. Табличная и верстка дивами абсолютно никакого влияния на индекс в поисковике не влияет!

Спустя 11 минут, 18 секунд (9.10.2011 - 19:49) ceil100 написал(а):
то есть бессмысленный набор популярных к выдаче слов, по идее должен выдаваться в первую очередь, при таком алгоритме?
но почему то такие сайты быстро вылетают из рейтингов, и обычно насовсем

вы забыли про семантический анализ
а верстка на дивах и дает более осмысленное представление контента

в общем не буду спорить на эту тему, предлагаю открыть новый топик

DIV vs TABLE, за и против...
и там биться biggrin.gif biggrin.gif biggrin.gif

эта тема уже переросла не в обсуждение трехколоночного макета, а во что-то непонятное

Спустя 10 минут, 1 секунда (9.10.2011 - 19:59) sebastjan написал(а):
ceil100
Ну тут небольшое нужно уточнение по поводу ошибок и валидности, если блок шаблона под документ правильно свёрстан таблицей - то проверка на валидаторе пройдёт хорошо.
Можете убедиться

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8"><title>td-verstka</title>
<style
type="text/css">html,body{margin: 0px;padding: 0px;height: 100%;width: 100%;}
table{height: 100%;width: 1100px;}
td{vertical-align: top;}
.kopf{background-color: #0066FF;text-align: center;height: 50px;}
.lv{width: 150px;background-color: #FF6666;}
.pr{width: 150px;background-color: #996633;}
.futer{height: 20px;background-color: #CC0000;}</style>
</head><body>
<table
cellpadding="0" cellspacing="0" border="0" align="center">
<tr><td
class="kopf" colspan="3" height="50">shapka</td></tr>
<tr>
<td
class="lv">kolonka-lev</td>
<td
class="dok">dokument</td>
<td
class="pr">kolonka-prav</td>
</tr>
<tr><td
colspan="3" class="futer">podval</td></tr>
</table></body></html>


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

Спустя 9 минут, 29 секунд (9.10.2011 - 20:09) sharki написал(а):
Вот еще полезный сайт, если влом верстать с нуля сайт, а именно кроссбраузерную структуру

http://csstemplater.com/

Спустя 2 минуты, 35 секунд (9.10.2011 - 20:11) sebastjan написал(а):
Про это

Придет HTML5 и вовсе кисло станет.

Всё заключается в объявлении доктипа.
Так что про то что станет кисло не думаю.

Спустя 1 минута, 5 секунд (9.10.2011 - 20:12) ceil100 написал(а):
Я думаю можно использовать таблицы на своем месте, для таблиц:)
Но сколько людей столько и мнений, и еще это вопрос привычки.
Сишник с пеной у рта будет доказывать, что только си настояий язык, а все остальное, убогие поделки.Каждый смотрит со своей колокольни.
А по мне так, необходимо использовать тот инструмент, который подходит в наибольшей степени для решения текущей задачи.
Потом отложил его в сторону и используешь в следующий раз только когда он понадобится.



Спустя 2 минуты, 49 секунд (9.10.2011 - 20:15) sebastjan написал(а):
sharki
Тестил я этот сайт, достаточно поверхностно всё, не даёт этот сайт резиновой вёрстки дивами
по высоте 100% и привязки колонки с бгфоном в 100% по высоте.
А так, конечно можно побаловаться если в лом что то организовывать самому.



Спустя 1 минута, 29 секунд (9.10.2011 - 20:17) sebastjan написал(а):
ceil100
Всё правильно говоришь.
Всему своё место и время.
Ни кто и нен старается с пеной у рта что то доказывать, просто сравнения.


Спустя 3 минуты, 38 секунд (9.10.2011 - 20:20) ceil100 написал(а):
спор о том что лучше, ни к чему не приведет
скажу по другому:

В инете есть масса красивых,оригинальных и содержательных сайтов на дивах

В инете есть масса содержательных сайтов на таблицах
Покажи мне хоть один по настоящему красивый?

Зачем верстать на таблицах, если они не гибкие, громоздкие, их неудобно поддерживать и т.д и т.п?
Ну да есть у них какие-то преимущества перед дивами, но недостатки перевешивают все достоинства
И ведь это не только мое мнение:)
Я думаю их можно использовать при ОЧЕНЬуж специфических требованиях, а все остальное дивы, без вариантов

Спустя 2 минуты, 36 секунд (9.10.2011 - 20:23) ceil100 написал(а):
наверное когда то так же приверженцы фреймов и таблиц спорили меж собой, что лучше:)
время покажет

Спустя 2 минуты, 32 секунды (9.10.2011 - 20:25) sebastjan написал(а):
Цитата
Зачем верстать на таблицах, если они не гибкие, громоздкие, их неудобно поддерживать и т.д и т.п?


уточняю, таблицу использовать только под основной блок.
Всё остальное рамещать в дивах.
Блоки с табличным контентом -размещать в таблице, так как таблицу создать дивами - накладно и громоздко.

Цитата
Покажи мне хоть один по настоящему красивый?


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


Спустя 4 минуты, 4 секунды (9.10.2011 - 20:30) sebastjan написал(а):
про споры фреймов и таблиц не слышал. smile.gif
А вот утверждения что мол на дивах страница быстрее загружаеться - так по мне это блеф.
И то что мол на сервер нагрузка из за того что присутствует таблица- тоже блеф.
Частые аргументы в статьях по див вёрстке

Пока что код табличного макета под страницу весит около 800байт
Код с див вёрсткой того же варианта переваливает за 1,5 Кб в лучшем случаи.

Спустя 3 минуты, 19 секунд (9.10.2011 - 20:33) sebastjan написал(а):
Неплохо бы провести примерные тесты по теме клиентская оптимизация и посмотреть какая нагрузка на броузеры при формировании див или тд страницы.

Спустя 24 минуты, 52 секунды (9.10.2011 - 20:58) imbalance_hero написал(а):
sebastjan
Проигнорировал меня smile.gif

Спустя 4 минуты, 40 секунд (9.10.2011 - 21:02) sebastjan написал(а):
imbalance_hero
Почему?
Если про страничку в сети ?
Я сам уже тестил скорость , естественно проигрывает та страничка в которой кода больше.
Правда речь идёт о микросекундах.


Спустя 34 минуты, 49 секунд (9.10.2011 - 21:37) imbalance_hero написал(а):
sebastjan
я попросил тебя в сеть выложить страничку, чтобы можно было со стороны посмотреть.

Спустя 1 час, 24 минуты, 48 секунд (9.10.2011 - 23:02) sebastjan написал(а):
imbalance_hero
Так код выложен, сейчас нет у меня воозможности на свой сервер выкладывать.
скопируй код и посмотри что к чему.



Спустя 6 часов, 18 минут, 4 секунды (10.10.2011 - 05:20) ceil100 написал(а):
Про скорость загрузки даже не спорю.
Мне кажется быстрее загружается, то что меньше весит
Простая арифметика:)
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.