Форум PHP программистов > DIVная верстка для тех, кто в подводной лодке.

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: DIVная верстка для тех, кто в подводной лодке.

killich

30.09.2006 - 23:15

killich для phpforum.ru
killich@yandex.ru

DIVная верстка для тех, кто в подводной лодке.

И так.

Зачем это надо?
Многие верстают в таблицах и радуются. А я вот начал разбираться в div-ах и понял, что это не так уж и страшно, как показалось на первый взгляд.
Минусы div-ов в том, что с ними сложно управляться, пока не просекешь для себя пару правил их поведения. Я вроде немного проник в этот мир и теперь спешу поделиться с вами.
Вообще, наблюдая за последними веяниями web-моды я сделал вывод, что верстать не в DIVах, уже даже как-то неприлично.
А еще при div верстке разметка web страницы заметно уменьшается в объеме.

Как раньше делал я:
Открывал свой любимый PhotoShop, верстал макетик сайта, резал его на куски, перегонял из PhotoShop в HTML таблицы и потом правил этот макет в не менее любимом DreamWeaver 4. Табличная верска прекрасно отображается во встроенном браузере DreamWeaver и проблем не было. Div верстку я не делал по оч. простой причине - встроенный браузер DreamWeaver не хочет отображать div-ы, а просматривать во всех браузерах - лишняя заморочка. Теперь я понял, что не нужно лениться ;0)

Как делаю теперь:
Открываю свой любимый PhotoShop, верстаю макетик сайта.
Нарезаю изображения. Сохраняю их.
Открываю DreamWeaver.
Запускаю все браузеры, какие тока есть.
Ручками пишу HTML код в DreamWeaver (не пользуясь встроенным средством просмотра) и редактирую CSS (там очень удобная менюшка есть) в нем же. Сохраняю.
Смотрю как выглядит во всех браузерах. Если косяк, то отменяю последнее действие в DreamWeaver и опять сохраняю и смотрю.

При верстке c Div, нельзя пренебрегать стандартами W3C и просто писать:

Untitled Document

Для ДИВной верстки нужно соблюдать все правила W3C, а то, ничего толкового может не получится. А потому в качестве шаблона будем использовать след. HTML код:

Div Верстка

Еще несколько правил правильной верстки (не везде здесь я их буду соблюдать).

1. Незакрывающиеся в HTML теги должны быть оформлены соответствующим образом:
Все потому, что тут уже начинаются стандарты xhtml разметки (ммм... наверное, но гарантию не даю).

Не так:
А так:

Не так:

А так:

и т.д.

2. CSS не должен находиться в html документе, а быть в отдельном файле.
Подключается строкой вроде:

3. Тоже самое и для java-скриптов.

4. Все аргументы тегов должны оформляться в кавычки:
Не: link
А: link

Плюс пару не столь существенных моментов о которых я либо не знаю, либо о них умолчу.

Далее придется все div теги писать ручками в теле html, а CSS я добавляю в DreamWeaver и редактирую там же. Я не буду обращать внимание на правило 2, что б все было в одном месте.

Давайте создадим div и позиционируем его в центре страницы.

Сначала пропишем слой в теле страницы и установим все отступы тега body на ноль:

Div Верстка

Добавим определения для слоя _one_:

Div Верстка

Вот пример того, зачем нужны стандарты W3C.
Если вы вдруг удалите строку

то в некоторых браузерах наш слой (который сейчас находится в центре страницы) может уплыть с середины в левый край окна браузера. Получается, что без нам никуда.
Именно отвечает в данном случае, каким образом воспринимается CSS определение:

margin-right: auto;
margin-left: auto;

Попробуем создать внутри слоя one еще три слоя и посмотрим, как они себя ведут.

Div Верстка

