Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
     
  Галерея  
  Весельчак У  
  Наша Вики  
  Хранилище  
  Проекты  
     
Правила
     
  Правила форума Правила русского языка  
     
Помощь Поиск Календарь Почта Войти Регистрация  
Форум программистов «Весельчак У» > Направления программирования > Web > Тема: Помогите расположить div-ы используя css
 
Страниц: [1]   Вниз
« предыдущая тема следующая тема »
  Печать  
Автор Тема: Помогите расположить div-ы используя css  (Прочитано 21267 раз)
0 Пользователей и 4 Гостей смотрят эту тему.
Kivals
Команда клуба

ca
Offline Offline
Пол: Мужской

WWW
« : 23-08-2007 05:33 » 
Нужно создать универсальную структуру окон (как на рисунке), используя css.
Нужно чтобы поддерживалось всеми популярными броузерами (включая ИЕ).
Наибольшую сложность вызывает нижняя панель (из-за отсутствия "position: fixed;" в ИЕ) и возможного наличия скрола в главной панели, который не должен залазить под нижнюю панель.
Кто в теме?
* divs.PNG (8.05 Кб - загружено 1346 раз.)
Записан
Kivals
Команда клуба

ca
Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 23-08-2007 06:55 » 
Нашел нужное мне решение, осталось только разобраться и выделить главное:
http://www.cssplay.co.uk/layouts/fixit.html
(удивительно - до этого искал 3 дня, а как только написал в форум - нашлось Улыбаюсь )
Записан
Chuda
Гость
« Ответ #2 : 23-08-2007 07:26 » 
а какие проблемы?
position: fixed и не надо.
надо position: absolute; bottom: 0;
а чтоб боковые и серединка под нижнюю панель не залазили, сделай им padding-bottom на высоту нижней панели.
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #3 : 23-08-2007 07:27 » 
по-моемому это не то что хочется (вернее, не то что на рисунке)
Записан
Мы все учились понемногу... Чему-нибудь и как-нибудь.
RXL
Технический
Администратор

Offline Offline
Пол: Мужской

WWW
« Ответ #4 : 25-08-2007 17:01 » 
Цитата: Шильгия от 23-08-2007 07:26
position: fixed и не надо.
надо position: absolute; bottom: 0;
Это позиционирует относительно страницы. Если страница разползется, то и блок уежет.
Записан
... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Kivals
Команда клуба

ca
Offline Offline
Пол: Мужской

WWW
« Ответ #5 : 28-08-2007 18:04 » 
Шильгия, сталкивался с таким решением. Но получается нелогичное вложение div-ов и не всегда точно знаешь высоту нижнего.
(еще точно не выделил конкретную разметку, но как только сделаю - выложу сюда самый сокращенный вариант того, что хотелось получить)
Записан
gevornairi
Участник

am
Offline Offline
« Ответ #6 : 05-01-2008 08:43 » 
вообше то как совет позицию с помощю не сделай толко если все помещать в <div> и дать стиль то есть позицию если в одном страничке дать много <div> ом Position не имеет значение absolute,relative,fixed,если страничку сделаеш restore down то все делали накнутся друг на друга если они близки делай все с таблицами и регулировку сделай с помощю вложенных таблиц:))))
Записан
RXL
Технический
Администратор

Offline Offline
Пол: Мужской

WWW
« Ответ #7 : 05-01-2008 08:48 » 
Offtopic:
gevornairi, все хорошо, да точки-запятые не помешали бы. Чай не телеграмма - экономить не приходится. Ага Постарайся. Хорошо?
Записан
... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Aveic
Постоялец

ru
Offline Offline
Пол: Мужской
Yellow
« Ответ #8 : 05-01-2008 11:29 » 
Создал разметку Улыбаюсь Скачайте файлик, посмотрите.
* divs.htm (1.08 Кб - загружено 1157 раз.)
Записан
RXL
Технический
Администратор

Offline Offline
Пол: Мужской

WWW
« Ответ #9 : 05-01-2008 11:58 » 
Aveic, в Мозиле появилась вертикальная прокрутка - только наметилась. В IE вообще ужас - четверть страницы ушло в прокрутку.

Главный недостаток - ты не указал DOCTYPE, а значит страница интерпретируется в quirks режиме. Это примерно соответствует HTML 3.2 и в разных браузерах сильно разнится.

Я попробовал поставить в начало заголовок от xhtml 1.0 transitional:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
......

В IE страница умещается, но появилась пустая полоса снизу - примерно 1-2 пикселя. Нужно задать background-color для body (тот же, что и для #messages) и #main (по умолчанию цвет прозрачный и виден body).
В Мозиле ничего не изменилось. Нужно еще работать...

Рекомендую почитать:
Исследование высоты BODY
DIV-ная таблица
Различное отображение HTML документов в браузере зависит от объявленного Doctype
« Последнее редактирование: 05-01-2008 12:00 от RXL » Записан
... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Aveic
Постоялец

ru
Offline Offline
Пол: Мужской
Yellow
« Ответ #10 : 05-01-2008 13:05 » new
Ладно погоречился, в общем вот окончательный вариант в файле. Опера воспроизводит вообще хорошо. IE немного шалит, но макет работает. Однако MSIE приходиться переводить в квиркс режим (quirks mode), поставив комментарий вначале. А опера на XHTML Strict даже все хорошо кажет. Вообшем за первый файлик извините, поспешишь, как говориться ....
* div model.htm (2.77 Кб - загружено 1111 раз.)
Записан
RXL
Технический
Администратор

Offline Offline
Пол: Мужской

WWW
« Ответ #11 : 05-01-2008 14:28 » 
В IE пока выглядит нормально.
В Мозиле в div#header есть прокрутка.

Прочти статьи по тем ссылкам, что я привел в конце предыдущего поста.
Записан
... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Aveic
Постоялец

ru
Offline Offline
Пол: Мужской
Yellow
« Ответ #12 : 05-01-2008 16:36 » 
Ну терь и в Mozilla нет прокрутки Улыбаюсь
* lastdiv.htm (2.74 Кб - загружено 1102 раз.)
Записан
RXL
Технический
Администратор

Offline Offline
Пол: Мужской

WWW
« Ответ #13 : 05-01-2008 19:15 » 
Aveic, остается посмотреть, что будет, если в панелях будет контент больше размера блока. Ну, и в куче браузеров стоит проверить - в старых версиях Opera, в IE 5 и 7.
Записан
... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #14 : 26-03-2008 21:00 » 
http://www.alistapart.com/d/conflictingabsolutepositions/layout-1.html

а если так?
как это делалось и проблемы здесь:http://www.alistapart.com/articles/conflictingabsolutepositions
Записан
Мы все учились понемногу... Чему-нибудь и как-нибудь.
Страниц: [1]   Вверх
  Печать  
« предыдущая тема следующая тема »
 
Форум программистов «Весельчак У» > Направления программирования > Web > Тема: Помогите расположить div-ы используя css

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines