-
Представляю Вашему вниманию следующию задачу:
есть макет страницы [attachment=930:attachment], которую с легкостью можно реализовать табличной версткой, но нужно это сделать при помощи CSS.
У меня получился следующий код
Код:
<style>
#m_body {
****width: 800px;
****position: absolute;
****top: 10px;
****left: 50%;
****margin-left: -400px;
}
#b1 {
*width: 206px; height: 156px;
*background-color: Aqua;
*float: left;
****overflow: hidden;
}
#b2 {
*width: 594px; height: 110px;
*background-color: Blue;
*float: left;
****overflow: hidden;
}
#b3 {
*width: 189px; height: 46px;
*background-color: Fuchsia;
*float: left;
****overflow: hidden;
}
#b4 {
*width: 185px; height: 270px;
*background-color: Green;
*float: right;
****overflow: hidden;
}
#b5 {
*width: 220px; height: 270px;
*background-color: Lime;
*float: right;
****overflow: hidden;
}
#b6 {
*width: 160px; height: auto;
*background-color: Maroon;
*float: left;
}
#b7 {
*width: 235px; height: auto;
*background-color: Navy;
*float: left;
}
#b8 {
*width: 405px; height: auto;
*background-color: Olive;
*float: left;
}
#b9 {
*width: 800px; height: 75px;
*background-color: Purple;
*clear: left;
****overflow: hidden;
}
</style>
</head>
<body>
<div id="m_body">
****<div id="b1"><script>for (i=0; i<300; i++)document.write('b1 ');</script></div>
****<div id="b2"><script>for (i=0; i<300; i++)document.write('b2 ');</script></div>
****<div id="b3"><script>for (i=0; i<300; i++)document.write('b3 ');</script></div>
****<div id="b4"><script>for (i=0; i<300; i++)document.write('b4 ');</script></div>
****<div id="b5"><script>for (i=0; i<300; i++)document.write('b5 ');</script></div>
****<div id="b6"><script>for (i=0; i<300; i++)document.write('b6 ');</script></div>
****<div id="b7"><script>for (i=0; i<300; i++)document.write('b7 ');</script></div>
****<div id="b8"><script>for (i=0; i<300; i++)document.write('b8 ');</script></div>
****<div id="b9"><script>for (i=0; i<300; i++)document.write('b9 ');</script></div>
</div>
</body>
Но вся проблема, что высота колонок b6, b7 и b8 неизвестна.
Вопрос: как выравнять высоту этих колонок?
з.ы. Пробывал height=100% и указание нужных отступов, но у менея не работает (высота никак не хочет становиться 100%)
Заранее спасибо
-
Почитай:
[Only registered and activated users can see links. Click Here To Register...]
-
Я так понял нужно использовать фоновые изображения для заполнения всей доступной высоты., но как использовать я пока не совсем понимаю. И вообще я пока плохо представляю как работает вложенность DIV'ов.
Если кто может пусть кинет ссылку где про это можно почитать на доступном языке и желательно с пояснениями зачем делаем так а не иначе.
-
И всетаки у меня не получается сделать так что бы колонки заполняли все доступное пространство по высоте.
Если можно покажите бедному начинающиму CSS верстальщику как делать правельно.
-
Utyf, на дивах нереально. (прямым способом)
Проблема в том, что если мы откинем футер, то не сможем разделить макет па отдельные части ни по горизонтали, ни по вертикали.
-
Кирилл, значит это тот из немногих пример, который легко выполнить в табличной верстке, а в блочной нереально??
-
Utyf, вам не нужно выравнивать высоту блоков, а визуально разднлить. Для этого и используется фоновое изображение.
А сверстать это вполне реально, тем более, если все фиксированной ширины.
Кстати, почему общая ширина равна 800 пикселей? В экран с разрешением 800×600 не влезет.
-
Utyf, реально всё. Если ширина фикс, то можно сделать JS, который будет считать позиции для дивов с position: absolute. Но оно надо?
kost, а если все 3 тянущиеся колонки имеют разный фон? [Only registered and activated users can see links. Click Here To Register...]
Табличный каркас, а дальше дивы. И жизнь прекрасна.
-
Кирилл, даже если 3 колонки имеют разный фон это ничего не меняет [Only registered and activated users can see links. Click Here To Register...] сделать можно!
Сверстать пример?
-
agat, да будь добр сверстай пожалуйста
Я то у меня что то не получается
-
agat, если без жабаскриптов и в ИЕ все дивы растянутся на пустое пространство по высоте, ты станешь моим кумиром. )
-
[Only registered and activated users can see links. Click Here To Register...] - воть.
А тут - [Only registered and activated users can see links. Click Here To Register...] находится нормальная версия, такой, какой она должна быть на самом деле. IE без костылей лажается по полной [Only registered and activated users can see links. Click Here To Register...]
-
agat, пожалел бы глаза мои... и не только мои, кстати.
Сверстал отлично, но единственный момент... а если резина? Маргины и пэддинги сделать в процентах? Имхо не всегда прокатит...
-
Прокатит, если не делать всю ширину равной в сумме 100%, а чуть меньше 99,8% например.
Оставлять безопасные края [Only registered and activated users can see links. Click Here To Register...]
-
-
Ндаа, впечетляет
Сейчас буду разбирать все по полочкам. Надеюсь тогда пойму что да как.
agat, ОГРОМНОЕ СПАСИБО !!!
-
Utyf, начинай с этого [Only registered and activated users can see links. Click Here To Register...]
а потом посмотри на хаки в этом для осла [Only registered and activated users can see links. Click Here To Register...]