Обратите внимание, что при отображении в окне браузера, каждый из трех новых слоев отображается на следующей строчке. Т.е. получается слой под слоем. Наша задача научиться делать так, чтоб эти слои располагались не друг ПОД другом, а друг ЗА другом. В этом случае мы получим верстку в 3 колонки с помощью div (я знаю, что многие из вас именно об этом и мечтают... не так ли ;0) ).

Для того, что бы это сделать, есть, так называемое, float-свойство (плаванье слоя). Оно как раз и заставляет слои не прыгать вниз, а прижиматься СЛЕВА или СПРАВА к предыдущему слою.

Пишем следующую CSS (все остальное как было):

Красота! 3 колонки! Но.... тока в IE!

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

Все это от того, что слои со свойством -= float: left; =- распирают по высоте только слои с аналогичным свойством. Самый простой способ исправить ситуацию : слою _one_ задать свойство -= float: left; =-, но тогда он сместиться влево, а нам нужно, что б он был по центру.

Выход в данной ситуации следующий:
1. внутри слоя _one_ создадим слой со свойством -= float: left; =-, а уже внутрь его поместим наши з слоя, которые образуют колонки. Этот новый слой прижмется к левому краю слоя _one_, а 3 внутренних слоя смогут распирать этот новый слой.
2. У слоя _one_ снимем все свойства отображения, что б его небыло видно, тогда он будет выполнять только функцию выравнивания по центру. А если он будет невидим, то нам совершенно пофигу - распирают его внутренние столбики, не распирают... какая разница?

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

Div Верстка

Посмотрите, как эта вся разметка смотриться во всех браузерах.
Наверняка в IE что то будет не так как в Опере или Мозилле.

А теперь самая малость. Скрываем с глаз долой рамочки слоя _one_ :

#one {
width: 800px;

margin-right: auto;
margin-left: auto;
}

...и все прекрасно!
3 колонки в центре страницы, да еще и смотриться во всех браузерах, да еще и в ДИВах!
Конечно, нужно подстроить размеры 3 колонок, но думаю это не сложно.
Всем кто разобрался и попробовал - Ура!

killich для phpforum.ru
killich@yandex.ru

Спустя 2 минуты, 43 секунды (30.09.2006 - 22:18) vasa_c написал(а):

Пора подфорум открывать. Уроки от Килича. )

Спустя 9 минут, 9 секунд (30.09.2006 - 22:27) killich написал(а):

;0) Why not?

Спустя 13 часов, 26 минут, 45 секунд (1.10.2006 - 11:54) Timok написал(а):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>Rezina</title>
<style type="text/css">
body { margin:0px; padding:0px; min-width:800px; }
#d1{ width:25%; float:left; background:#f00; }
#d2{ width:49%; float:left; background:#0f0; }
#d3{ width:25%; float:left; background:#00f; }
</style>
</head>
<body>
<div id="d1"> 
#d1
 
 
 
 </div>
<div id="d2"> 
#d2
 
 
 
 </div>
<div id="d3"> 
#d3
 
 
 
 </div>
</div>
</body>
</html>

Спустя 1 день, 22 минуты, 34 секунды (2.10.2006 - 12:16) BlackTheMad написал(а):

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

Спустя 22 дня, 5 часов, 7 минут, 33 секунды (24.10.2006 - 17:24) Edd написал(а):

killich,
А есть какой-то особый смысл в том, что ты margin, padding и border-width пишешь по отдельности, а не все 4 стороны в одном? Или просто так?

Спустя 9 дней, 19 часов, 44 минуты, 19 секунд (4.11.2006 - 14:08) Наталья написал(а):

killich,

QUOTE

верстать не в DIVах, уже даже как-то неприлично

А в чем все таки приемущества верстки в дивах? Неприлично - это не аргумент

Спустя 17 дней, 1 час, 38 минут, 15 секунд (21.11.2006 - 15:46) Dark_Avenger написал(а):

Спасибо. Такие мануалы всегда на вес золота. Вот единственное чего непонял:

QUOTE

что это за странное свойство media?

