А то все другие решения только критикую. :D
Классика-шапка ,футер ,три колонки.
Фича в прибитом футере с растяжкой и простой верстке.
Работает везде,на сафари не тестил.
Всякие хаки и костыли для кроссбраузерности футера заменяются двумя строчками яваскрипта (как же мне без него :) ).DOM работает гораздо адекватнее ,чем интерпретация CSS различными браузерами.
Принцип очень простой,сравнивается размер окна и высота документа,
если документ меньше окна,устанавливаем высоту #page с учетом высоты футера и шапки ,в противном случае ничего не делаем.
В данном случае футер 50px ,шапка 200px.
Любая колонка может подвинуть футер.По желанию можно добавить\убрать колонки.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
*{margin:0;padding:0;}
body{
margin-left:50%;
}
.wrap{
margin-left:-450px;
}
.header{
width: 900px;
height: 200px;
overflow:hidden;
background-color: #ffff66;
position:relative;
}
#page{
width: 900px;
height: auto;
background-color: #ff66FF;
display:inline-block;
position:relative;
}
.left{
width: 150px;
background-color: #66ff66;
display:block;
float:left;
}
.content{
width:650px;
background-color: #66ffff;
display:block;
float:left;
}
.right{
width: 100px;
background-color: #66ff66;
display:block;
float:left;
}
.footer{
background-color: #6666FF;
height: 50px;
width: 900px;
display:block;
position:relative;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">шапка</div><!--header-->
<div id="page" >
<div class="left">
левое меню
</div>
<div class="content">
контент
</div>
<div class="right">
правое меню
</div>
</div>
<div class="footer"></div><!--footer-->
</div>
<script>
if(document.body.clientHeight<document.documentElement.clientHeight){
document.getElementById('page').style.height=(document.documentElement.clientHeight-250)+'px';
}
</script>
</body>
</html>
<!-- Желаю всем успехов и поменьше танцев с бубном bodja-->
Спустя 3 минуты, 14 секунд (7.05.2012 - 09:35) TranceIT написал(а):
Не пойму чего вы так за эти шаблоны уцепились? В инете их пруд пруди на любой вкус и цвет...
Резина\нерезина, с каким хочешь позиционированием... С float и без...
Резина\нерезина, с каким хочешь позиционированием... С float и без...
Спустя 9 минут, 17 секунд (7.05.2012 - 09:44) bodja написал(а):
TranceIT
Ну я думаю понятно,что это несколько готовый шаблон ,а каркас для него.
Нечто подобным вы сами и пользуетесь,слизывая платные картинки шаблонов.
Ну я думаю понятно,что это несколько готовый шаблон ,а каркас для него.
Нечто подобным вы сами и пользуетесь,слизывая платные картинки шаблонов.
Спустя 10 минут, 34 секунды (7.05.2012 - 09:55) TranceIT написал(а):
| Цитата (bodja @ 7.05.2012 - 09:44) |
| Ну я думаю понятно,что это несколько готовый шаблон ,а каркас для него. |
Я каркас и имел ввиду...
Спустя 14 секунд (7.05.2012 - 09:55) sharki написал(а):
Спустя 18 минут, 5 секунд (7.05.2012 - 10:13) bodja написал(а):
sharki&TranceIT
Посыпаю голову пеплом
Чето недогадался поискать подобное.
Посыпаю голову пеплом
Чето недогадался поискать подобное.
Спустя 22 минуты, 39 секунд (7.05.2012 - 10:36) redreem написал(а):
| Цитата |
| http://csstemplater.com/ |
| Цитата |
| Посыпаю голову пеплом |
неторопись
делаем настройки:
и в опере видим:
Спустя 1 минута, 15 секунд (7.05.2012 - 10:37) sharki написал(а):
хм) буду знать
Спустя 1 час, 20 минут, 19 секунд (7.05.2012 - 11:57) sebastjan написал(а):
Все эти генератору для тех у кого нет кнопочки , включать голову.
Подобные советы использовать генераторы я лично считаю вред и только.
Ни разу в комментариях даже и не всплыло обсуждения метода.
Пофиг всем, холява рулит.
В своём варианте я старался показать как достичь вечно растянутой колонки по вертикали без подкладок эмитирующих целостность колонки с цветом.
Как то криво написал, но наверное кто верстает поймёт.
Кто не верстает , лучше спросить чем сказать то о чём пока не знаешь чем посоветовать генератор.
Глупо в ветке вёрстка обсудать не вёрстку а программы делающие за тебя эту вёрстку.
Бодя, есть некоторый недостаток у тебя в макете,
Подвал в ИЕ6 не внизу.
Но это частности - и это решить не проблемма.
-колонки не тянутся по вертикали, это решают пока что двумя способами
-один - это дополнительная обёртка с цветом и растянутая по высоте а второй это тот самый метод который я использовал с отрицательными маргинами и падингами.(есть ещё один-использовать картинку для заливки БГ-фона, но это не расматриваю, так считаю кривым способом, если вдруг надо изменить ширину, так надо делать новую картинку)
В случаи с обёрткой - происходит имитация, колонка с контентом сама по себе прозрачная и тянется по по готовому фону.
В случаи с отрицательными маргинами - тоже не всё гладко, мой пример, заворачивая конструкцию клонок в конструкцию в шаблон с прижатым подвалом приходится использовать отдельный стиль для ИЕ. ну и грабли с ИЕ6 пока есть благодаря оверлоу.
Ну в общем цель практически достигнута.
Подобные советы использовать генераторы я лично считаю вред и только.
Ни разу в комментариях даже и не всплыло обсуждения метода.
Пофиг всем, холява рулит.
В своём варианте я старался показать как достичь вечно растянутой колонки по вертикали без подкладок эмитирующих целостность колонки с цветом.
Как то криво написал, но наверное кто верстает поймёт.
Кто не верстает , лучше спросить чем сказать то о чём пока не знаешь чем посоветовать генератор.
Глупо в ветке вёрстка обсудать не вёрстку а программы делающие за тебя эту вёрстку.
Бодя, есть некоторый недостаток у тебя в макете,
Подвал в ИЕ6 не внизу.
Но это частности - и это решить не проблемма.
-колонки не тянутся по вертикали, это решают пока что двумя способами
-один - это дополнительная обёртка с цветом и растянутая по высоте а второй это тот самый метод который я использовал с отрицательными маргинами и падингами.(есть ещё один-использовать картинку для заливки БГ-фона, но это не расматриваю, так считаю кривым способом, если вдруг надо изменить ширину, так надо делать новую картинку)
В случаи с обёрткой - происходит имитация, колонка с контентом сама по себе прозрачная и тянется по по готовому фону.
В случаи с отрицательными маргинами - тоже не всё гладко, мой пример, заворачивая конструкцию клонок в конструкцию в шаблон с прижатым подвалом приходится использовать отдельный стиль для ИЕ. ну и грабли с ИЕ6 пока есть благодаря оверлоу.
Ну в общем цель практически достигнута.
Спустя 8 минут, 41 секунда (7.05.2012 - 12:06) johniek_comp написал(а):
я юзаю twitter bootstrap и не жалуюсь
Спустя 48 минут, 18 секунд (7.05.2012 - 12:54) sebastjan написал(а):
johniek_comp
Уверяю, надёжней юзать голову.
Уверяю, надёжней юзать голову.
Спустя 2 минуты, 44 секунды (7.05.2012 - 12:57) sharki написал(а):
| Цитата |
| Уверяю, надёжней юзать голову. |
А кто мешает ускорить разработку + не париться насчет кроссбраузерности, при этом включая голову только на реально поставленные задачи?
Я вот например ненавижу верстать, это очень уныло...
Спустя 8 минут, 1 секунда (7.05.2012 - 13:05) bodja написал(а):
sebastjan
Подвал в ИЕ6 внизу,возможно у тебя не идет ,так как не разрешил выполнить скрипт локально.
Колонку можно тянуть любую или все ,просто цели не ставил.
Заместь в скрипте с ИД page.
document.getElementById('page').style.height
пишем нужный ИД колонки ,если нужно несколько ,присваиваем тоже остальным.
Подвал в ИЕ6 внизу,возможно у тебя не идет ,так как не разрешил выполнить скрипт локально.
Колонку можно тянуть любую или все ,просто цели не ставил.
Заместь в скрипте с ИД page.
document.getElementById('page').style.height
пишем нужный ИД колонки ,если нужно несколько ,присваиваем тоже остальным.
Спустя 3 минуты, 54 секунды (7.05.2012 - 13:09) johniek_comp написал(а):
sebastjan
Ты как профессиональный дизайнер, за сколько бы такую штуку сделал? У меня это заняло 10 минут, может больше
Ты как профессиональный дизайнер, за сколько бы такую штуку сделал? У меня это заняло 10 минут, может больше
Спустя 1 минута, 41 секунда (7.05.2012 - 13:11) sebastjan написал(а):
sharki
Ни кто не мешает ускорять разработку.
Если не любишь верстать , так и ни кто не заставляет этого делать, спокойно занимаешься своим делом.
Это аналогично НЕО Программистам РНР, скачал скрипт готовый из инета, на форумах надыбал куда его вставить и доволен до небес, называя себя супер кодером РНР.
Ни кто не мешает ускорять разработку.
Если не любишь верстать , так и ни кто не заставляет этого делать, спокойно занимаешься своим делом.
Это аналогично НЕО Программистам РНР, скачал скрипт готовый из инета, на форумах надыбал куда его вставить и доволен до небес, называя себя супер кодером РНР.
Спустя 1 минута, 26 секунд (7.05.2012 - 13:12) bodja написал(а):
johniek_comp
Нарываешся
Сейчас Себастьян тебе выдаст такое ,что ты за неделю не сделаеш.
Нарываешся
Сейчас Себастьян тебе выдаст такое ,что ты за неделю не сделаеш.
Спустя 12 секунд (7.05.2012 - 13:12) sebastjan написал(а):
johniek_comp
Я не называл и не называю себя профи дизайнером.
Во первых, не картинку а код весь выкладвай.
Вот и будем разбираться.
Не в минутах дело.
Я не называл и не называю себя профи дизайнером.
Во первых, не картинку а код весь выкладвай.
Вот и будем разбираться.
Не в минутах дело.
Спустя 2 минуты, 48 секунд (7.05.2012 - 13:15) sebastjan написал(а):
Я ещё быстрее могу сделать скрин .
Что там у тебя под скрином? Можно только догадываться
Код в студию.
Полезней будет разобрать по косточкам.
.Что там у тебя под скрином? Можно только догадываться
Код в студию.
Полезней будет разобрать по косточкам.
Спустя 2 минуты, 18 секунд (7.05.2012 - 13:18) sharki написал(а):
sebastjan
Понятна твоя точка зрения. А ты копишь все свои наработки, чтобы потом брать как каркасы?
Понятна твоя точка зрения. А ты копишь все свои наработки, чтобы потом брать как каркасы?
Спустя 35 секунд (7.05.2012 - 13:18) sebastjan написал(а):
bodja
Сам подвал в низу, но под подвалом есть пробел примерно в 30рх.
Сам подвал в низу, но под подвалом есть пробел примерно в 30рх.
Спустя 7 минут, 2 секунды (7.05.2012 - 13:25) johniek_comp написал(а):
sebastjan
Мне не в западло(извините за жаргон, других слов не знаю) выложить
здесь
вторая страница при нажатии на кнопку регистрация сверху...
и вот чем плох twitter bootstrap?
Мне не в западло(извините за жаргон, других слов не знаю) выложить
здесь
вторая страница при нажатии на кнопку регистрация сверху...
и вот чем плох twitter bootstrap?
Спустя 1 минута, 29 секунд (7.05.2012 - 13:27) sebastjan написал(а):
sharki
Как и все нормальные люди, постоянно ищу новое решение, дотачиваю, ищу различные формы для различных вариантов, даже тех с которыми не сталкиваюсь.
Приоритет у меня, это простота, скорость, минимализм и максимальное покрытие броузеров.
А так как сам ещё и малюю, приходиться в совокупности одних с другими знаниями искать золотую середину и искать новые знания.
Диз и вёрстка неразёмные вещи.
Как и все нормальные люди, постоянно ищу новое решение, дотачиваю, ищу различные формы для различных вариантов, даже тех с которыми не сталкиваюсь.
Приоритет у меня, это простота, скорость, минимализм и максимальное покрытие броузеров.
А так как сам ещё и малюю, приходиться в совокупности одних с другими знаниями искать золотую середину и искать новые знания.
Диз и вёрстка неразёмные вещи.
Спустя 2 минуты, 32 секунды (7.05.2012 - 13:29) sebastjan написал(а):
johniek_comp
В ИЕ6 посмотри.
В ИЕ6 посмотри.
Спустя 2 минуты, 59 секунд (7.05.2012 - 13:32) johniek_comp написал(а):
sebastjan
На оф. сайте в документации написано что в IE6 и старой опере не работает. По этому я готов к этому что 1\1500 посетителей моего сайта будут испытывать неудобства.
На оф. сайте в документации написано что в IE6 и старой опере не работает. По этому я готов к этому что 1\1500 посетителей моего сайта будут испытывать неудобства.
Спустя 2 минуты, 49 секунд (7.05.2012 - 13:35) sebastjan написал(а):
Если подробней, то форма криво оформленна, текст в ней пляшет и Сафари и в Лисе.
В Сафари тект в форме срезан под низом в лисе обрублен сверху и с низу.
В Сафари тект в форме срезан под низом в лисе обрублен сверху и с низу.
Спустя 1 минута, 20 секунд (7.05.2012 - 13:36) sharki написал(а):
johniek_comp
Есть дополнения, чтобы работало https://github.com/empowering-communities/Bootstrap-IE6
Есть дополнения, чтобы работало https://github.com/empowering-communities/Bootstrap-IE6
Спустя 4 минуты, 59 секунд (7.05.2012 - 13:41) sebastjan написал(а):
В ИЕ7 знаю что не работаеют шадов для текста как на кнопках, в ИЕ7-8 не могу посмотреть.
Всё что могу расматривать только форму, таблы они и в африки таблы.
Правда я бы по другому решал, не вложением Табле в табле а ТБоди использовал бы.
Всё что могу расматривать только форму, таблы они и в африки таблы.
Правда я бы по другому решал, не вложением Табле в табле а ТБоди использовал бы.
Спустя 5 минут, 12 секунд (7.05.2012 - 13:46) sebastjan написал(а):
sharki
Вместо дополнения можно сделать проще, фоновая картинка под поле формы весть будет сущии мелочи.
А текст шадов , фишка красивая но опять ИЕ7 грабли, прикручивать дополнение или мутить кашу слоёв с использованием ИЕфильтров, хрень, лучше уж так и оставить для вебкитовских броузеров.
Вместо дополнения можно сделать проще, фоновая картинка под поле формы весть будет сущии мелочи.
А текст шадов , фишка красивая но опять ИЕ7 грабли, прикручивать дополнение или мутить кашу слоёв с использованием ИЕфильтров, хрень, лучше уж так и оставить для вебкитовских броузеров.
Спустя 18 секунд (7.05.2012 - 13:47) johniek_comp написал(а):
sebastjan
что for означает? мне надо input01 input02 input0n писать?
<label class="control-label" for="input01">
что for означает? мне надо input01 input02 input0n писать?
Спустя 3 минуты, 23 секунды (7.05.2012 - 13:50) bodja написал(а):
johniek_comp
Визуальные редакторы ХТМЛ ,уже давно не секрет.
Я их кучу перепробовал ,начиная с ворда.
Здесь смысл не в скорости ,а в качестве.
sebastjan
У нас точно разные брузеры.
Визуальные редакторы ХТМЛ ,уже давно не секрет.
Я их кучу перепробовал ,начиная с ворда.
Здесь смысл не в скорости ,а в качестве.
sebastjan
У нас точно разные брузеры.
Спустя 1 минута, 4 секунды (7.05.2012 - 13:51) johniek_comp написал(а):
bodja
это не редактор, это css framework
это не редактор, это css framework
Спустя 2 минуты, 16 секунд (7.05.2012 - 13:54) bodja написал(а):
johniek_comp
Куда катится мир
Куда катится мир
Спустя 25 секунд (7.05.2012 - 13:54) sebastjan написал(а):
johniek_comp
Извени ,немного не в тему я смотрел только общую страницу с таблицей.
Та что под регистрацию, плохо.
У тебя такая дыра между текстом и полями что даже не разбирающийся юзер скажет, куда и что?
При том что колонна полей смещенна от центра в право.
модульной сетки нет.
Дизайнер предъявит своё ФУ.
Клиент будет недоволен.
Извени ,немного не в тему я смотрел только общую страницу с таблицей.
Та что под регистрацию, плохо.
У тебя такая дыра между текстом и полями что даже не разбирающийся юзер скажет, куда и что?
При том что колонна полей смещенна от центра в право.
модульной сетки нет.
Дизайнер предъявит своё ФУ.
Клиент будет недоволен.
Спустя 48 секунд (7.05.2012 - 13:55) sebastjan написал(а):
Выкини свой редактор, включи голову и начни с модальной сетки.
Спустя 7 минут, 53 секунды (7.05.2012 - 14:03) johniek_comp написал(а):
| Цитата |
| и начни с модальной сетки. |
я не умею
Спустя 7 минут, 56 секунд (7.05.2012 - 14:11) sebastjan написал(а):
Сегодня не умеешь, завтра будешь уметь.
Было бы желание.
Было бы желание.
Спустя 1 час, 9 минут, 25 секунд (7.05.2012 - 15:20) alexbel2404 написал(а):
http://960.gs/ а я этим пользуюсь) оч нравится)