Шаблон DIV в 3 колонки

**aats** · 01.08.2007, 10:40

Ваше право строить любые гипотезы. Даже такие нелепые, как эта...

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

Выровняется по центру, как и в других браузерах.

Вот кусок кода:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "...">

<html>
<head>
****<title>Title</title>
****<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
****<style type="text/css">
 *body {max-width: 800px;}
 *div {background-color: #000; width:100%;}
****</style>
</head>
<body>
****
</body>
</html>

- в Opera и Mozilla получается черная полоска, выровненная по левому краю.

Предполагается, что читающие данную тему знают, как научить IE6 понимать свойства min/max-width/height.

Предполагается, что знающие, "как научить IE6 понимать свойства min/max-width/height", не станут задавать вопросов о том, как сделать трехколоночный шаблон.

PS: Гм... Товарищ Aykroyd, видимо, вы не очень умеете воспринимать критику в свой адрес...

**Aykroyd** · 01.08.2007, 11:06

Originally posted by aats@Aug 1 2007, 10:40
Вы еще скажите, что вы лучше меня видите, что у меня на мониторе изображено...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Нет, этого я говорить не буду. Но мне вполне достаточно того, что я знаю, КАК это изображается на мониторе у меня, а также у всех остальных моих коллег и пользователей данного ресурса. У IE6 нет никаких проблем с восприятием кодировки UTF-8, и это общеизвестно. Более того, говорить о "кириллице" или "не кириллице" в контексте данной кодировки по меньшей мере просто абсурдно...

Originally posted by aats@Aug 1 2007, 10:40
Вот кусок кода:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "..."> <html> <head> ****<title>Title</title> ****<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> ****<style type="text/css"> *body {max-width: 800px;} *div {background-color: #000; width:100%;} ****</style> </head> <body> ****<div>1</div> </body> </html>

- в Opera и Mozilla получается черная полоска, выровненная по левому краю.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

Совершенно верно. Она и будет получаться по левому краю, так как это – ожидаемое поведение. Во-первых, Вы совершенно ничего не предприняли, для того чтобы выровнять блок body по центру, а во-вторых, не совсем понятно какое отношение имеет представленный Вами пример к опубликованному мной ранее решению.

Originally posted by aats@Aug 1 2007, 10:40
Предполагается, что знающие, "как научить IE6 понимать свойства min/max-width/height", не станут задавать вопросов о том, как сделать трехколоночный шаблон.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Очередная "гипотеза". Либо учите матчасть сами, либо формулируйте вопросы более корректно – создавайте темы, спрашивайте, интересуйтесь, но не делайте поспешных выводов. И тогда Вам здесь обязательно помогут решить любую проблему. Еще могу посоветовать пользоваться поиском по форуму.

Originally posted by aats@Aug 1 2007, 10:40
PS: Гм... Товарищ Aykroyd, видимо, вы не очень умеете воспринимать критику в свой адрес...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Товарищ aats, я с удовольствием воспринимаю в свой адрес только объективную и конструктивную критику. Так уж повелось... Поспешные выводы и высказывания, базирующиеся на банальной нехватке знаний – это, простите, не есть критика...

**Грин** · 19.09.2007, 17:38

В коде от Aykroyd присутствует

margin: 0px auto;
overflow:hidden;

опишите, зачем они используются

**Aykroyd** · 19.09.2007, 18:00

margin: 0px auto; используется для горизонтального центрирования блочного элемента внутри родительского элемента (контейнера)...

Свойство overflow со значением hidden предназначено для устранения проваливания элементов с float через низ содержащего их контейнера в нормальных браузерах...

**Грин** · 19.09.2007, 18:13

Уважаемый Aykroyd, видимо я столкнулся с этой проваливанием в самом начале своего знакомства с версткой дивами.

Взгляните [Только зарегистрированные пользователи могут видеть ссылки. ]
Есть ли другой вариант кроме overwrite?

Отдельная тема для этого мной уже создана designforum.ru/topic27003.html

**Грин** · 24.09.2007, 14:49

Подскажите.

Если у меня стоит

#div1 {
width:100%;
margin-right:-200px;
}

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

Задача: сделать внутри div1 две ячейки по 50% от его размера, а не от общего)

<div id="div1">

<div>50%</div> <div>50%</div>

</div>

**Aykroyd** · 24.09.2007, 16:52

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

закрывает правую ячейку..

И еще... Забудьте Вы про ячейки... Нет в блочной модели никаких ячеек...

**MixMax** · 14.10.2007, 21:13

а скрипт где

script src="js/minmax.js" type="text/JavaScript

**Aykroyd** · 15.10.2007, 07:10

[Только зарегистрированные пользователи могут видеть ссылки. ]

**Грин** · 21.10.2007, 00:38

И все-таки, раз есть тема давайте выведем основные шаблоны 3-колоночных сайтов с масштабируемым центральным блоком.

Честно признаюсь, для меня большая проблема - проваливания из-за превышающего размеры центрального поля в неправильных броузерах.

**Aykroyd** · 21.10.2007, 00:45

Originally posted by Грин@Oct 21 2007, 00:38
И все-таки, раз есть тема давайте выведем основные шаблоны 3-колоночных сайтов с масштабируемым центральным блоком.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

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

**barmalei** · 21.10.2007, 13:50

