Две колонки, навигация слева

Влад Мержевич

Одним из наиболее популярных вариантов верстки веб-страниц выступает двухколонный макет, где в левой колонке располагаются ссылки, а в правой колонке — основной контент. Такая схема достаточно традиционна и привычна для пользователей, поэтому также пользуется признанием среди разработчиков (рис. 1).

Рис. 1

Рис. 1. Двухколонный макет с навигацией слева

Создание двух колонок происходит с помощью стилевого свойства float с аргументом left, которое применяется для левой колонки. При этом одновременно следует установить отступ слева для правой колонки, значение которого равно ширине левой колонки плюс расстояние между ними (пример 1).

Пример 1. Создание двух колонок

#leftcol { /* Левая колонка */
float: left; /* Обтекание справа */
width: 200px; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
margin-left: 225px; /* Отступ слева */
}

Приведенный способ создания колонок хорош тем, что ширину первого слоя можно задавать как в пикселах, так и процентах. При этом поменяются только значения параметров width и margin-left (пример 2).

Пример 2. Ширина колонки в процентах

#leftcol { /* Левая колонка */
float: left; /* Обтекание справа */
width: 20%; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
margin-left: 21%; /* Отступ слева */
}

Окончательный вариант создания макета приведен в примере 3.

Пример 3. Полный листинг

<!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=windows-1251" />
<title>Байки из склепа</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
margin: 0; /* Отступы для браузера IE */
padding: 0; /* Отступы для браузера Firefox */
}
h1 {
font-size: 36px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
margin: 0; /* Убираем отступы */
color: #fc6; /* Цвет текста */
}
h2 {
margin-top: 0; /* Убираем отступ сверху */
}
#head { /* Верхний блок */
background: #0080c0; /* Цвет фона */
padding: 10px; /* Поля вокруг */
}
#menu { /* Левая колонка */
float: left; /* Обтекание справа */
border: 1px solid #333; /* Параметры рамки вокруг */
width: 200px; /* Ширина колонки */
padding: 5px; /* Поля вокруг текста */
margin: 10px 10px 20px 5px; /* Значения отступов */
}
#menu div {
padding: 2px; /* Поля вокруг ссылок */
}
#menu a {
display: block; /* Отображать ссылку как блок */
width: 190px; /* Ширина ссылки для браузера IE */
padding: 2px; /* Поля вокруг ссылок */
margin: 1px; /* Отступы вокруг */
font-size: 90%; /* Размер текста */
text-decoration: none; /* Убираем подчеркивание текста */
}
#menu a:hover {
background: #faf3d2; /* Цвет фона */
border: 1px dashed #634f36; /* Добавление пунктирной рамки */
margin: 0; /* Убираем поля */
}
#content { /* Правая колонка */
margin: 10px 5px 20px 225px; /* Значения отступов */
padding: 5px; /* Поля вокруг текста */
border: 1px solid #333; /* Параметры рамки */
}
#line {
border-bottom: 1px groove #333; /* Линия между ссылками */
}
#foot { /* Нижний блок */
background: #333; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
clear: both; /* Отменяем обтекание */
}
</style>
</head>
<body>

<div id="head">
<h1>Байки из склепа</h1>
</div>
<div id="menu">
<div><a href="link1.html">Все байки</a></div>
<div><a href="link2.html">Байки по автору</a></div>
<div><a href="link3.html">Байки по теме</a></div>
<div id="line"></div>
<div><a href="link4.html">Популярные разделы</a></div>
<div><a href="link5.html">Последние байки</a></div>
</div>

<div id="content">
<h2>Алтарь демона </h2>
<p>Утром, при ярком солнечном свете, всё выглядело совсем не так и мрачно, как планировалось, а даже наоборот. От свечей остались одни потёки, «кровь» смотрелась как краска, а перья почти целиком разлетелись от ветра. Хорошо сохранились только рисунки мелом, но и они были скорее прикольные, чем злые и загадочные. Дети с неподдельным интересом разглядывали изображения, но без тени тех чувств, которые испытали взрослые ночью при луне.</p>
<p>Тем не менее, оказался один человек, на которого работа произвела большое впечатление, - сторож лагеря. Днём он подошёл к автору «алтаря».</p>
<p>- Ваша работа? - начал сторож, кивая в сторону площади.<br />
- А что такое? <br />
- Ну, как же... Тут кровь..., перья птицы мёртвой..., знаки какие-то страшные нарисованы..., а у вас всё же дети маленькие, они испугаться могут...</p>
</div>

