DiV верстка — Часть 2 — Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS

25 апреля, 2010

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. В первой статье, посвященной блочной верстке, я попытался начать рассказывать о ее принципах, но, к сожалению, пришлось сильно отвлечься на объяснение базовых понятий вебмастеринга.

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

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

Создаем макет сайта в 2 колонки на основе DIV верстки


Итак, в предыдущей статье мы создали на своем хостинге (хотя для этих целей вполне подойдет и локальный сервер Denver тут см. обзор его возможностей) папку TEST, в которую положили два основных файла нашего будущего макета: Index.html и Style.css. Собственно, они и будут составлять наш простейший вариант каркаса.

Опять, наверное, придется немного отвлечься от непосредственной верстки, т.к. не всем может быть понятно, как создать папку TEST в корневом каталоге, расположенного на реальном хостинге. А так же, что это такое — корень сайта и где его искать при доступе по ФТП. А ведь действительно, вопрос не тривиальный для пользователя, впервые столкнувшегося с хостингом.

Так вот, вам нужно будет сначала подключиться по протоколу FTP. Данные для подключения по FTP вам должен был сообщить вам хостинг провайдер (читайте тут про то, что такое хостинг вообще, а здесь про его покупку).

После того, как вы подключитесь по FTP (я пользуюсь для этой цели программой FileZilla — тут про нее вся правда написана, и именно на ее примере буду все рассказывать), то в правом окне данной программы вы увидите содержимое каталога, который выделил хостер под ваши сайты, скрипты и тому подобные вещи.

Но этот каталог не будет являться корневой папкой. В корне должен лежать файл Index.php, а так же и все остальные файлы и папки используемого вами движка.

Для этой цели используется отдельная директория, правда, ее название, в зависимости от конкретного хостинга, может отличаться. Структура внутренних папок в основном каталоге (открывающемся при подключении к сайту по FTP) так же может отличаться, но суть остается прежней.

Например, можете увидеть следующую картину:

Файлы движка вы должны копировать не в эту самую верхнюю директорию, доступную вам по FTP, а в так называемую, корневую папку. Как узнать, какая из присутствующих там директорий является корневой?

Ну, на крайний случай можно спросить у самого владельца хостинга. А что, они обязаны помогать вам в таких вопросах. Но вообще-то, она чаще всего будет называться либо PUBLIC_HTML, либо HTDOCS.

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

Как создать каталог с помощью программы FileZilla? Да, очень просто. Вам достаточно будет открыть в правой части программы коневую директорию и щелкнуть по пустому месту правой кнопкой мыши, а из контекстного меню выбрать пункт «Создать каталог».

Уф, создали папку TEST в коревом каталоге сайта. И на том спасибо. В общем-то, можно было с этим и не заморачиваться. Как так? А вот так. Директорию TEST можно было бы создать и в какой-нибудь внутренней папке вебсайта, но проще все же будет в корне.

Для локального сервера Денвер вам нужно будет создать директорию TEST в следующем каталоге:

c:\server\home\localhost\www\

Вместо диска «С» нужно указать диск на вашем компьютере, где установлен локальный сервер. Тогда, для просмотра создаваемого нами на основе Div верстки макета в 2 колонки, нужно набрать следующий путь в адресной строке браузера:

http://localhost/test/

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

Продолжим разговор о макете. В файле Index.html мы будем задавать сами DIV-контейнеры, на которых и будет строиться наш каркас, а в файле Style.css — описывать положение и внешний вид этих DIV-контейнеров. Это в двух словах, а как оно будет на деле, вы увидите немного погодя.

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

http://ktonanovenkogo.ru/test

Но тут есть два «но». Во-первых, вместо http://ktonanovenkogo.ru/ вам нужно ввести свой Урл, а во-вторых, обратите внимание на регистр латинских букв, которые составляют название вашей директории TEST.

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

Дело в том, что на реальном хостинге в большинстве случаев сервера работают под управлением UNIX подобной операционной системы, в которой заглавные и строчные буквы различаются (в отличии, от Windows, работать с которой мы привыкли).

Начинаем верстать макет сайта в 2 колонки на дивах


Как я уже упоминал, для начала мы попробуем создать макет в две колонки, который схематично можно представить так:

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

Мы зададим им размеры и настроим позиционирование на странице с помощью CSS. Итак, приступим.

Начнем с Index.html. Откройте его на редактирование в удобном для вас редакторе (я пользуюсь для этой цели лучшим из бесплатных текстовых редакторов Нотепад++ — тут его можно скачать и настроить).

