Автор Тема: CSS задачка  (Прочитано 4506 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн Greg

  • пинёг
  • Ветеран
  • *****
  • Сообщений: 618
  • +0/-0
  • 2
    • Просмотр профиля
    • http://www.bsfera.ru
CSS задачка
« : 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-й слои налезают друг на друга

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

Думаю ещё сам, но жду и от вас предложений!
« Последнее редактирование: 01 Февраля 2006, 10:35:57 от Greg »
Пространные размышления об ИТ и все что вокруг

Оффлайн y4an

  • Завсегдатай
  • Пользователь
  • **
  • Сообщений: 51
  • +0/-0
  • 0
    • Просмотр профиля
    • http://berega-next.ru/
CSS задачка
« Ответ #1 : 07 Февраля 2006, 23:47:54 »
скорее всего надо пользовать яву + expression
открой для себя новые БЕРЕГА

Оффлайн USE

  • Любитель
  • Ветеран
  • *****
  • Сообщений: 720
  • +0/-0
  • 2
    • Просмотр профиля
CSS задачка
« Ответ #2 : 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....
Не ходите, дети, без «Мозиллы» дальше localhost!

Оффлайн Greg

  • пинёг
  • Ветеран
  • *****
  • Сообщений: 618
  • +0/-0
  • 2
    • Просмотр профиля
    • http://www.bsfera.ru
CSS задачка
« Ответ #3 : 09 Февраля 2006, 11:33:27 »
USE
такую штуку и я мог замутить :)
но прикол-то в том, что слой #menu (если внимательно прочитать условия задачки) должен иметь ФИКСИРОВАННУЮ ширину в пикселях а не процентах!
Пространные размышления об ИТ и все что вокруг

Оффлайн Greg

  • пинёг
  • Ветеран
  • *****
  • Сообщений: 618
  • +0/-0
  • 2
    • Просмотр профиля
    • http://www.bsfera.ru
CSS задачка
« Ответ #4 : 16 Февраля 2006, 14:33:29 »
задачку решил сам, но наполовину..

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

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

ломаю голову дальше
Пространные размышления об ИТ и все что вокруг

Оффлайн Greg

  • пинёг
  • Ветеран
  • *****
  • Сообщений: 618
  • +0/-0
  • 2
    • Просмотр профиля
    • http://www.bsfera.ru
CSS задачка
« Ответ #5 : 16 Февраля 2006, 14:40:32 »
кстати, забыл уапомянуть, что такая фигня (с таблицами) получается только в ИЕ (едрить его кудрить!)
Пространные размышления об ИТ и все что вокруг

 

Sitemap 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28