<div id="foot">
Copyright © 2006 Влад Мержевич
</div>
</body>
</html>

При использовании отступов и полей всегда помним, что браузер Firefox устанавливает ширину слоя с учетом параметров width, border, padding и margin, а браузер Internet Explorer за ширину слоя принимает только величину аргумента width. Из-за подобного различия в подходах макет будет отображаться слегка по-разному в этих браузерах.

Статья опубликована: 11.05.2006

Последнее обновление: 04.04.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

Leo

11.05.2006

Влад, подскажите, пожалуйста, для чего Вы используете:
#menu a { width: 190px;} /* Ширина ссылки для браузера IE */

При таком варианте (в небольшом окне IE) при наведении курсора на ссылку меню становится "д?рганым", если можно так выразиться. Одновременно "д?ргается" и текст в <div id="content">.

Если же убрать эту строку из стилей, то все нормализуется...

Влад Мержевич

12.05.2006

Скорее для красоты добавил, чем для практической пользы. Если у стиля ссылки стоит display: block, то ссылка "растягивается" на всю ширину контейнера. А вот IE подобный фокус не понимает, поэтому для него и приходится дополнительно указывать ширину.

Leo

12.05.2006

Влад, вот еще какой вопрос:
если в <div id="content"> создать список (ul иди ol - неважно), высота которого будет больше высоты левого <div id="menu">, то в IE список начинает изгибаться влево...

Влад Мержевич

12.05.2006

Интересное наблюдение насчет списка. Думаю, что "лечится" путем изменения значений отступов у списка. Но сам не пробовал, так что о результате эксперимента желательно сообщить.

Leo

12.05.2006

Попробовал добавить:
ol, ul {
margin-left: 25px;
padding-left: 25px;
}

не помогает...

MaxSt

12.05.2006

Чтобы меню не дергалось надо добавить строку
border: 1px dashed #ffffff;
в menu a - то есть добавить невидимую рамку.

Влад Мержевич

15.05.2006

2Leo:

Экспериментировал со списками, в любом случае IE отображает текст со смещением. Единственный вариант - добавить к селектору UL ширину width: 90%. Но тогда почему-то пропадают маркеры. В общем, не нашел приемлемого решения для этого браузера.

OldFornit

22.05.2006

у меня однажды тоже была проблема со смещением списков в ослике.
Помогло банальная принудительная установка
ul {list-style-position : inside;}
Как вариант - использовать различные отступы для разных браузеров (например, задание отступа с помощью дочерних элементов типа #left > ul . но решение некозявое, ибо не кроссбраузерное)

egor egorrr

29.06.2006

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

боди:

<ul id="mainmenu" class="ssylki">
<li id="cvetsilver"><b>Кое что еще</b></li>
<li><a href="#Протокол" title="Протокол">Протокол:</a></li>
<li><a href="#протокол ARP" title="протокол ARP"><b>ARP</b></a></li>
<li><a href="#протокол BOOTP" title="протокол BOOTP"><b>BOOTP</b></a></li>
<li><a href="#протокол BAP" title="протокол BAP"><b>BAP</b></a></li>
<li><a href="#протокол CCP" title="протокол CCP"><b>CCP</b></a></li>
<li><a href="#протокол CHAP" Title="протокол CHAP"><b>CHAP</b></a></li>
<li><a href="#протокол FTP" title="протокол FTP"><b>FTP</b></a></li>
</ul>

сисс:

#mainmenu{margin-left: 0px;
width: 200px;
border: 1px solid blue;
}

#mainmenu a:hover{
/*color: red;*/
}

.ssylki{
list-style-type: none;
margin: 5px auto 10px auto;
padding: 0;
}

.ssylki li{
padding-bottom: 1px;
}