Для того, чтобы привыкать к правильному оформлению HTML документов, давайте сразу пропишем стандартную часть (на этом я как раз останавливался в предыдущей статье. Там будет DOCTYPE (здесь читайте про доктайп и комментарии в Html) и все остальные верхние теги, которые браузер в случае их отсутствия может добавить и сам (умны они стали — жуть):

<!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>Заголовок документа</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
 </body>
</html>

Значение всех строк в этом коде я подробно объяснял в предыдущей статье (см. ссылку в самом начале этой публикации), поэтому сейчас остановлюсь лишь на строке:

<link href="style.css" rel="stylesheet" type="text/css">

Эта строка говорит браузеру, где ему искать и как называется файл каскадных таблиц стилей (он имеет расширение CSS), который нужен браузеру для корректного отображения задуманного нами оформления шаблона будущего сайта. В нашем случае он называется Style.css (здесь читайте про Style и Link подробнее), а искать его нужно в той же папке, где лежит Index.html (собственно, в котором и прописана эта строчка).

Почему именно в этой же папке? Потому, что если вы не прописываете никакого пути до файла (указываете только его название), то браузер будет его искать в той же директории, где лежит исполняемый сейчас (в нашем случае это Index.html). Т.е. отсутствие пути будет равносильно тому, как если бы я прописал путь до Style.css в виде:

<link href="http://ktonanovenkogo.ru/test/style.css" rel="stylesheet" type="text/css">

Но первый вариант записи короче и более универсальный, т.к. там напрямую не указывается путь до папки с файлами, а значит можно будет поместить файлы Index.html и Style.css в другую директорию, обратиться к Index.html из адресной строки и все равно будет подгружен Style.css. Подробнее про относительные и абсолютные ссылки тут написано, а заодно и про URL (универсальный идентификатор ресурса).

В связи с этим хочу заметить, что вы вообще можете не заморачиваться с хостингом или же с локальным сервером. Просто создайте на своем компьютере любую папку и поместите в нее наши Index.html и Style.css. Пропишите в первом из них путь до файла Style.css в виде:

<link href="style.css" rel="stylesheet" type="text/css">

И все. Теперь вы сможете открыть Index.html (двойной щелчок мышью по нему) в браузере, назначенном по умолчанию для открывания файлов с расширением HTML у вас на компьютере, и при этом будет автоматически подгружен Style.css.

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

Прописываем нужный набор блоков в index.html

Теперь нам нужно будет создать четыре DIV контейнера для всех частей нашего 2 колоночного макета (шапки, левой колонки, области для контента, футера) и заключить их в один большой Div.

Внутрь Div контейнеров для частей макета можно будет заключить для наглядности названия этих блоков. Все это мы будем писать между открывающим и закрывающим Html тегами Body. Получится примерно такой код в Index.html:

<!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>Блочная верстка - дубль 2</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">

<div id="header">Шапка </div>
<div id="left">Левая колонка</div>
<div id="content">Содержимое страницы</div>
<div id="footer">Подвал</div>
</div>
 </body>
</html>

Т.е. сразу за открывающим тегом Body мы прописали открывающий тег основного Div контейнера макета:

<div id="maket">

В котором задали ID (в нашем случае id="maket"). В последствии для этого ID (читайте подробнее про CSS селекторы тега, класса (class), Id и универсальный селектор), в файле каскадных таблиц стилей Style.css, мы допишем CSS свойства, позволяющие определить размер и выравнивание основного Div.

После открывающего тега основного Div мы прописали код четырех контейнеров, которые станут элементами макета.

<div id="header">Шапка </div>
<div id="left">Левая колонка</div>
<div id="content">Содержимое страницы</div>
<div id="footer">Подвал</div>

Всем этим четырем Div мы назначили свои индивидуальные ID, для которых затем в Style.css мы пропишем CSS свойства, помогающие настроить размер и взаимное размещение (позиционирование) этих контейнеров. Для наглядности, внутри них я прописал их назначения. Ну, и перед закрывающим тегом Body мы поставили закрывающий тег основного Div для всего макета:

</div>

Теперь, если открыть созданный нами Index.html в браузере, мы увидим просто перечисление в столбик названий частей 2 колоночного макета. Если вы откроете Index.html в браузере FireFox с установленным плагином Web Developer и выберите из меню этого плагина пункты «Контуры» — «Контур элементов уровня блоков», то увидите примерно следующую картину:

Т.е. все получилось именно так, как мы и хотели — четыре Div заключены в одном основном контейнере. Но почему же тогда все выглядит не так, как мы наметили на структурной схеме макета на основе блочной верстки? Просто мы еще ничего не написали в наш Style.css, который поможет чудесным образом (с помощью свойств CSS) расставить все дивы по своим местам.

Прописываем CSS свойства для блоков

Открываем в удобном для вас редакторе Style.css и прописываем стили CSS для только что созданных контейнеров. Сначала в Style.css стоит прописать правило для тегов Body и Html, которое позволит сбросить отступы макета сайта от внутренних и внешних границ экрана (для соблюдения кроссбраузерности):

body, html {
margin:0px;
padding:0px;
}

Вы, наверное, уже слышали или видели, что макеты бывают фиксированной ширины (например, 800px), а могут быть, или же бывают, резиновые — ширина его подстраивается под разрешение экрана посетителя.

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

Поэтому мы пропишем для нашего основного Div ряд CSS свойств в Style.css, которые позволят создать макет фиксированной ширины (например, 800px) и выровнять его по центру относительно краев экрана (в Index.html для основного контейнера мы прописали ID под названием maket) :

#maket {
width:800px;
margin:0 auto;
}

