...
<body style="width:100%; margin:0px; padding:0px;">
<div style="height:200px; background-color:#777777;"></div>
<div style="height:400px; background-color:#66CCCC; overflow:visible;">
<div style="height:100%; background-color:#FFCC66; float:left; width:20%;"></div>
<div style="height:100%; background-color:#CCCC33; float:left; width:60%;">Много-много текста...</div>
<div style="height:100%; background-color:magenta; float:left; width:20%;"></div>
</div>
<div style="height:100px; background-color:#FFFFFF;"></div>
</body>
...
Помогите разобраться с дивами
Всем привет!
Начал осваивать вёрстку дивами, и вот возник казус, есть код:
И тут выходит, что текст в центральном диве вылазит на другие, если высота у родителя фиксированная, а если высота 100% у родителя, то вообще каша какая-то...
В общем мне надо чтобы было 3 колонки и чтобы все 3 тянулись при изменении размера центральной, ну или любой из них...
Пробовал и для родительского и для центрального дива overflow:visible; но это ничего не даёт вообще...
Что надо здесь изменить?
Начал осваивать вёрстку дивами, и вот возник казус, есть код:
Код:
И тут выходит, что текст в центральном диве вылазит на другие, если высота у родителя фиксированная, а если высота 100% у родителя, то вообще каша какая-то...
В общем мне надо чтобы было 3 колонки и чтобы все 3 тянулись при изменении размера центральной, ну или любой из них...
Пробовал и для родительского и для центрального дива overflow:visible; но это ничего не даёт вообще...
Что надо здесь изменить?
о, 3 колонки дивами - это целая наука!
Пусть меня заплюют, но проще воткнуть в таблицу.
Или попробуй родителю задать min-height
Пусть меня заплюют, но проще воткнуть в таблицу.
Или попробуй родителю задать min-height
Долго не разбирался в коде, но обычно "float: xxx" сопровождается "clear: xxx". Первое делает элемент обтекаемым, а второе сдвигает элемент с clear под все элементы, где float = xxx. Clear может быть left|right|both.
Например:
[html]
<div style="float: left"> ... </div>
<div style="float: right"> ... </div>
<div style="clear: both"></div>
<!-- все элементы ниже будут строго под двумя div'ами с float -->
[/html]
Убери div с clear - сразу всё поедет.
Подробнее смотри на W3S.
Например:
[html]
<div style="float: left"> ... </div>
<div style="float: right"> ... </div>
<div style="clear: both"></div>
<!-- все элементы ниже будут строго под двумя div'ами с float -->
[/html]
Убери div с clear - сразу всё поедет.
Подробнее смотри на W3S.
Цитата: Franky
о, 3 колонки дивами - это целая наука!
Пусть меня заплюют, но проще воткнуть в таблицу.
Или попробуй родителю задать min-height
Пусть меня заплюют, но проще воткнуть в таблицу.
Или попробуй родителю задать min-height
Так min-height это ж если статичная... А надо шоб резиновая высота была... Понятно, шо таблицами и проще и удобнее и естественнее, но дивы это ж типа Web 2.0...
Цитата: Proger_XP
Долго не разбирался в коде, но обычно "float: xxx" сопровождается "clear: xxx". Первое делает элемент обтекаемым, а второе сдвигает элемент с clear под все элементы, где float = xxx. Clear может быть left|right|both.
Например:
[html]
<div style="float: left"> ... </div>
<div style="float: right"> ... </div>
<div style="clear: both"></div>
<!-- все элементы ниже будут строго под двумя div'ами с float -->
[/html]
Убери div с clear - сразу всё поедет.
Подробнее смотри на W3S.
Например:
[html]
<div style="float: left"> ... </div>
<div style="float: right"> ... </div>
<div style="clear: both"></div>
<!-- все элементы ниже будут строго под двумя div'ами с float -->
[/html]
Убери div с clear - сразу всё поедет.
Подробнее смотри на W3S.
Я вот такую вот конструкцию замутил
[html]
<body style="width:100%; margin:0px; padding:0px;">
<div style="height:200px; background-color:#777777;"></div>
<div style="height:400px; background-color:#66CCCC;">
<div style="height:100%; background-color:#FFCC66; float:left; width:20%;"></div>
<div style="height:100%; background-color:#CCCC33; float:left; width:60%;">Бескрайнее море текста...</div>
</div>
<div style="height:100%; background-color:magenta; width:20%;"></div>
<div style="clear:both;"></div>
<div style="height:100px; background-color:#FFFFFF;"></div>
</body>
[/html]
И получилось, что правая колонка вообще исчезла... А первая подлезла под вторую, в общем всё улетело... clear:both; это типа для чистки после двух дивов же?)
У меня 3, и ещё внизу 1...
по поводу float и clear - это шаманские танцы :)
clear
Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.
Цитата:
clear
Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.
А вообще "всё украдено до нас" ;)
http://intensivstation.ch/templates/
Цитата: trivium
Всем привет!
Начал осваивать вёрстку дивами, и вот возник казус, есть код:
И тут выходит, что текст в центральном диве вылазит на другие, если высота у родителя фиксированная, а если высота 100% у родителя, то вообще каша какая-то...
В общем мне надо чтобы было 3 колонки и чтобы все 3 тянулись при изменении размера центральной, ну или любой из них...
Пробовал и для родительского и для центрального дива overflow:visible; но это ничего не даёт вообще...
Что надо здесь изменить?
Начал осваивать вёрстку дивами, и вот возник казус, есть код:
Код:
...
<body style="width:100%; margin:0px; padding:0px;">
<div style="height:200px; background-color:#777777;"></div>
<div style="height:400px; background-color:#66CCCC; overflow:visible;">
<div style="height:100%; background-color:#FFCC66; float:left; width:20%;"></div>
<div style="height:100%; background-color:#CCCC33; float:left; width:60%;">Много-много текста...</div>
<div style="height:100%; background-color:magenta; float:left; width:20%;"></div>
</div>
<div style="height:100px; background-color:#FFFFFF;"></div>
</body>
...
<body style="width:100%; margin:0px; padding:0px;">
<div style="height:200px; background-color:#777777;"></div>
<div style="height:400px; background-color:#66CCCC; overflow:visible;">
<div style="height:100%; background-color:#FFCC66; float:left; width:20%;"></div>
<div style="height:100%; background-color:#CCCC33; float:left; width:60%;">Много-много текста...</div>
<div style="height:100%; background-color:magenta; float:left; width:20%;"></div>
</div>
<div style="height:100px; background-color:#FFFFFF;"></div>
</body>
...
И тут выходит, что текст в центральном диве вылазит на другие, если высота у родителя фиксированная, а если высота 100% у родителя, то вообще каша какая-то...
В общем мне надо чтобы было 3 колонки и чтобы все 3 тянулись при изменении размера центральной, ну или любой из них...
Пробовал и для родительского и для центрального дива overflow:visible; но это ничего не даёт вообще...
Что надо здесь изменить?
странно. а с какого бы ему не залезать, если у родительского дива фиксированая высота?
Куда ему растягиватся?
если нужна выстоа при малом кол-ве текста используем min-height
Цитата: Lone Wolf
страно. а с какого бы ему не залезать, если у родительского дива фиксированая высота?
Он и без фиксированной высоты залезает.
Поправляюсь.
У родителя высоту можно оставить. а всем детям вместо height - min-height тогда все чинится
У родителя высоту можно оставить. а всем детям вместо height - min-height тогда все чинится
Да и самому нижнему добавить clear:both
итого
итого
Код:
<div style="height: 200px; background-color: rgb(119, 119, 119);"></div>
<div style="height: 400px; background-color: rgb(102, 204, 204); overflow: visible;">
<div style="min-height: 100%; background-color: rgb(255, 204, 102); float: left; width: 20%;"></div>
<div style="min-height: 100%; background-color: rgb(204, 204, 51); float: left; width: 60%;">куча текста</div>
<div style="min-height: 100%; background-color: magenta; float: left; width: 20%;"></div>
</div>
<div style="height: 100px; background-color: rgb(255, 255, 255); clear: both;"></div>
<div style="height: 400px; background-color: rgb(102, 204, 204); overflow: visible;">
<div style="min-height: 100%; background-color: rgb(255, 204, 102); float: left; width: 20%;"></div>
<div style="min-height: 100%; background-color: rgb(204, 204, 51); float: left; width: 60%;">куча текста</div>
<div style="min-height: 100%; background-color: magenta; float: left; width: 20%;"></div>
</div>
<div style="height: 100px; background-color: rgb(255, 255, 255); clear: both;"></div>
Цитата: Lone Wolf
Да и самому нижнему добавить clear:both
итого
итого
Код:
<div style="height: 200px; background-color: rgb(119, 119, 119);"></div>
<div style="height: 400px; background-color: rgb(102, 204, 204); overflow: visible;">
<div style="min-height: 100%; background-color: rgb(255, 204, 102); float: left; width: 20%;"></div>
<div style="min-height: 100%; background-color: rgb(204, 204, 51); float: left; width: 60%;">куча текста</div>
<div style="min-height: 100%; background-color: magenta; float: left; width: 20%;"></div>
</div>
<div style="height: 100px; background-color: rgb(255, 255, 255); clear: both;"></div>
<div style="height: 400px; background-color: rgb(102, 204, 204); overflow: visible;">
<div style="min-height: 100%; background-color: rgb(255, 204, 102); float: left; width: 20%;"></div>
<div style="min-height: 100%; background-color: rgb(204, 204, 51); float: left; width: 60%;">куча текста</div>
<div style="min-height: 100%; background-color: magenta; float: left; width: 20%;"></div>
</div>
<div style="height: 100px; background-color: rgb(255, 255, 255); clear: both;"></div>
А вот попробуй здесь вместо "куча текста" вставить кучу текста:)
Центральный див налазит на нижний...
Не залазит
Цитата: Lone Wolf
Не залазит
А у меня в лисе 3.5.8 залазит...
Кстати на скрине твоём остальные блоки неправильной длины
блоки той длины, которой я их и делал. ;)
ты лучше точнее обрисуй что надо
ты лучше точнее обрисуй что надо
Цитата: Lone Wolf
блоки той длины, которой я их и делал. ;)
ты лучше точнее обрисуй что надо
ты лучше точнее обрисуй что надо
Ну надо 3 блока, которые будут тянуться одинаково вниз на 100%, при любом изменении длин любого из них, ну и шапка вверху и подвал внизу.
http://www.ejeliot.com/samples/equal-height-columns/example-2.html
Не то?
Или так: 3 column div same height
А вообще, легче реально сделать на таблицах, чем вот этими дивами себе ж*пу мучать, давно для таких дел сделал таблицу, т.к. не приспособлены уж наши браузеры изначально к колонкам.
Не то?
Или так: 3 column div same height
А вообще, легче реально сделать на таблицах, чем вот этими дивами себе ж*пу мучать, давно для таких дел сделал таблицу, т.к. не приспособлены уж наши браузеры изначально к колонкам.
проще в таблицу вставить и присвоить ей table-layout: fixed, тогда ей не паддинги не маргины не помешают
Цитата: UAS
http://www.ejeliot.com/samples/equal-height-columns/example-2.html
Не то?
Или так: 3 column div same height
А вообще, легче реально сделать на таблицах, чем вот этими дивами себе ж*пу мучать, давно для таких дел сделал таблицу, т.к. не приспособлены уж наши браузеры изначально к колонкам.
Не то?
Или так: 3 column div same height
А вообще, легче реально сделать на таблицах, чем вот этими дивами себе ж*пу мучать, давно для таких дел сделал таблицу, т.к. не приспособлены уж наши браузеры изначально к колонкам.
Нет не то, надо 3 колонки: 1 - под меню и там может баннеры или ещё чего-то, 2 - это основное содержимое страницы, и 3 - это ещё может быть какой-то блок, и чтобы они тянулись на 100% по высоте, они не тянутся почему-то у меня.
Ну понятно что таблицами всё намного проще и лучше. Но вы это скажите большинству заказчиков и всяких "моднявых" верстальщиков и программеров, которые дивы считают лучшим творением человечества, а таблицы древней допотопщиной...
так, блин, я же привел ссылку, там все варианты врестки. Что не устраивает в них?
Цитата: trivium
Нет не то, надо 3 колонки: 1 - под меню и там может баннеры или ещё чего-то, 2 - это основное содержимое страницы, и 3 - это ещё может быть какой-то блок, и чтобы они тянулись на 100% по высоте, они не тянутся почему-то у меня.
Ну понятно что таблицами всё намного проще и лучше. Но вы это скажите большинству заказчиков и всяких "моднявых" верстальщиков и программеров, которые дивы считают лучшим творением человечества, а таблицы древней допотопщиной...
Ну понятно что таблицами всё намного проще и лучше. Но вы это скажите большинству заказчиков и всяких "моднявых" верстальщиков и программеров, которые дивы считают лучшим творением человечества, а таблицы древней допотопщиной...
http://www.ejeliot.com/samples/equal-height-columns/example-2.html
Глаза раскройте и посмотрите повнимательней - там одинаковая высота.
+1 к посту Franky.
Цитата: UAS
http://www.ejeliot.com/samples/equal-height-columns/example-2.html
Глаза раскройте и посмотрите повнимательней - там одинаковая высота.
+1 к посту Franky.
Глаза раскройте и посмотрите повнимательней - там одинаковая высота.
+1 к посту Franky.
А вы глаза раскройте и посмотрите какое расположение у этих дивов, они налеплены друг на друга. Это похоже на диз сайта?
Забавный способ)) Но из-за картинки теперь ширина колонок задана жестко. Жаль нет метода сочитающего резину и по вертикали и по горизонтали.
А зачем тебе вообще эти "height" в стилях? Они портят всё дело, ИМХО.
Например, этот код работает в FF 3 и IE 6 (смотри скрин):
[html]
<div style="height:200px; background-color:#777777;">верхний</div>
<div style="height:; background-color:#66CCCC; overflow:visible;">
<div style="height:; background-color:#FFCC66; float:left; width:20%;">левый</div>
<div style="height:; background-color:#CCCC33; float:left; width:60%;">Много-много текста...</div>
<div style="height:; background-color:magenta; float:left; width:20%;">правый</div>
<div style="clear: both">----------------</div>
</div>
<div style="height:100px; background-color:#FFFFFF;">нижний</div>
[/html]
Например, этот код работает в FF 3 и IE 6 (смотри скрин):
[html]
<div style="height:200px; background-color:#777777;">верхний</div>
<div style="height:; background-color:#66CCCC; overflow:visible;">
<div style="height:; background-color:#FFCC66; float:left; width:20%;">левый</div>
<div style="height:; background-color:#CCCC33; float:left; width:60%;">Много-много текста...</div>
<div style="height:; background-color:magenta; float:left; width:20%;">правый</div>
<div style="clear: both">----------------</div>
</div>
<div style="height:100px; background-color:#FFFFFF;">нижний</div>
[/html]
Proger_XP, я так понимаю, что trivium'у нужно что бы колонки были одинаковой длины. В этом то и затык.
Я вообще толком не понимаю вопроса, ибо
Цитата:
И тут выходит, что текст в центральном диве вылазит на другие, если высота у родителя фиксированная, а если высота 100% у родителя, то вообще каша какая-то...
В общем мне надо чтобы было 3 колонки и чтобы все 3 тянулись при изменении размера центральной, ну или любой из них...
В общем мне надо чтобы было 3 колонки и чтобы все 3 тянулись при изменении размера центральной, ну или любой из них...
тут говорится исключительно про высоту дивов.
Цитата: DuMMeR
Proger_XP, я так понимаю, что trivium'у нужно что бы колонки были одинаковой длины. В этом то и затык.
Вот-вот, да одинаковой длины, и чтобы ширины были фиксированной и текст никуда за пределы дивов не вылазил, а так почему-то не выходит:(
Оно?
Код:
<body style="width:100%; margin:0px; padding:0px;">
<div style="height: 200px; background-color: rgb(119, 119, 119);"></div>
<div style="background-color: rgb(204, 204, 51); position: relative; left: 20%; min-height: 400px; width: 60%;">
<div style="background-color: rgb(255, 204, 102); position: absolute; height: 100%; left: -33.5%; top: 0px; width: 33.5%;"></div>
Много-много текста...
<div style="background-color: magenta; clear: both; height: 100%; float: right; position: absolute; top: 0px; left: 100%; width: 33.4%;"></div>
</div>
<div style="height: 100px; background-color: rgb(255, 255, 255); "></div>
</body>
<div style="height: 200px; background-color: rgb(119, 119, 119);"></div>
<div style="background-color: rgb(204, 204, 51); position: relative; left: 20%; min-height: 400px; width: 60%;">
<div style="background-color: rgb(255, 204, 102); position: absolute; height: 100%; left: -33.5%; top: 0px; width: 33.5%;"></div>
Много-много текста...
<div style="background-color: magenta; clear: both; height: 100%; float: right; position: absolute; top: 0px; left: 100%; width: 33.4%;"></div>
</div>
<div style="height: 100px; background-color: rgb(255, 255, 255); "></div>
</body>
Lone Wolf
У тебя тоже дивы разной длины, плюс "min-*" свойства не работают в IE 6-.
trivium
Так а в чём проблема? Ты же сам указал дивам длину 60%. Поставь 33% и будет им поровну:
[html]
<div style="height:200px; background-color:#777777;">верхний</div>
<div style="height:; background-color:#66CCCC; overflow:visible;">
<div style="height:; background-color:#FFCC66; float:left; width:33%;">левый</div>
<div style="height:; background-color:#CCCC33; float:left; width:33%;">Много-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много ного текстаМного-много текстаМного-много текста</div>
<div style="height:; background-color:magenta; float:left; width:33%;">правый</div>
<div style="clear: both">----------------</div>
</div>
<div style="height:100px; background-color:#FFFFFF;">нижний</div>
[/html]
У тебя тоже дивы разной длины, плюс "min-*" свойства не работают в IE 6-.
trivium
Так а в чём проблема? Ты же сам указал дивам длину 60%. Поставь 33% и будет им поровну:
[html]
<div style="height:200px; background-color:#777777;">верхний</div>
<div style="height:; background-color:#66CCCC; overflow:visible;">
<div style="height:; background-color:#FFCC66; float:left; width:33%;">левый</div>
<div style="height:; background-color:#CCCC33; float:left; width:33%;">Много-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много текстаМного-много ного текстаМного-много текстаМного-много текста</div>
<div style="height:; background-color:magenta; float:left; width:33%;">правый</div>
<div style="clear: both">----------------</div>
</div>
<div style="height:100px; background-color:#FFFFFF;">нижний</div>
[/html]
Одинаковой длины. А ИЕ6- на е нужен. последня фраза на правах тролинга ;)
а min-height - там не обязательно.
а min-height - там не обязательно.
Цитата:
Одинаковой длины.
Так, блин, я так и не пойму, какие колонки нужны одинаковой ширины-то? Все 3 или 2 по бокам? О_о
Впрочем, тут по моему уже на все случаи жизни вариантов предложили, автору остаётся только выбирать.
Цитата:
А ИЕ6- на е нужен.
[COLOR="DimGray"]Если б это было так... :)[/COLOR]
как я понял левый и правый должны тянутся по высоте вместе с центральным.
trivium, так в чем тогда затык? UAS привел ссылку на вполне подходящий тебе пример. Только фоновую картинку перерисуй так как тебе нужно и все.
Цитата: Proger_XP
Если б это было так... :)
А так и есть. IE8 вместе с обновлениями винды распространяется. У кого ещё 6-й остался? Кроме как у меня дома, потому что винду я там не обновляю (сижу за кучей роутеров) и эксплорером не пользуюсь.
Цитата:
А так и есть. IE8 вместе с обновлениями винды распространяется. У кого ещё 6-й остался? Кроме как у меня дома, потому что винду я там не обновляю (сижу за кучей роутеров) и эксплорером не пользуюсь.
У меня стоит IE6 совместно с IE8 portable, обоими пользуюсь для отладки только. Хотя последнее время, действительно, IE6 гораздо мене используемый,, так что можно уже меньше заморачиваться по его поводу. Но всё же...
p.s: Гугл тоже забил на поддержку IE6 с начала марта :)
p.p.s: если бы все юзеры обновлялись вовремя, то не было бы таких глобальных ботнетов вроде Conficker'а...
Цитата: Lone Wolf
Оно?
Код:
<body style="width:100%; margin:0px; padding:0px;">
<div style="height: 200px; background-color: rgb(119, 119, 119);"></div>
<div style="background-color: rgb(204, 204, 51); position: relative; left: 20%; min-height: 400px; width: 60%;">
<div style="background-color: rgb(255, 204, 102); position: absolute; height: 100%; left: -33.5%; top: 0px; width: 33.5%;"></div>
Много-много текста...
<div style="background-color: magenta; clear: both; height: 100%; float: right; position: absolute; top: 0px; left: 100%; width: 33.4%;"></div>
</div>
<div style="height: 100px; background-color: rgb(255, 255, 255); "></div>
</body>
<div style="height: 200px; background-color: rgb(119, 119, 119);"></div>
<div style="background-color: rgb(204, 204, 51); position: relative; left: 20%; min-height: 400px; width: 60%;">
<div style="background-color: rgb(255, 204, 102); position: absolute; height: 100%; left: -33.5%; top: 0px; width: 33.5%;"></div>
Много-много текста...
<div style="background-color: magenta; clear: both; height: 100%; float: right; position: absolute; top: 0px; left: 100%; width: 33.4%;"></div>
</div>
<div style="height: 100px; background-color: rgb(255, 255, 255); "></div>
</body>
О! Вот это самый цинус:)Пасиба) Только я не понял зачем там position:absolute ?