Спустя 2 часа, 41 минута, 11 секунд (21.11.2006 - 18:28) Timok написал(а):

http://stepbystep.htmlbook.ru/?id=45

Спустя 1 месяц, 23 дня, 4 часа, 20 минут, 36 секунд (14.01.2007 - 22:48) killich написал(а):

QUOTE

А есть какой-то особый смысл в том, что ты margin, padding и border-width пишешь по отдельности, а не все 4 стороны в одном? Или просто так?

Пишу все по отдельности, что бы было по отдельности. Для новичков это более наглядно. На мой взгляд.

QUOTE

Спасибо. Такие мануалы всегда на вес золота. Вот единственное чего непонял:

что это за странное свойство media?

media="screen,projection"
Как мне известно отвечает за то, где будет применяться CSS при отображении сайта.
screen - CSS применяется при отображении сайта на экране.
print - CSS применяется при отображении сайта при печати.
projection - не знаю ;0)
all - CSS применяется при отображении сайта везде.

короче, если напишешь только screen, то CSS увидешь только на экране, а при печати на бумаге стилей не будет, будет просто плоский текст. Сам проверял.
Напишешь print, то при печати элементы страницы сайта напечатаются примерно так же , как видешь на сайте. И т.д. и т.п.

Кто знает больше, тот наверное дополнит эту тему сообщениями.

QUOTE

верстать не в DIVах, уже даже как-то неприлично

А в чем все таки приемущества верстки в дивах? Неприлично - это не аргумент

Сам долго бился над этим вопросом. Вот мой ответ:

1. Это выгодно с точки зрения разметки. Разметки становится меньше (как правило).
2. Сайт будет выполнен с учетом новейших стандартов W3C. А это круто. Почему? Читай пункт 3.
3. Всякая разметка должна предполагать, что информацию заключенную в ней легко разобрать автоматическими средствами (Парсинг - извлечение информации из разметки). Для того, что бы парсинг проходил успешно тр*цензура*ется что бы разметка соответствовала стандартам, иначи парсинг может не выполниться. Всякий браузер, по сути, это парсер HTML разметки! Он строит страницы на экране соответственно информации полученной из разметки. IE имеет очень много средств сглаживания ПЛОХОЙ, ОЧЕНЬ ПЛОХОЙ разметки, а потому новички работают по правилу: ЧТО БЫ НЕ НАЛЕПИЛ - РАБОТАТЬ БУДЕТ! А вот Opera и Mozilla не так относятся к коду - уж делаешь так делай по правилам. Вот и не любят многие из-за этого эти браузеры. А правила создает W3C.

Еще пояснения нужны?

Спустя 1 час, 31 минута, 38 секунд (15.01.2007 - 00:20) Timok написал(а):

QUOTE(Спецификация)

braille
Предназначен для устройств чтения азбуки Брайля.
embossed
Предназначен для печати азбуки Брайля.
handheld
Предназначен для переносимых портативных устройств (небольшие монохромные экраны с ограниченной полосой частот).
print
Предназначен для страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра печати. Информацию о принципах форматирования, характерных только для устройств с постраничной разбивкой, можно получить в разделе об устройствах постраничного вывода.
projection
Предназначен для настенных презентаций, например, для проекторов или для печати плакатов. Информацию о принципах форматирования, характерных только для устройств с постраничной разбивкой, можно получить в разделе об устройствах постраничного вывода.
screen
В первую очередь предназначен для цветных дисплеев.
tty
Предназначен для устройств, использующих набор символов с фиксированной шириной, например, телетайпов, терминалов или портативных устройств с ограниченными возможностями отображения. Для устройств типа "tty" не следует использовать пикселы.
tv
Предназначен для устройств типа телевизора (для которых характерны низкое разрешение, цветное изображение, ограниченная прокрутка на экране, возможность передачи звука).

Спустя 23 часа, 51 минута, 29 секунд (16.01.2007 - 00:11) nickspring написал(а):