.ssylki li a{
background: white;
text-indent: 17px;
padding: 3px 1px;
font-size: 12px;
display: block;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #bdbdbd;
color: darkblue
}

#CVETsilver { background: silver}

Владимир к вам вопрос: а можно ли сделать 3-х уровнивае выпадающие меню на основе только сисс, хотябы теоретично.

Alex

15.07.2006

Ну хотя бы как минимум нужен JavaScript, даже для 2-уровневого.

Виталий

18.07.2006

http://www.alistapart.com/articles/horizdropdowns/

Немного JS нужно, но только для IE

Станислав

18.07.2006

Что б не "д?ргался" и текст в <div id="content"> установил в #content
выравнивание
float: center;

Guk

10.09.2006

Мутно это вс?!!

sky

11.09.2006

У меня в IE после head идет menu, а потом, на растоянии высоты menu идет content. Т.е. menu ведет себя как блочный элемент на всю длинну строки, безо всякого обтекания. А в Огнелисе (FireFox) все нормально.

andrew

02.10.2006

> У меня в IE после head идет menu, а потом,
> на растоянии высоты menu идет content. Т.е.
> menu ведет себя как блочный элемент на всю
> длинну строки, безо всякого обтекания.

у меня то же самое в IE

sc@r@bey

05.10.2006

как можно сделать, чтоб можно было менять цвет в левом меню?

Влад Мержевич

05.10.2006

#menu { background: цвет }

Андрей

14.10.2006

Скажите пожалуйста, зачем нужны такие ссылки как к примеру эта:
www.htmlbook.ru/content/?id=107.

Меня интересует больше всего это значение ссылки >>>
/?id=107.

В HTML такое возможно сделать?! Или только допустим на php и в этом роду....

Спасибо!

dysha86@mail.ru (можно сюда для подробного объяснения)....

Влад Мержевич

16.10.2006

id - это уникальный идентификатор статьи, программа получает его из адресной строки браузера, обращается к БД и выводит текст, соответствующий идентификатору. Естественно, HTML такое делать не умеет, используйте PHP или другой серверный язык программирования.

bolt

27.10.2006

У меня вылечилось так

#list{
margin-left: 0px;
width: 98%;
}

<div id="list">
<li>Проектная документация</li>
<li>Технические устройства</li>
<li>Здания</li>
<li>Декларации</li>
<li>Иные документы</li>
</div>

Andrey & Pasha

30.10.2006

`Guk
10.09.2006 Мутно это вс?!! ` - согласны

Nik

03.11.2006

Влад, подскажите, пожалуйста, каким образом под "head" и над "foot" разместить горизнтальные меню?
Насколько я понимаю, к верхнему меню, которое под "head", можно применить и абсолютное позиционирование, а вот как сделать, чтобы нижнее меню плавало вместе с "foot"?

24.11.2006

2 Nik
А в чем проблема то?

стиль для верхнего меню:
div#upmenu {
background: #0080c0; /* Цвет фона */
padding: 10px; /* Поля вокруг */}

код для верхнего меню ставим сразу после закрывающего тега от <div id="head"> </div>:
<div id="upmenu"> ссылка ссылка ссылка </div>

стиль для нижнего меню:
div#btm_menu {
clear: both;
background: #0080c0; /* Цвет фона */
padding: 10px; /* Поля вокруг */}

код для нижнего меню ставим перед открывающим тегом от <div id="foot"> </div>:
<div id="btm_menu"> ссылка ссылка ссылка </div>

и не забываем удалить в стиле для "foot" строку
clear: both;

@Zu

22.01.2007

div#css
{
position:absolute;
etc.
}

<div id="css">красивый syntax</div>

Юрий

21.02.2007

Владимир, сделал на основе Вашей статьи страничку из 3-х колонок, подскажите пожалуйсто, как подправить стили чтобы при грузики сначало содержимого #content, а потом уже левого и правого колонок
(т.е. сначало по коду идет <div id="content">
потом <div id="mleft"> и <div id="mright">, а не как в примере ниже - #mleft,#mright,#content
) сохранялось оформление?