Как сделать что бы левая и правая колонка была одинакового размера по длине? До самого футера.
У меня правая колонка длиннее левой и в результате левая не дотягивается до футера..
Верстал по шаблону Aykroyd

**Aykroyd** · 21.10.2007, 16:30

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

Как сделать что бы левая и правая колонка была одинакового размера по длине?

Никак.

Потому что в CSS нет средств сказать «высота как вот у того другого элемента».
Но выход есть. Причем весьма известный. И писал я о нем довольно много, правда, в других темах...

Воспользуйтесь техникой Faux Columns... Не задавайте фоновый цвет или изображения для самих колонок... Для левой колонки задайте фоновое изображение в элементе html, а для правой – в элементе body...

И будет Вам счастье...

P.S. Правда, от max-width в данном конкретном случае скорее всего придется отказаться...

**barmalei** · 21.10.2007, 17:46

Прошу извинить меня, но честно говоря не понял...

**Aykroyd** · 21.10.2007, 17:56

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Центр - Левая - Правая</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {margin: 0px; padding: 0px;}
html {background: url(img/bgleft.gif) #CCFFFF repeat-y; height: 100%;}
body {background: url(img/bgright.gif) repeat-y right top; min-width: 776px; min-height: 100%; position: relative;}
* html body {height: 100%;}

#header {background: #FFFF99; height: 100px;}

#content {width: 100%; padding-bottom: 70px; overflow: hidden;}

#outer1 {width: 100%; margin-right: -200px; float: left;}
#outer2 {margin-right: 200px;}
#outer3 {width: 100%; margin-left: -150px; float: right;}

#main {margin-left: 150px;}
#news {width: 150px; float: left;}
#present {width: 200px; float: right;}

#footer {background: #66FFCC; width: 100%; height: 70px; position: absolute; bottom: 0px;}
* html #footer {bottom: -1px;}
</style>
<script src="js/minmax.js" type="text/JavaScript"></script>
</head>

<body>
<div id="header">Заголовок</div>

<div id="content">

****<div id="outer1">
 *<div id="outer2">
 *****<div id="outer3">
 * *<div id="main">Контент</div>
 *****</div>

 *****<div id="news">Новости</div>

 *</div>
****</div>

****<div id="present">Презентация</div>

</div>

<div id="footer">Футер</div>
</body>
</html>

**barmalei** · 21.10.2007, 18:26

Спасибо, за пример, но у меня немножко посложнее ситуация..
у меня в левую колонку(div) вписана таблица, в таблице только левому столбцу надо сделать bgcolor, Т.е. у левой колонки нет бэка..

**Aykroyd** · 21.10.2007, 18:35

Originally posted by barmalei@Oct 21 2007, 18:26
у меня в левую колонку(div) вписана таблица
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
А Вы уверены, что ей там самое место? )

Originally posted by barmalei@Oct 21 2007, 18:26
в таблице только левому столбцу надо сделать bgcolor
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Ну так и сделайте ему фоновый цвет. В чем проблема? Только не атрибутом bgcolor, а при помощи стилевых спецификаций. Если же необходимо, чтобы этот столбец тянулся до самого футера – НЕ делайте ему фоновый цвет. Подложите вместо этого фонового цвета соответствующее фоновое изображение (с необходимым цветом) в элемент html. Хрен редьки не слаще...

Originally posted by barmalei@Oct 21 2007, 18:26
Т.е. у левой колонки нет бэка..
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
По Вашему бэк – это обязательно во всю ширину колонки?

**barmalei** · 21.10.2007, 18:46

Я верстал сайт по этому шаблону

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Шаблон DIV: 3 колонки, центральная резиновая</title>
<script type="text/javascript" src="minmax.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" media="all" />
</head>
<body>

<div id="header">Заголовок

<div id="container">
<div id="container-content">
*
</div>

</div>

</body>
</html>[/quote]
У Вас же теперь совершенно другая структура... придеться передалыватЬ?
Подскажите как бек не на всю ширину сделать?

**Aykroyd** · 21.10.2007, 18:54

Originally posted by barmalei@Oct 21 2007, 18:46
Я верстал сайт по этому шаблону
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
А где Вы его взяли?

В этой теме таких шаблонов (с такой структурой и такими идентификаторами) даже близко не встречалось.

Originally posted by barmalei@Oct 21 2007, 18:46
Подскажите как бек не на всю ширину сделать?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Вы издеваетесь? )
У Вас проблема сделать в Фотошопе картинку меньшей ширины?

**barmalei** · 21.10.2007, 19:33

Сдурил так сдурил.. гляжу тема обновилась, думал файл приатаченый автором - теперь эталонный шаблон, его и взял за основу.. Опять верстать :fie: :fie: :fie:

Я так понимаю в левой и правой колонке - вообще нельзя будет вставлять рисунки?
Или к примеру, у меня в DIV(правая колонка) вписана таблица, в одной из ячеек таблицы вставлена картинка.
Это так и останется:

Тема: Шаблон DIV в 3 колонки

Опции темы

Поиск по теме

Отображение

Комбинированный просмотр

Похожие темы

HTML шаблон

Шаблон Div в 3 колонки

Шаблон на DIV'ах

Шаблон DIV в 3 колонки

Шаблон из html в php

Ваши права