Еще можно было сказать о media в аспекте правильной версии для печати.

Спустя 1 год, 6 месяцев, 28 дней, 23 часа, 28 минут, 49 секунд (14.08.2008 - 22:40) solwind написал(а):

кхм.. а может кто-то подскажет? - почему у 1 поста (http://www.phpforum.ru/index.php?showtopic=928&view=findpost&p=5434) нет картинок, а только пустые большие промежутки вылазят у меня?.. (в Опере и в ИЕ проверял)...
если есть у кого полная версия этой статьи (с картинками) вышлите плиз на яндексовское (точка ру) мыло e2406
А то статья оч. понравилась, но не хватает половину..

Спустя 1 час, 29 минут, 45 секунд (15.08.2008 - 00:10) ILOR написал(а):

У меня тоже не отображается

, а хочется прочитать статью полностью, т.к. сейчас пытаюсь перейти дивы. Скиньте и мне статейку, если не трудно на ilorx@mail.ru. Спасибо.

Спустя 6 часов, 5 минут, 19 секунд (15.08.2008 - 06:15) Sylex написал(а):

Цитата(Timok @ 1.10.2006, 15:54) [snapback]5444[/snapback]

Если можно, добалю (для развития темы) простейший пример резины в 3 колонки. Единственная проблема состоит в IE, который не понимает min-width, и страница будет в нем сжиматься бесконечно.<br><pre class="php"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>Rezina</title>
<style type="text/css">
body { margin:0px; padding:0px; min-width:800px; }
#d1{ width:25%; float:left; background:#f00; }
#d2{ width:49%; float:left; background:#0f0; }
#d3{ width:25%; float:left; background:#00f; }
</style>
</head>
<body>
<div id="d1">
#d1

</div>
<div id="d2">
#d2

</div>
<div id="d3">
#d3

</div>
</div>
</body>
</html></pre>

проблему минимальной ширины можно решить так:
все 3 блока заключить в еще один блок и внутри него создать еще блок шириной 800px, что не позволит сжиматься главному блоку меньше 800px

Кстати, вчера сверстал страничку, не поверите, Опера тупо виснет! Проверялось на 3 компах уже:) Чистый HTML, никаких Ява. Видимо он парится где-то с вычислением высоты (вся фишка в задании процентной высоты в таблице), и происходит бесконечный цикл. Надо код разработчикам отправить

Спустя 3 часа, 27 минут, 41 секунда (15.08.2008 - 09:43) killich2 написал(а):

НАРОД - ЭТО KILLICH.
КАРТИНОК ТУТ НЕТ, А КОД ЕСТЬ.
ВЫШЛЮ ВСЕМ КТО ПОПРОСИТ ВСЮ СТАТЬЮ ПИСАТЬ НА KILLICH@yandex.ru
СПАСИБО ЗА ДОБРЫЕ ОТЗЫВЫ! УДАЧИ В ДИВАХ!

ВСЕ ГО ТУ ЗЕ ПЫХА.РУ

Спустя 9 часов, 2 минуты, 53 секунды (15.08.2008 - 18:46) killich2 написал(а):

DIVная верстка для тех, кто в подводной лодке.

И так.

Зачем это надо?
Многие верстают в таблицах и радуются. А я вот начал разбираться в div-ах и понял, что это не так уж и страшно, как показалось на первый взгляд.
Минусы div-ов в том, что с ними сложно управляться, пока не просекешь для себя пару правил их поведения. Я вроде немного проник в этот мир и теперь спешу поделиться с вами.
Вообще, наблюдая за последними веяниями web-моды я сделал вывод, что верстать не в DIVах, уже даже как-то неприлично.
А еще при div верстке разметка web страницы заметно уменьшается в объеме.