#mleft { /* Левая колонка */
width: 240px; /* Ширина меню */
float: left; /* Состыковка с другим слоем по горизонтали */
}
#mright { /* Навигация по сайту */
width: 240px; /* Ширина меню */
float: right; /* Состыковка с другим слоем по горизонтали */
}

#content { /* Основное содержание страницы */
margin-left: 255px; /* Отступ слева */
margin-right: 255px; /* Отступ справа */
margin-bottom: 15px /* Отступ снизу */
}

<body>
<div id="top">TITLE</div>
<div id="mleft">
left
</div>
<div id="mright">
right
</div>

<div id="content">
content
</div>
<div style="clear: both;"></div>

<div id="bottom">
bottom
</div>
</body>

Natalia

17.03.2007

Kak mne sdelat' na sajte, na kagdoj stranichke tablichky "Dobavit' kommentarij"? Pomogite pogalyjsta

Влад Мержевич

20.03.2007

Natalia, в форуме этот вопрос уже поднимали, поищи там.

Andrey

13.05.2007

Что делать если колонка content короче колонки menu, тогда bottom налазит наверх menu.

<DIV>

13.05.2007

Подскажите пожалуйста как растянуть макет по вертикали на всю страницу?

Влад Мержевич

14.05.2007

Не надо растягивать макет на всю высоту, это противоречит идеологии слоев.

dreamer

21.05.2007

вот, немного подправил.. менюшку
egor egorrr от 29.06.2006

#mainmenu a:hover{color: red;background: maroon;} - юзайте!

)

VinGood

30.05.2007

И тут еще задам вопрос, где раньше увидят

в Вашем примере помещаю таблицу сразу после открытия дива content, например такую
<table>
<tr>
<td>wqrqwr</td>
<td>sfgsdf_wqq</td>
<td>wqrqwr</td>
<td>sfgsdf_wqq</td>
<td>wqrqwr</td>
<td>sfgsdf_wqq</td>
<td>wqrqwr</td>
<td>sfgsdf_wqq</td>
<td>wqrqwr</td>
<td>sfgsdf_wqq</td>
</tr>
</table>

Когда уменьшаю ширину окна в IE6 до того, пока таблица не поместится в окно, весь контент спрыгивает вниз и позиционируется по высоте ниже левого меню, как с этим бороться, в FF все нормально. А то я уже не знаю что и делать. Заранее благодарю.

Тут видно подымался этот же вопрос, но в другой форме, насколько я понядл

> У меня в IE после head идет menu, а потом,
> на растоянии высоты menu идет content. Т.е.
> menu ведет себя как блочный элемент на всю
> длинну строки, безо всякого обтекания.

у меня то же самое в IE

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

ProfiT

24.06.2007

Хорошая статья

Cyrill

14.07.2007

<font color="maroon"><DIV></font>`у:

Возникло подозрение, что вопрос связан с необходимость сделать различное оформление для меню и основного текста (фон, что-то ещ?...), и чтобы это оформление не пропадало внизу меню или основного текста (в зависимости, что короче).

Можно, попробовать забить это оформление в <BODY>. Или в тот элемент, вмещающий меню и основной текст, который наверняка будет растянут на всю высоту страницы. То есть тогда это оформление будет для меню и основного текста изначально "свыше" заданным бэкграундом, поверх которого они будут рисоваться.

Cyrill

14.07.2007

Извиняйте, не прос?к как как тут обращаются с html`ем в коментах, жж-шная привычка сказывается...
Хотел написать:

