Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках
← Перечитать статью | Оставить комментарий ↓
DokSna написал 15-02-2008 21:31
Прикольна, только я ничего не понял гы :)
паха написал 24-01-2008 20:51
ну хоть где-то нормально обьяснили
Nervus написал 07-11-2007 00:50
Хорошая и очень информативная статья. Мне она помогла понять те нюансы, которые я рань ше не понимал в данном типе верстки. огромное спасибо автору)
Yura написал 22-05-2007 14:17
Статья писалась оч. давно, так что не совсем помню, что там и как. Но, абсолютное позиционирование ТОЛЬКО у левой и правой колонок навигации. Столбец основного содержания не absolute как раз.
Artem написал 22-05-2007 14:11
Создал основной контейнер с относительным позиционированием.Поместил туда все остальные блоки с абсолютн позиц.Но основной контейнер при этом не растягиваеся за остальными, а остается равным h=1px.В чем причина?
BLISS написал 05-08-2006 01:04
Yura давай теперь еще напиши про то как собрать сайт с помощью PHP и я вообще буду счастлив :)
Dop Popson написал 26-07-2006 08:22
Макет галимый. Достаточно посмотреть как его плющит (IE6, firefox 1.5, Opera) при уменьшении размеров окна. На пионерский хоумпейдж покатит, а так делать серьезный сайт стыдно.
Ireruss написал 21-06-2006 07:45
Что будет если броузер не поддерживает javascript или они отключены?
1) вместо определения IE5 скриптом,
можно просто подключить таблицу стилей диррективой @import. IE5 ее не поймет и пропустит. Соответственно, стили для IE5 можно прописать в <link>.
2) определять длинну колонки с контентом не надо будет, если вынести footer из main и поставить его после main.
Ну или если не выносить — извращаться с длинными картинками в background'ах main'а
Yura Zemskov написал 06-03-2006 21:50
Не совсем понимаю, что значит "независимой". Возможно, вам стоит просто задать в css высоту в пикселях.
Роман написал 06-03-2006 21:43
Подскажите как сделать среднюю колонку независимой от содержимогО?
Yura Zemskov написал 28-02-2006 15:26
В статье допущена ошибка, давно надо поправить, но времени нет совершенно, поэтому ограничусь комментариями.
Когда писал статью, использовал Windows 98 и Internet Explorer 5 RC2 (или beta2 — сейчас не вспомню) — там расчет ширины блока производится, как описано в статье. Однако в финальной версии IE5 (тестировалось в Win98 SE, Win2000 SP4) есть изменения — width в нем означает ширину блока, включая(!) margin.
Т.е. в статье написано:
"IE5 считает, что width определяет ширину всей видимой части блока (видимая часть — всё кроме margin), а на содержимое блока остается результат вычитания из width значений padding и border. Значит, надо указать ему неправильное значение width для всех блоков по формуле — занимаемое пространство минус margin-left минус margin-right."
Следует читать :)
"IE5 считает, что width определяет ширину всего блока, а на содержимое блока остается результат вычитания из width значений margin, padding и border. Значит, надо указать ему неправильное значение width, равное всему пространству, занимаемому блоком в ширину."
rulon написал 01-11-2005 22:25
>>Не знаю, мне кажется, что принцип я все-таки выбрал неправильный
В одном или разных файлах скрипты и стили — это детали… Главный принцип, который я извлек из данной темы, состоит в том, что таблицы надо использовать только для табличных данных.
А для верстки есть более красивые средства, чем сидеть высчитывать количество colspan, rowspan.
Тоже подумаю на тему универсального шаблона.
>>я бы даже не стал заморачиваться на тему бага с панелью поиска
Может быть.
Интересная имхо цитата из FAQ фидошной эхи об HTML:
>1.21. Каким уродам нужно что-то еще, кроме замечательного Микрософт
>Интернет
>Эксплорера? "
Ответ:
"По статистике, чем выше профессиональный и культурный уровень юзера, тем реже
он использует MSIE. И затачивая свои странички только под эту бродилку, вы
теряете пусть не самую большую, но весьма влиятельную аудиторию.
"
Yura Zemskov написал 01-11-2005 10:07
Не знаю, мне кажется, что принцип я все-таки выбрал неправильный. Надо переделывать шаблон полностью — выносить JS в отдельный файл. А — главное — CSS + HTML писать только валидный, а вот потом уже подсовывавть CSS-файлы, исправляющие ошибки в IE 5, 5.5, 6 — благо там у каждого свои заморочки.
А если переделывать шаблон, то и статью надо переделывать. Только вот раньше чем через пару месяцев я не соберусь. Стыдно, каюсь…
PS и сугубо личное: я бы даже не стал заморачиваться на тему бага с панелью поиска в FireFox — не думаю, что он будет встречаться у многих посетителей (хотя, если ваш сайт для фаной Firefox…), иногда проще забить. Всем не угодишь.
rulon написал 31-10-2005 21:26
>>>PS мда… сдается мне, что статью надо переписывать с учетом текущих найденных ошибок.
Надо чтобы кто-то еще потестил, может это какая-то моя личная кривизна рук или других органов.
:-)
Yura Zemskov написал 30-10-2005 17:45
С onload вы правы, что-то я не подумал об этом событии док-та и просто вставил код вниз страницы.
PS мда… сдается мне, что статью надо переписывать с учетом текущих найденных ошибок.
rulon написал 30-10-2005 10:44
заметил еще одну неприятную штуку.
Если в Файрфоксе включена внизу панель поиска (которая CTRL+F), то не хватает полосы прокрутки, чтобы добраться до самого низа страницы. Эта панель занимает часть окна.
Пока еще не разобрался, может это вследствие моих "доработок" :-)
P.S. Это проявляется, если панель поиска была включена до открытия страницы. Если после — то все помещается. Если ее закрыть, затем отобразить — также все нормализуется.
rulon написал 30-10-2005 07:59
поместил данный javasrcipt в функцию обработчика события onload тега body.
стало все нормально.
имхо событие это наступает после завершения вывода страницы, т.е. когда установились все размеры.
Yura Zemskov написал 23-10-2005 14:10
>>> Должен быть универсальный шаблон, который не зависит от контента.
Кхм… Ну раз сегодня мы практикуемся в высоких стремлениях к идеалу, то проще всего убрать из CSS "Свойство overflow: hidden; необходимо, чтобы убрать мелкий баг IE6. Internet Explorer 6 под управлением Windows XP с экранной XP темой (в случае классической темы Windows все нормально)" (и далее по тексту статьи…).
Т.к. вообще-то этого свойства быть не должно в нормальном CSS — он лишь фиксит баг IE6, а JS-код фиксит проблему, которую создает overflow: hidden; для блока. Вот такие нагромождения.
Т.е. убираем overflow и JavaScript-код scrollHeight — и все будет правильно (с точки зрения спецификаций), красиво, но будет немного глючить в IE6 с XP-темой.
PS это я к тому, что пока жив "Internet Explorer 5, да и 6" невозможен идеальный, правильный CSS-шаблон. Будет куча проблем с CSS в любом случае.
rulon написал 23-10-2005 12:41
>>>А вы не пробовали поступить самым верным способом……skip……
Пробовал. имхо это не совсем то…
Должен быть универсальный шаблон, который не зависит от контента.
Наша же идеология отделить верстку от содержимого.
Это всё юзаю примерно так:
<div id='center'>
<?php echo $CenterWin ?>
</div>
<div id='left'>
<?php echo $LeftWin ?>
</div>
<div id='footer'>
<?php echo $FooterWin ?>
</div>
Yura Zemskov написал 23-10-2005 10:04
Rulon, действительно, если картинки генерируются на лету и подгружаются к странице позже, то такая ситуация, думаю, вполне возможна.
А вы не пробовали поступить самым верным способом — вообще не использовать этот JS-код выравнивания высоты? Если у вас много картинок в content, то оно и так, скорее всего, будет по высоте больше menu. Или нет?
rulon написал 22-10-2005 21:04
Да… забыл.
В IE6 почему-то не получается повторить данный эффект.
rulon написал 22-10-2005 21:00
Заметил еще один побочный эффект от приведенного javascript.
у меня в теле content куча картинок, которые генерятся на лету с помощью php библиотеки GD.
получается, что javascript выполняется раньше завершения вывода картинок.
Наблюдается следующее явление.
До генерации картинок раздел контент 100px. Раздел Left, скажем 200рх. ЖабаСкрипт устанавливает высоту среднего раздела в 200рх.
Когда завершается вывод картинок, раздел content становится 1000рх. но уже поздно :-)
высота остается 200рх.
такое наблюдается, если я непосредственно набираю URL руками. после того, как нажимаю в браузере refresh — становится всё нормально.
Браузер Файрфокс.
Поборол установкой атрибута height для каждой картинки.
Вот…
Или может это я сам заглючил? :-)
Алексей написал 14-09-2005 13:04
Статья конечно хорошая, ног так нельзя делать, в причину того что старые браузеры и некоторые из новых не понимают блочную вёрстку css.
Земсков Юрий написал 27-08-2005 18:42
Небольшое дополнение к статье:
---------------------------------------------------------
Свойство overflow: hidden; необходимо, чтобы убрать мелкий баг IE6. Internet Explorer 6 под управлением Windows XP с экранной XP темой (в случае классической темы Windows все нормально) считает, что страница не помещается полностью в окно браузера и добавляет полоску горизонтальной прокрутки. Прокручивается всего 1–2 пикселя, видимо XP-тема увеличивает ширину элементов интерфейса браузера, но он (браузер) этого понять не в состоянии…
Так или иначе, overflow: hidden; указывает, что содержимое, которое выходит за границы контейнера (жизненный пример — очень длинное слово в узком CSS блоке), обрезается и пользователю не предоставляется возможности (полос прокрутки, например) это содержимое просмотреть. В нашем случае контейнером является блок main, шириной в 100% окна браузера, а содержимым — вложенные блоки.
---------------------------------------------------------
Это свойство хоть и убирало чУдный баг в IE 6 с экранной темой XP, но само тоже можно доставить немало неприятностей. А именно — если средняя колонка с основным содержимым (<div id="content">) была по высоте *меньше* боковых меню, то вся страница обрезалась по ее высоте.
Чтобы исправить это, необходимо вписать в конце страницы (перед закрывающим </body>) следующий JavaScript код. Этот код в случае, если content меньше по высоте, чем боковые меню, сделает высоту content равной высоте самого длинного меню:
<script type="text/javascript">
// <![CDATA[ <!--
var leftmenuH = document.getElementById('leftmenu').scrollHeight;
var rightmenuH = document.getElementById('rightmenu').scrollHeight;
var contentH = document.getElementById('content').scrollHeight;
if ( (contentH < leftmenuH) || (contentH < rightmenuH) )
{
if (leftmenuH > rightmenuH)
{
var myH = leftmenuH;
}
else
{
var myH = rightmenuH;
}
document.getElementById('content').style.height = myH+"px";
}
// --> ]]>
</script>
PS код будет работать при условии, что вы не меняли названия блоков — leftmenu, rightmenu, content.
Yura Zemskov написал 22-08-2005 17:37
Jackal,
Таблица не избавит в данном случае ни от position: absolute, ни от багов IE5.
Она, возможно, может помочь от бага IE6 в Win XP с XP-темой (растяжка экрана на 1 пиксель по горизонтали), но я не проврял :)
Jackal написал 22-08-2005 12:04
Исходя из названия статьи — CSS верстка сайта — все отлично. Если же вообще говорить о верстке — то, наверное, можно подумать об использовании внешней таблицы (дабы избавиться от position:absolute, а также от багов IE5). Плюсы — не надо яваскрипта для подгружания ie5.css, как и не надо самого стиля ie5.css
Вооот а так — все отлично — кратко, информативно, доступно (понятно т.е.).
Strori написал 03-07-2005 07:22
Хорошая статья. Спасибо. Именно так и надо начинать учить что-то. С подробного примера.
Конверсия: маркетинг плюс контент (45,07%)
Одна из самых актуальных тем, обсуждаемых сегодня в среде лиц, связанных с интернет-коммерцией — это вопросы привлечения на сайт целевых посетителей, которые сводятся преимущественно к поисковой оптимизации. Вместе с тем, все прекрасно понимают: привести человека на сайт недостаточно. Одна из главных проблем, стоящих перед интернет-коммерцией — проблема увеличения конверсии…
CSS: врезка к статье (44,83%)
Мы часто сталкиваемся в журналах и газетах с информационными блоками, которые визуально выделены и по смыслу несколько оторваны от основного содержания. Это не прихоть верстальщика или редактора, эти блоки давно заняли заслуженное место в бумажных изданиях. К сожалению, в интернет-публикациях врезки встречаются нечасто. О создании врезок с помощью CSS как раз и рассказывается в статье…
Версия сайта для печати средствами CSS (39,47%)
Допустим, у нас есть серьезный бизнес-сайт, с серьезными клиентами. А серьезные люди, как правило, консервативны; они больше доверяют бумаге — там и подпись поставить можно и у нотариуса заверить… В общем, непременно нужна качественная версия сайта для печати. Благодаря CSS решение этой задачи не составит большого труда…
Игровые сайты сети (39,29%)
Просто выбрать хорошую игру нелегко. Все они продаются теперь в одинаковых jewel-коробочках от «1C». И, что показательно, на каждой непременно написано, что это эпохальная и величественная игра. В результате можно наткнуться на жуткую самоделку. В общем, без описаний, тестов, обзоров, отзывов на форумах настоящему (да и ненастоящему тоже…) игроману никуда…
Верстка таблиц (38,46%)
В статье рассказывается о тегах, которые могут быть использованы для верстки таблиц. Именно для верстки таблиц, а не для верстки сайтов таблицами. Если вы никогда не использовали ничего кроме <table>, <tr>, <td>, тогда вы узнаете много того, что позволит лучше структурировать табличную информацию и изменять ее визуальное представление…
Геометрия модульной сетки (38,1%)
Обычно веб-дизайнер вкладывает в оформление страницы определенные закономерности. Они могут проявляться в строгой пропорциональности размеров таблиц, форм, в расстояниях между объектами и т.п. Это дисциплинирует структуру сайта. Но HTML-кодер может этого не увидеть. Во избежание осложнений дизайнер должен наглядно описать свой художественный замысел с помощью геометрии модульной сетки…
Программа AddSite Pro 2.0 и регистрация сайта в каталогах (37,89%)
В статье рассказывается о способах регистрации сайта в поисковых системах, а также о программе AddSite Pro 2.0, которая позволяет добавлять сайты в 450+ поисковиков, каталогов и рейтингов Рунета в автоматическом и ручном режиме, существенно сокращая количество монотонной ручной работы и время ее выполнения…
Ответ на статью «Ох уж эти качалки» (37,65%)
Эта публикация — ответ на статью «Ох уж эти качалки» от Qrat. Автор комментирует упомянутую выше статью и рассматривает пару интересных программ-качалок, которые пусть и не очень популярны, но могут таковыми стать…