Как раньше делал я:
Открывал свой любимый PhotoShop, верстал макетик сайта, резал его на куски, перегонял из PhotoShop в HTML таблицы и потом правил этот макет в не менее любимом DreamWeaver 4. Табличная верска прекрасно отображается во встроенном браузере DreamWeaver и проблем не было. Div верстку я не делал по оч. простой причине - встроенный браузер DreamWeaver не хочет отображать div-ы, а просматривать во всех браузерах - лишняя заморочка. Теперь я понял, что не нужно лениться ;0)

Как делаю теперь:
Открываю свой любимый PhotoShop, верстаю макетик сайта.
Нарезаю изображения. Сохраняю их.
Открываю DreamWeaver.
Запускаю все браузеры, какие тока есть.
Ручками пишу HTML код в DreamWeaver (не пользуясь встроенным средством просмотра) и редактирую CSS (там очень удобная менюшка есть) в нем же. Сохраняю.
Смотрю как выглядит во всех браузерах. Если косяк, то отменяю последнее действие в DreamWeaver и опять сохраняю и смотрю.

При верстке c Div, нельзя пренебрегать стандартами W3C и просто писать:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<body bgcolor="#FFFFFF" text="#000000">

</body>
</html>

Для ДИВной верстки нужно соблюдать все правила W3C, а то, ничего толкового может не получится. А потому в качестве шаблона будем использовать след. HTML код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>Div Верстка</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>

<body bgcolor="#FFFFFF" text="#000000">

</body>
</html>

Еще несколько правил правильной верстки (не везде здесь я их буду соблюдать).

1. Незакрывающиеся в HTML теги должны быть оформлены соответствующим образом:
Все потому, что тут уже начинаются стандарты xhtml разметки (ммм... наверное, но гарантию не даю).

Не так: <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
А так: <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

Не так: <br>
А так: <br />

и т.д.

2. CSS не должен находиться в html документе, а быть в отдельном файле.
Подключается строкой вроде:
<link rel="stylesheet" href="./css/style.css" type="text/css" media="screen,projection" />
3. Тоже самое и для java-скриптов.

4. Все аргументы тегов должны оформляться в кавычки:
Не: <a href=./index.htm>link</a>
А: <a href="./index.htm">link</a>

Плюс пару не столь существенных моментов о которых я либо не знаю, либо о них умолчу.

Далее придется все div теги писать ручками в теле html, а CSS я добавляю в DreamWeaver и редактирую там же. Я не буду обращать внимание на правило 2, что б все было в одном месте.

Давайте создадим div и позиционируем его в центре страницы.

Сначала пропишем слой в теле страницы и установим все отступы тега body на ноль:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>Div Верстка</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="Мой домашний сайт" />
<meta name="keywords" content="Killich's home page" />
<meta name="author" content="killich@yandex.ru" />
<style type="text/css">

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<div id="one">
</div>

</body>
</html>

Добавим определения для слоя _one_:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>Div Верстка</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="Мой домашний сайт" />
<meta name="keywords" content="Killich's home page" />
<meta name="author" content="killich@yandex.ru" />
<style type="text/css">

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<div id="one">
<br /><br /><br /><br /><br /><br />
</div>

</body>
</html>

Вот пример того, зачем нужны стандарты W3C.
Если вы вдруг удалите строку
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
то в некоторых браузерах наш слой (который сейчас находится в центре страницы) может уплыть с середины в левый край окна браузера. Получается, что без <!DOCTYPE > нам никуда.
Именно <!DOCTYPE > отвечает в данном случае, каким образом воспринимается CSS определение:

margin-right: auto;
margin-left: auto;

Попробуем создать внутри слоя one еще три слоя и посмотрим, как они себя ведут.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>Div Верстка</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="Мой домашний сайт" />
<meta name="keywords" content="Killich's home page" />
<meta name="author" content="killich@yandex.ru" />
<style type="text/css">

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<div id="one">
<div id="two">
<br /><br /><br /><br /><br />
</div>

<div id="three">
<br /><br /><br /><br /><br />
</div>

<div id="four">
<br /><br /><br /><br /><br />
</div>
</div>