ответ <DIV>`у (13.05.2007):

Возникло подозрение, что вопрос связан с необходимость сделать различное оформление для меню и основного текста (фон, что-то ещ?...), и чтобы это оформление не пропадало внизу меню или основного текста (в зависимости, что короче).

Можно, попробовать забить это оформление в <BODY>. Или тот элемент, вмещающий меню и основной текст, который наверняка будет растянут на всю высоту страницы. То есть тогда это оформление будет для меню и основного текста изначально "свыше" заданным бэкграундом, поверх которого они будут рисоваться.

Совсем дикий способ - просто удлинить высоту меню/основного текста невидимыми элементами. Это -- по-любому криво.

Ольга

09.08.2007

Влад, а как сделать резиновый дизайн, т.е., тогда в вашем примере объ?м левой волонки и контента будет растягиваться на всю страницу, независимо от объ?ма контента?

Влад Мержевич

10.08.2007

Ольга, ваша просьба противоречит идеологии слоев. Их высота формируется содержимым и насильно меняться не должна.

drLivsi

24.08.2007

У меня такойже вопрос, как у VinGood (для первого примера).
Если я вставляю таблицу (или картинку) в #content, а затем уменьшаю ширину экрана, таблица прыгает вниз и позиционируется по высоте ниже левого меню.
Был ответ "используйте margin-left: 1px", но я не совсем понял для чего.

Oleg

29.08.2007

А можно пример слева - фиксированная колонка, справа фиксированная колонка, в центре содержание.. что то у меня никак не получается...
пока дош?л:

<html>
<head>
<style type="text/css">
body {font-family: Verdana; font-size: 100%; color: navy;}

</style>
</head>
<body>
<div id="wrap">
<div id="mytop">верх</div>
<div id="levo">Ячейка1</div>
<div id="centr">Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2 Ячейка2</div>
<div id="pravo">Ячейка3</div>
</div>
</body>
</html>

Kon Green

02.01.2008

Простенькая страничка в три колонки

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>страничка</title>

<style type="text/css">
body {min-width:640px}
#header,#menu,#content,#sub-section,#footer {
overflow:hidden;
display:inline-block
}
#header,#footer {width:100%}
#menu,#content,#sub-section {float:left}
#menu {width:20%}
#content {width:60%}
#sub-section {width:19.9%}
#footer {clear:left}
</style>

</head>

<body>
<div id="header"><h1>header</h1></div>
<div id="menu"><h1>menu</h1>
<ul>
<li><a href="#" title="">Ссылка</a></li>
<li><a href="#" title="">Ссылка</a></li>
<li><a href="#" title="">Ссылка</a></li>
<li><a href="#" title="">Ссылка</a></li>
<li><a href="#" title="">Ссылка</a></li>
<li><a href="#" title="">Ссылка</a></li>
<li><a href="#" title="">Ссылка</a></li>
</ul>
</div>
<div id="content">
<h1>content</h1>
<p>Текст</p>
</div>
<div id="sub-section">
<h1>sub-section</h1>
<p>Текст</p>
</div>
<div id="footer">
<p>Текст</p>
</div>
</body>
</html>

"как растянуть макет по вертикали на всю страницу?"

Для этого можно использовать фоновый рисунок, в css

background : #77bdbd url(images/foto.png) repeat-y;
height : 500px;

Александр

31.01.2008

Здравствуйте. Я взял полный листинг (Пример 3.) и сохранил его в html файл (польностью, без изменений). При открытии страницы в IE 6 текст, расположенный напротив блока menu, в центральном блоке смещается немного влево, по отношению к остальной части текста. В Firefox, Opera отображается нормально. Подскажите, как можно исправить такой недостаток?

Oleg

06.02.2008

Очень просто, меняешь IE на FF. Навсегда.

Стефан

23.03.2008

Очень-очень хорошая статья! Спасибо!

Юлия

21.05.2008

Здравствуйте. Вопрос про отображение ссылок. Как отменить отображение ссылки блоком? Например, при наведении курсора?

Diver

28.05.2008

Юлия, может у вас в css что-то вроде этого написано?
a:hover {background-color: #333;}

Юлия

15.06.2008

Написано вот что:
a.menu{
background: #9d8b62;
display: block;
width: 144px;
height: 22px;
...
}
a.menu:hover {
background: #d1b781;
}
Надо, чтобы при наведении курсора ссылка уже не отображалась, как блок

Максим

28.07.2008

Я уже третий человек, которого интересует ответ на вопрос: Когда уменьшаю ширину окна в IE6 до того, пока таблица не поместится в окно, весь контент спрыгивает вниз и позиционируется по высоте ниже левого меню, как с этим бороться, в FF все нормально. А то я уже не знаю что и делать. Может на конец кто нибуть ответить, или вопрос на столько глухой. Заранее благодарю.

Две колонки, навигация слева

Комментарии к статье

Добавить комментарий