Итак, давайте разберем эту запись. Вы, наверное, уже поняли, что #MAKET (называется это селектором) говорит о том, что данная запись в CSS файле будет применена только к Div, в котором прописан ID="MAKET". В фигурных скобках записываются свойства CSS со своими значениями. Общий синтаксис конструкции записи в CSS файле выглядит так:

Селектор { свойство1: значение; свойство2: значение; ... }

Что примечательно, код CSS будет одинаково хорошо работать вне зависимости от регистра символов, добавления или не добавления между элементами его кода переноса строк, пробелов или табуляции — в общем пишите так, как вам будет удобнее.

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

Первое CSS свойство двухколоночного макета:

width:800px; 

задает ширину (тутпро Height и width читайте ) для основного Div контейнера (фактически ширину для всего макета), а второе CSS свойство:

margin:0 auto; 

позволяет выровнять основной Div посередине относительно левого и правого края экрана. Само свойство Margin предназначено для задания отступов от внешних границ контейнера до соседних элементов страницы.

В нашем случае основной Div (блок) является самым внешним элементом нашего двух колоночного макета, поэтому Margin будет задавать отступ от его границ до границ экрана браузера пользователя.

Первое значение, прописанное в Margin, равно нулю — это означает, что основной Div (фактически сам макет) будет вплотную прижат к верхнему и нижнему краю экрана (отступы сверху и снизу равны нулю).

Второе значение в Margin прописано как Auto — это означает, что отступ от левой и правой границы основного контейнера будет равномерно распределен, в результате чего он (а фактически сам макет) будет выровнен по центру относительно левого и правого края экрана. Такие вот пироги.

Две строчки CSS кода, а сколько текста нужно написать для подробного объяснения их значения (кошмар).

Пропишите данные свойства в ваш Style.css

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}

Сохраните изменения и откройте в браузере Index.html. Вы увидите, что теперь ширина двухколоночного макета перестала быть равной ширине экрана и уменьшилась до 800px. При этом он еще и выровнялся по центру:

Выравниваем двухколоночный макет по центру


Все хорошо, но есть одно «но». В браузере Internet Explorer 5 (тут читайте про историю IE, а 5 это очень старая версия, но может встречаться у посетителей до сих пор) выравнивание макета на основе блочной верстки по центру описанным выше способом не сработает.

Не понимает он этого, поэтому персонально для него (Internet Explorer 5) нужно будет дописать для Body следующее CSS свойство:

text-align:center;

text-align (здесь про него, а заодно и про text-decoration, vertical-align и text-indent читайте) поможет выровнять наш макет по центру в старых версиях браузеров. Но это S свойство, прописанное для Body, задает выравнивание по центру для всего текста на странице, а это нам вовсе не нужно.

Поэтому мы допишем новое свойство для нашего основного Div, которое задаст выравнивание текста во всем макете по левому краю (это значение используется по умолчанию, но т.к. мы прописали иное, то приходится указывать выравнивание по левому краю в явном виде):

text-align:left;

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

body, html {
margin:0px;
padding:0px;
text-align:center;
}
#maket {
width:800px;
margin:0 auto;
text-align:left;
}

Подсвечиваем блоки для наглядности

