Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках (99210 просмотров с 28-06-2005 20:48)

← Перечитать статью | Оставить комментарий ↓

Александр написал 22-01-2013 09:00
Хороший материал, которого так мало в сети. Кому интересна данная тематика могу предложить новый и бесплатный курс от Webmyself http://fleads.net/service/subscribe.php?data=e310384b8e38a96fede6f260950ba84a тоже толково все рассказано, только в видеоформате.

jdpecrulwyn написал 16-10-2012 18:44
T1gFEF cseeoptjwbvz

ofoadpjagd написал 15-10-2012 07:01
ByJPDg lqftkxitntxd

Carol написал 14-10-2012 14:07
Slam dunkin like Shaquille O'Neal, if he wrote inofmraitve articles.

Андрей написал 03-01-2012 19:42
Спасибо, разобрался. Видел ещё такой вариант
http://divhack.com/node/18
Может кому пригодится.

berlion написал 09-11-2011 21:36
Спасибо, очень помогло! Лаконично и подробно!

credit loans написал 07-10-2011 21:14
I took my first loans when I was not very old and it supported me a lot. But, I require the small business loan again.

Эээ написал 11-08-2011 19:55
«круто» и остро модно...В IE8 косяки с версткой - нет скрола + при загрузке ($(document).ready(function() {});, хех сколько успел - столько проскролил. Удачи

loan написал 10-07-2011 10:09
All people deserve very good life time and business loans or term loan will make it much better. Because freedom depends on money state.

Владимир написал 06-06-2011 09:53
Спасибо, довольно информативно! Было бы замечательно, если б еще футер был прибит к низу окна или контент был 100% высотой. Как-то так)

Yuriy написал 24-01-2011 23:46
Спасибо за потраченное время. Чувствуется, что автор писал для людей,
а не для SEO

Мдааа написал 12-01-2011 14:25
Тупее этого примера еще ничего не видел...

Александр написал 23-09-2010 23:52
Вроде заработало в Хроме, по-моему ничего не менял :)

Александр написал 23-09-2010 02:38
В Опере, ИЕ, Файрфоксе работает, а в Хроме нет :(
Что делать?

----------------------------------

Если средняя колонка с основным содержимым () была по высоте *меньше* боковых меню, то вся страница обрезалась по ее высоте.

Чтобы исправить это, необходимо вписать в конце страницы (перед закрывающим ) следующий JavaScript код. Этот код в случае, если content меньше по высоте, чем боковые меню, сделает высоту content равной высоте самого длинного меню:


// ]]>


PS код будет работать при условии, что вы не меняли названия блоков — leftmenu, rightmenu, content.

Александр написал 21-09-2010 02:39
Хорошая понятная статья с удачным примером.
Спасибо!

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
Хорошая статья. Спасибо. Именно так и надо начинать учить что-то. С подробного примера.

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

Конверсия: маркетинг плюс контент (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. Автор комментирует упомянутую выше статью и рассматривает пару интересных программ-качалок, которые пусть и не очень популярны, но могут таковыми стать…

 

Разработка сайтов на первом этапе. Концепция и бриф. Итак, вы выбрали подрядчика для разработки вашего будущего сайта и провели с ним предварительные переговоры. Вам может показаться, что самое сложное в процессе разработки сайта уже позади, однако не стоит делать скоропалительных выводов. Именно сейчас для вас начнется кропотливая работа по сбору информации, анализу и принятию решений – финалом…

КРОМЕ юзабилити и дизайна: содержательный сайт Любой веб-ресурс сегодня раздираем двумя мощными силами - на первый взгляд, непреодолимыми и несовместимыми одновременно. С одной стороны, юзабилити и интерфейс требуют простоты, логичности и доступности – в общем, голого функционального минимализма. С другой стороны, развивающиеся веб-стандарты и технологии способствуют расцвету новых подходов к…

Сквозная навигация Сквозная навигация — это система связей (гиперссылок), облегчающих движение пользователя по сайту. Речь идёт о максимально возможном переплетении данных. Кроме того, наличие такой связи характеризует сайт как информативный. Считаю, будет правильным выделить несколько типов связи: связь между сервисами; вокруг события;…

CSS верстка сайта: макет в три колонки Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…

Цветной scrollbar — да или нет… В последнее время, в связи с приходом CSS в массы, особую популярность среди начинающих webmaster'ов получила возможность изменять цвет scrollbar'а окна браузера. Эта функция привлекла людей своей простотой, и нетребовательностью в знании языка. Все что остается сделать, это заменить цвета частей scrollbar'а по своему вкусу…

Разработка сайтов на первом этапе. Концепция и бриф. Итак, вы выбрали подрядчика для разработки вашего будущего сайта и провели с ним предварительные переговоры. Вам может показаться, что самое сложное в процессе разработки сайта уже позади, однако не стоит делать скоропалительных выводов. Именно сейчас для вас начнется кропотливая работа по сбору информации, анализу и принятию решений – финалом…