panels дивы прыгают

Главные вкладки

Аватар пользователя danger4k danger4k 15 марта 2007 в 22:15

www.rekl.org
в середине у меня panels на главной.
В опере нормально, а в ослике почему то правая колонка все время скочет когда меняешь размер окна браузера. К сожалению я в верстке дивами не силён....ни кто не сталкивался?
листинг CSS:

/* $Id: twocol_stacked.css,v 1.4 2006/08/22 23:54:20 merlinofchaos Exp $ */

.panel-2col-stacked {
/* border: 1px solid red; */
overflow: hidden;
}

.panel-2col-stacked div div {
margin: .5em;
}

.panel-2col-stacked .panel-col-top,
.panel-2col-stacked .panel-col-bottom {
width: 100%;
clear: both;
}
.panel-2col-stacked .panel-col-first {
float: left;
width: 50%;
}
.panel-2col-stacked .panel-col-last {
float: left;
width: 50%;
}
.panel-clearer {
clear: both;
}

Комментарии

Аватар пользователя venom280 venom280 16 марта 2007 в 14:35

Я решил проблему, заменив ширину колонки с 50% до 49%, т.е
вместо "width: 50%;" я сделал "width: 49%;" для обеих колонок.

Аватар пользователя Natalie Natalie 17 марта 2007 в 17:03

panels вышла новая версия - может там это пофиксили?
- - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - -
Переводы некоторых модулей.
All content management systems suck, Drupal just happens to suck less. -- Boris Mann at DrupalCON Amsterdam, August 2005.

Аватар пользователя marazmus marazmus 17 марта 2007 в 17:11

Я решил проблему, заменив ширину колонки с 50% до 49%, т.е
вместо "width: 50%;" я сделал "width: 49%;" для обеих колонок.

Для IE это часто единственный выход в данной ситуации. Но лучше поставить 49.9% Smile - точнее будет.

Аватар пользователя Dan Dan 18 марта 2007 в 1:03

> Но лучше поставить 49.9% Smile - точнее будет.
Неа. Мне в теме пришлось сократить на несколько процентов (правда там 4 колонки....)

Аватар пользователя marazmus marazmus 18 марта 2007 в 10:54

> Но лучше поставить 49.9% Smile - точнее будет.
Неа. Мне в теме пришлось сократить на несколько процентов (правда там 4 колонки....)

Странно. Мне всегда хватало 49.9%. Обычно на несколько процентов меньше 50-ти нужно, когда у флоат-дивов есть марджины или паддинги, и они влияют на ширину. В нашем примере я не в курсе html-кода, который обрабатывается этой CSS. Может, стОит добавить внутренние дивы для формирования отступов? А внешние использовать только для флоат-раскладки? Или там уже так и есть?

Аватар пользователя Dan Dan 18 марта 2007 в 18:54

У меня так и было - внешние дивы без отступов, чисто для раскладки.
Похоже IE как-то грубо округляет при пересчёте ширины и делает это для каждого блока. Больше блоков - больше глюков Smile

Аватар пользователя PVasili PVasili 18 марта 2007 в 19:40

Осел не округляет не правильно, а до версии 7.0 имеет свое представление о блочной модели.
К тому же неплохо былобы указать доктайп.
======================================================
Ссылки на: [url=http://wiki.drupal.ru]Документацию[/url],[url=http://wiki.drupal.ru/doc/poleznye_ssylki_dlya_dizainerov]Дизайн[/url],[url=http://wiki.drupal.ru/doc/gotovye_perevody]Переводы[/url]

Аватар пользователя garamond garamond 18 марта 2007 в 19:03

я вот danger4kу - впаривал два дня своё гениальное решение...!)

.panel-2col-stacked {
  /* border: 1px solid red; */
  overflow: hidden;
}

.panel-2col-stacked div div {
  margin: 0;
}

.panel-2col-stacked .panel-col-top,
.panel-2col-stacked .panel-col-bottom {
  width: 100%;
  clear: both;
}
.panel-2col-stacked .panel-col-first {
  float: left;
  border-right: 1px dotted #afb2bb;
  padding-right: 2%;  
  width: 68%;
}
.panel-2col-stacked .panel-col-last {  
  float: right;
  width: 28%;
}
.panel-clearer {
  clear: both;
}

и красиво и нестандартно))

Аватар пользователя Dan Dan 19 марта 2007 в 0:36

2garamond: у тебя ж там 2% получается...

2PVasili: Я сужу по его поведению. Вот у меня несколько колонок, предположим две, шириной по 50%. Отображаются _рядом_. Уменьшаю размер окна - один под другим, ещё уменьшаю - снова рядом. И так колбасит абсолютно непредсказуемо. Тут явно плавающий глюк и связан, скорее всего, с неверным обсчётом ширины.
А блочная модель ни при чём. Если б она виной была, то тогда картинка не менялась бы.

Аватар пользователя PVasili PVasili 19 марта 2007 в 11:49

3 колонки - это вам не фунт изюму. Поведение вполне нормальное, кстати. Беглый взгляд на разметку говорит о том, что автор занялся изобретательством. Велосипедо-изобретательство полезно конечно, но есть уже куча готовых автомобилей: [url=http://css-discuss.incutio.com/?page=ThreeColumnLayouts] тут [/url] например более 50 вариантов для 3 колонок, ни и по ссылкам внизу Дизайн/CSS разметки можно посмотреть...

======================================================
Ссылки на: [url=http://wiki.drupal.ru]Документацию[/url],[url=http://wiki.drupal.ru/doc/poleznye_ssylki_dlya_dizainerov]Дизайн[/url],[url=http://wiki.drupal.ru/doc/gotovye_perevody]Переводы[/url]

Аватар пользователя PVasili PVasili 19 марта 2007 в 17:00

При том, что данная раскладка уже практически стандартная, и это её упрощённое название :).
Кстати ещё красивая(типичная ошибка) приложена.

======================================================
Ссылки на: [url=http://wiki.drupal.ru]Документацию[/url],[url=http://wiki.drupal.ru/doc/poleznye_ssylki_dlya_dizainerov]Дизайн[/url],[url=http://wiki.drupal.ru/doc/gotovye_perevody]Переводы[/url]

Аватар пользователя marazmus marazmus 19 марта 2007 в 21:28

Кстати ещё красивая(типичная ошибка) приложена.

А как поправить, не подскажете? Интересно просто. Решение в лоб - использовать min-width, но тупорылый IE не знает об этом замечательном свойстве Sad