Резиновый, БОЛЬШЕ 3-х колонок, РАВНАЯ ВЫСОТА, не работает в Опере :(

[maza]

Вс? время добивался одного и тогоже... то что есть в таблицах и это элементарно в цсс это что-то сверхестественное..

дизайн состоит из 5 колонок (4 колонки в одной) , почему? из-за фоновых изображений, можно было сделать из 3-х колонок, но решил сэкономить на размерах изображений, тем более если сделал 3, то 4, 5, 6 и больше ты тоже сделаешь.

КОРОЧЕ:

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

Кто-то может тыкнуть пальцем где нужно исправить чтобы в Опере заработало ?

сайт

[YETI]

У меня в опере все колонки одинаковой высоты. Только блок с двойками почемуто вверху.

[yopopt]

Попробуйте в блоке leftColumn вместо min-height:100%; использовать height:100%;

[maza]

yopopt, вы как всегда на высоте!!!Спасибо! Помогло! Ура!!!!!!

{...отредактиравано lancer}

[rash]

  yopopt said:

Попробуйте в блоке leftColumn вместо min-height:100%; использовать height:100%;

А вы можете объяснить, в чем разница между этими правилами?

У меня в выпадающем меню была аналогичная ситуация с шириной, помогла ваша подсказка, но хотелось бы понять, какая для браузера разница, растягивать на 100% по height/min-height или width/min-width, я пытался найти объяснение для своего случая в спецификации, но либо не нашел, либо его там нет -)

Просто хочется понять разницу, чтобы не допускать подобных ошибок.

Если объяснение все-таки есть в спецификации - дайте, пожалуйста, ссылку.

[maza]

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

Хотелось бы в одном макете решить все задачи, просто и понятно..

Вопрос на засыпку! Можно ли написать скрипт, который бы отслеживал изменения окна браузера? (чтобы скрипт который выравнивает колонки при изменении заного считал их, просто обновил страницу, когда юзверь изменит размер окна)

[yopopt]

  rash said:

  yopopt said:

Попробуйте в блоке leftColumn вместо min-height:100%; использовать height:100%;

А вы можете объяснить, в чем разница между этими правилами?

У меня в выпадающем меню была аналогичная ситуация с шириной, помогла ваша подсказка, но хотелось бы понять, какая для браузера разница, растягивать на 100% по height/min-height или width/min-width, я пытался найти объяснение для своего случая в спецификации, но либо не нашел, либо его там нет -)

Просто хочется понять разницу, чтобы не допускать подобных ошибок.

Если объяснение все-таки есть в спецификации - дайте, пожалуйста, ссылку.

Его там нет. По крайней мере я не наш?л. Скорее это от специфического понимания его разными браузерами. Или от какой-то незаметной на первый взгляд кривости в?рстки. И тут оста?тся либо копать глубже, либо, если есть возможность, использовать height/width.

P.S. В данном случае я не понял зачем писать "минимальная высота равна высоте родительского элемента"( min-height:100%; ). Абсолютно бессмысленно. Лучше "высота равна высоте родительского элемента"( height:100%; ).

  maza said:

Вопрос на засыпку! Можно ли написать скрипт, который бы отслеживал изменения окна браузера? (чтобы скрипт который выравнивает колонки при изменении заного считал их, просто обновил страницу, когда юзверь изменит размер окна)

Можно. Просто в событии onresize (window.onresize) пересчитываете колонки.

[maza]

yopopt, я не бум-бум в яве если вам не сложно, если это не долго писать, можете сделать? плиз!

блин, тупого включил...

<script type="text/javascript">

window.onload = function()

{

// get the offset height of the center div and apply it to the sidebars

var centerElement = document.getElementById('centerColumn').offsetHeight + 'px';

document.getElementById('leftColumn').style.height = centerElement;

document.getElementById('rightColumn').style.height = centerElement;

document.getElementById('left2Column').style.height = centerElement;

document.getElementById('right2Column').style.height = centerElement;

}

window.onresize = function()

{

// get the offset height of the center div and apply it to the sidebars

var centerElement = document.getElementById('centerColumn').offsetHeight + 'px';

document.getElementById('leftColumn').style.height = centerElement;

document.getElementById('rightColumn').style.height = centerElement;

document.getElementById('left2Column').style.height = centerElement;

document.getElementById('right2Column').style.height = centerElement;

}

[maza]

ребята, можете подсказать, заш?л в тупик...

сверху абсолютный див 155px

под ним relative div поднятый на 65 пикселей.

в Опере этот поднятый на 65 пикселей див отображается Поверх абсолютного, а в ФФ наоборот задал z-index'ы - не помогает ((

[Шурик]

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

А вообще, я не совсем понял, как должно быть. Может тебе и надо, чтобы они наслаивались друг на друга?

[maza]

мне надо так:

есть слой на 100% по высоте. 155 пикселей вверху занимает абсолютный див, который НА этом слое. Дальше ид?т relative-div, который должен быть поднять на 65 пикселей и быть поверх всех сло?в.

ну вот вроде вс? просто...

вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>СЦУКО</title>
<style type="text/css">

div.wrapper
{
width: 100%;
height: 100%;
background: #ccc;
color: #222;
}
#content {
 border: 1px dashed red;
}
#contentcol {
top: 65px;
padding-bottom: 0px;
z-index: 3;
}
#obvwapka {
position: absolute;
height: 155px;
background-color: #000080;
width: 100%;
}
</style>
</head>
<body>


<div id="obvwapka"> 
wapka
</div>
<div class="wrapper">
<div id="centerColumn">

<div id="content"><div id="contentcol">
<div class="title">Title</div>

1[Center Column]
[left Column]

[left Column]

[left Column]

[left Column]

[left Column]

[left Column]

[left Column]

[left Column]

[left Column]

[left Column]

[left Column]

[left Column]2
</div></div>

</div></div>

</body>
</html>

[maza]

есть макет в котором 5 колонок, надо чтобы 3-яя была поднята , к примеру на 60 px, и была поверх шапки.

посмотрите в Опере или ИЕ, также чтоб было нужно и в ФФ...

вот верстка:

http://www.polyana-skazok.org.ua/ffopera.html