Теперь я предлагаю заняться внутренними блоками макета. Для большей наглядности предлагаю вам подкрасить эти Div разными цветами при задании фонового цвета для них, с помощью специально предназначенного для этого (свойства CSS — Background-color.

Цвета в Html (тут про них рассказывается, а так же про программы для захвата нужного цвета с экрана) обычно задаются в кодовом выражении, которое начинается со знака решетки. Для получения кода нужного вам цвета можно воспользоваться специальными программами, подробнее о которых вы можете прочитать по приведенной чуть выше ссылке.

Итак, пропишем для всех названий ID наших внутренних Div свойство Background-color с разными значениями фонового цвета, например, так:

#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
}
#content{
background-color:#8080FF;
}
#footer{
background-color:#FFC0FF;
}

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

Теперь для того, чтобы увидеть границы отдельных контейнеров, нам не нужно будет прибегать к услугам плагина Web Developer (см. ссылку выше).

Блок Header, судя по структурной схеме приведенной в начале статьи, должен у нас занимать всю ширину макета, но блок Left должен иметь ограниченную ширину. Задать это можно с помощью уже известного нам CSS свойства Width, например, так:

#left{
background-color:#00C0C0;
width:200px;
}

В результате наш макет примет вид:

Задаем обтекание блока левой колонки другими блоками через Float

Ну вот, уже гораздо ближе к структурной схеме двухколоночного макета сайта, но все же еще не совсем то. Нужно еще, чтобы блок Content располагался не снизу, а справа от блока Left.

Добиться этого не сложно, благо имеется свойство CSS под названием Float, позволяющее прижать любой блочный элемент к нужной стороне экрана и задать его обтекание с другой стороны, расположенным следом за ним (в HTML коде) элементами.

Немного не понятно? Не беда, сейчас рассмотрим все на примере. Добавим свойство для блока Left, позволяющее прижать его к левому краю и задать обтекание его справа контейнерами, расположенными ниже в коде. Выглядеть это будет так:

#left{
background-color:#00C0C0;
width:200px;
float:left;
}

Т.е. добавилось всего лишь одно единственное свойство Float со значением Left, предназначенное для блока Left. Весь код в Style.css, созданный нами на данный момент, будет иметь вид:

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
}
#footer{
background-color:#FFC0FF;
}

А наш макет на Div верстке теперь будет выглядеть так:

Класс! Почти то, что нужно, но опять же есть маленькая неувязочка. Блок Footer (подвал) не должен обтекать левую колонку справа, он должен располагаться в самом низу макета и занимать всю его ширину.

Как же решить эту проблему? Да, в общем-то довольно просто, но об этом я расскажу уже в следующей статье данного цикла, посвященного основам блочной верстки.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме:

Комментарии и отзывы

жабак

А у меня подвал располагается внизу макета на блочной верстке и не прилегает к левой колонке, как и должно быть. Проверял в трех браузерах: IE6, Opera 9.64, FF 3.6.3.

Дмитрий

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

Marina

Дмитрий, Вы проделали титанический труд по описанию создания макета сайта на основе блочной верстки!!! И это всего за один день!!! Я снова убеждаюсь, что Вы — МАСТЕР!!! Теперь мне осталось только все это переварить, но с Вашей помощью, я справлюсь. Вы пишете и объясняете все доступным языком, и, хоть я и полный профан в этих вопросах, я чувствую, что смогу разобраться.

По крайней мере, у меня уже нет паники, а это — главное. Конечно,сразу у меня ничего не получится, но — Москва не сразу строилась. А чтобы задавать вопросы, нужно хотя бы понимать о чем идет речь и не отнимать у вас драгоценного времени. Но я рада, что мой вопрос дал вам возможность приоткрыть завесу над тем, что не понятно многим. Уверена, что эта ваша статья будет полезна не только мне одной. СПАСИБО ВАМ ОГРОМНОЕ! Буду осваиваться держать вас в курсе моих успехов:)

Ольга

Спасибо, ждём продолжения CSS детектива по созданию макетов сайта на блочной верстке!

Дмитрий

Marina: пожалуйста, вы правы, это совсем не сложно, главное начать.

Ольга: пожалуйста, постараюсь не затягивать со следующей статье о блочной верстке.

El-Ray

Тем кому интересно

чтобы FOOTER не обтекал левую колонку макета справа необходимо прописать

в коде CSS

#footer{
background-color:#FFC0FF;
clear: left;
}

Хорунжий Александр

Дмитрий,

очень классно пишите, понятно будет даже ребенку. Правда, не знаю, как у вас хватает терпения 🙂

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

Константин

Давно искал подобный самоучитель по блочной верстке и наконец то нашёл, всё разжёвано и главное понятно! спасибо огромное (а то я как то понять не мог как же эти дивы работают)

Alex

Хорунжий Александр:

Хорунжий Александр