</body>
</html>

Обратите внимание, что при отображении в окне браузера, каждый из трех новых слоев отображается на следующей строчке. Т.е. получается слой под слоем. Наша задача научиться делать так, чтоб эти слои располагались не друг ПОД другом, а друг ЗА другом. В этом случае мы получим верстку в 3 колонки с помощью div (я знаю, что многие из вас именно об этом и мечтают... не так ли ;0) ).

Для того, что бы это сделать, есть, так называемое, float-свойство (плаванье слоя). Оно как раз и заставляет слои не прыгать вниз, а прижиматься СЛЕВА или СПРАВА к предыдущему слою.

Пишем следующую CSS (все остальное как было):

<style type="text/css">

</style>

Красота! 3 колонки! Но.... тока в IE!

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

Все это от того, что слои со свойством -= float: left; =- распирают по высоте только слои с аналогичным свойством. Самый простой способ исправить ситуацию : слою _one_ задать свойство -= float: left; =-, но тогда он сместиться влево, а нам нужно, что б он был по центру.

Выход в данной ситуации следующий:
1. внутри слоя _one_ создадим слой со свойством -= float: left; =-, а уже внутрь его поместим наши з слоя, которые образуют колонки. Этот новый слой прижмется к левому краю слоя _one_, а 3 внутренних слоя смогут распирать этот новый слой.
2. У слоя _one_ снимем все свойства отображения, что б его небыло видно, тогда он будет выполнять только функцию выравнивания по центру. А если он будет невидим, то нам совершенно пофигу - распирают его внутренние столбики, не распирают... какая разница?

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>Div Верстка</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="Мой домашний сайт" />
<meta name="keywords" content="Killich's home page" />
<meta name="author" content="killich@yandex.ru" />
<style type="text/css">

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<div id="one">
<div id="main">

<div id="two">
<br /><br /><br /><br /><br />
</div>

<div id="three">
<br /><br /><br /><br /><br />
</div>

<div id="four">
<br /><br /><br /><br /><br />
</div>

</div>
</div>

</body>
</html>

Посмотрите, как эта вся разметка смотриться во всех браузерах.
Наверняка в IE что то будет не так как в Опере или Мозилле.

А теперь самая малость. Скрываем с глаз долой рамочки слоя _one_ :

#one {
width: 800px;

margin-right: auto;
margin-left: auto;
}

...и все прекрасно!
3 колонки в центре страницы, да еще и смотриться во всех браузерах, да еще и в ДИВах!
Конечно, нужно подстроить размеры 3 колонок, но думаю это не сложно.

Спустя 1 час, 5 минут, 51 секунда (15.08.2008 - 19:52) ILOR написал(а):

У меня тут вопрос появился, думаю отдельную тему не стоит создавать. Вопрос таков: как содержимое дивов при помощи цсс выровнять по центру? Нашел float, но у него нет выравнивания по выравнивания по центру

.Помогите пожалуйста. Спасибо.

Спустя 44 минуты, 7 секунд (15.08.2008 - 20:36) Viking написал(а):

Цитата(ILOR @ 15.8.2008, 20:52) [snapback]46261[/snapback]

.Помогите пожалуйста. Спасибо.

http://www.htmlbook.ru/css/text-align.html

Спустя 32 минуты, 14 секунд (15.08.2008 - 21:08) ILOR написал(а):

Юзаю этот справочник, но что-то text-align неувидел

.Спасибо большое.

Спустя 3 часа, 41 минута, 1 секунда (16.08.2008 - 00:49) solwind написал(а):

Спасибо, Киллич, большое за полный (наконец!) вариант статьи!!

респект.
ща буду изучать и пробовать потихоньку.

_____________
Аксиома Дучарма:
Если рассмотреть проблему достаточно внимательно, то Вы увидите себя, как часть этой проблемы.

Быстрый ответ:

Здесь расположена полная версия этой страницы.