Forum Webscript.Ru

Дизайн и Верстка => Всё о Html => Тема начата: Greg от 01 Февраля 2006, 10:27:51

Название: CSS задачка
Отправлено: Greg от 01 Февраля 2006, 10:27:51
есть три слоя на странице (именно слоя): #div1, #div2 и #div3, они идут слева направо, то бишь так:

+-----+ +-----+ +-----+
|#div1| |#div2|  |#div3|
+-----+ +-----+ +-----+

#div1 имеет фиксированную ширину X px, остальные два слоя нужно сделать "резиновыми" (в процентах), чтобы на разных разрешениях вся область экрана была заполнена

делаю так:


div#div1
{
position:absolute;
left:0px;
top:120px;
width:198px;
margin:0px;
}
div#div2
{
position:absolute;
left:210px;
top:140px;
width:50%;
z-index:1;
margin-top:0;
}
div#rights
{
position:absolute;
right:10px;
top:140px;
width:20%;
z-index:2;
}

однако на разрешении 1280*1024 появляется бостаточно неприятный пробел между 2-м и 3-м слоем, при уменьшении до разрешения 800*600 он уменьшается до нормальных значений, а при увеличении, увеличивается в большую сторону. если делать разрешение ещё меньше (или просто изменять размеры окна браузера) 2-й и 3-й слои налезают друг на друга

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

Думаю ещё сам, но жду и от вас предложений!
Название: CSS задачка
Отправлено: y4an от 07 Февраля 2006, 23:47:54
скорее всего надо пользовать яву + expression
Название: CSS задачка
Отправлено: USE от 09 Февраля 2006, 11:08:38
CSS:

#container
{
float: left;
width: 80%;
}

#menu
{
float: left;
width: 40%;
}

#content
{
float: right;
width: 60%;
}

#adv
{
float: right;
width:20%;
}

HTML:



...



...




...



Три точки заменяем текстом.
для более наглядного размещения, для блоков можете задать
фон, тогда будет хорошо видно что и где размещено и куда тянется.

Данный макет будет резиновым. Смотрелось в ФФ1501, ИЕ6....
Название: CSS задачка
Отправлено: Greg от 09 Февраля 2006, 11:33:27
USE
такую штуку и я мог замутить :)
но прикол-то в том, что слой #menu (если внимательно прочитать условия задачки) должен иметь ФИКСИРОВАННУЮ ширину в пикселях а не процентах!
Название: CSS задачка
Отправлено: Greg от 16 Февраля 2006, 14:33:29
задачку решил сам, но наполовину..

сделал так (без кода): фиксирую правый и левый див по ширине и положению, а средний, только по положению относительно правого (левого), по ширине он свободен, но слева его ограничивает margin-left, равный по величине ширине левого дива+промежуточек... вот как-то так

но теперь проблемка такая: таблицы, указанные шириной в 100% уезжают куда не попадя...

ломаю голову дальше
Название: CSS задачка
Отправлено: Greg от 16 Февраля 2006, 14:40:32
кстати, забыл уапомянуть, что такая фигня (с таблицами) получается только в ИЕ (едрить его кудрить!)