Это нюансы и тонкости SEO оптимизации сайта.

На этапе развития это я как понял необходимость.

Только как на своем сайте это применить, я не знаю.

Сайт в виде блога в этом плане удобен.

Много текста. Можно втыкать перелинковку в любое место.

Главное что-бы смысл или слово в статье как то пересекались с уже написанным ранее. Отсюда и разбросанность.

Но это необходимость.

Логист

насчет фиксированной ширины. а с текстами потом как? 200 пикселей ширина а слово будет больше (размер шрифта длинное слово и т.д.) начинается разрыв шаблона вроде не? сам хожу под 1024 разрешением (фаерфокс) и на многих (очень многих) блогах и сайтах, посвященных дивной верстке и ксс, там получается такой разброд и шатание, что непонятно как люди могут учить верстке кроссбраузерной.

Andrew

Отличная статья!

Очень наглядно и понятно

Спасибо автору

chingis

у меня браузер не видеть русские шрифты например шапка левая колонка и.т.д вместо них просто квадратики и за чего это не подскажите?

Сайтер

Спс очень подробно расписал!

Татьяна

Дмитрий,огрооомное Вам спасибо за эти статьи.

Простым языком, очень подробно Вы объясняете ,для кого то может быть банальные, а лично для меня ,совершенно необходимые вещи. С Вашей помощью я начала понимать значение того или иного действия.Сейчас надо было зарегистрировать сайт в Яндексе и др. системах. Пошла сразу к Вам, потому что только здесь понятно объясняется даже тем, кому уже далеко за 50... Теперь , кто из знакомых будет создавать сайт, сразу же к Вам направлю

C уважением,Татьяна

Дмитрий

Татьяна: спасибо большое за отзыв. Буду стараться соответствовать.

Анатолий

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

Ну всёравно спасибо.

Виталий

«В связи с этим, хочу заметить, что вы вообще можете не заморачиваться с хостингом или же с локальным сервером. Просто создайте на своем компьютере любую папку и поместите в нее два файла Index.html и Style.css. Пропишите в Index.html путь до файла Style.css в виде:...»

Очень вовремя)))

Когда я уже пару часов потратил на изучение денвера, автор решился сказать что можно не заморачиваться с денвером))

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

Ещё бы я добавил или отредактировал ваши я так понимаю 4 части по блочной DIV верстке, в одну часть. И сделал бы просто полную разборку index.html и style.css файлов)

А так мне все очень понятно) Учитываю что я впервые все это осваиваю!

Спасибо Вам)

Блог клевый!

LIMITNV

Пожалуй эта самая подробная иструкция из всех, которые я перелопатил в интернете. Респект Автору. Побольше бы таких людей.

aux

Подробно, но с форматированием кода разберитесь =) выравнивание по центру аж коробит... Стыдно должно быть! Ну, как говорится, «сапожник без сапог». Спасибо.

Pavlikys

А как реализовать стили для отдельной страницы. Например я создал отдельный файл page-onlajn-photoshop.php, вписал туда содержимое основного page.php Убрал всё, что мне не нужно (сайдбар). Но ни как не могу расширит основной блок с содержанием текста, так чтобы этот стиль срабатывал только на созданной станице page-onlajn-photoshop.php За этот блок отвечает в style.css вот этот кусок.

Не могу сообразить как реализовать отдельные стили для отдельной страницы.

саша

сделал резиновый двухколо-й. но футер не держится правой границы окна броузера при его уменшении-отдаляется и тем сильнее чем меньше окно. min-width 600px для общего дива. при уменьшении до 600 всё норм. когда за 600-футер начинает отдалятся справа

Алексей

Сделал как вы написали всё , вощем скопировал код практически у вас весь но , в том месте где выравнивается по центру вот этими значениями:

body, html {

margin:0px;

padding:0px;

}

#maket {

width:800px;

margin:0 auto;

}

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

dimon

но я уже по другому писать

не могу, привык разбирать все нюансы по

полочкам...

respect ! again and again and again...

Таня

Да, скачала фтп, и застряла. Где этот владелец моего хостинга. Ни как не могу сообразить

Artem

Молодец, спасибо за материал, давно хотел с этими дивами разобраться. Всё написано чётко и понятно!

Энн

Огромное спасибо за уроки, это именно то, что я искала, все поняла все сработало кроме того, что дословно исполняла все рекомендации и у меня почему то футер не обтекает левую колонку, а сразу изначально правильно во всю длину встал)) блин где мой косяк!))) почему все правильно сразу работает?))) так не честно

Игорь

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

Подписаться не комментируя