Форум hotibo.ru

Привалов Вячеслав · 11.05.2010 20:32

шапка

меню

контент

футер

почему слой "контент"(#d3) и "футер"(#d10) пляшут в эксплорере на 1 пиксел влево-вправо при изменении разрешения экрана? В фаирфоксе и опере всё нормально... Это можно как-то исправить?

Я в вёрстке ДИВами новичёк, вот хотел попробывать сделать сайт полностью на них. Практически всё получилось, заступорился на этом месте. Кажется мелочь, зато какая не приятная...

Заранее спасибо.

MT · 11.05.2010 21:56

На самом деле «пляшет» d2. Это баг IE5-6.

Обойти его можно попробовать при помощи обрамляющего блока шириной 100%, позиционированного от левого края, и блока с {float: right} внутри него + по необходимости z-index для обрамляющего (который может «загородить» собою другие) и других блоков.

Происходит же это из-за глупого механизма обработки свойства right в IE5-6: свойство это в соответствующих «браузерах», очевидно, является кривым wrapper'ом свойства left, которое при этом просто устанавливается равным вычисленной величине [100% - right], т. е. в действительности IE5-6 всегда позиционирует объекты от левого края.

С расчётом же процентов у IE, как известно, проблемы. Поэтому вычисленная позиция [100% - right] не всегда (зависит от конкретного размера, а точнее чётности, ширины окна / родительского блока) совпадает с позицией right, честно отсчитанной от правого края.

В IE7 эта проблема с абсолютным позиционированием, к счастью, исправлена.

Привалов Вячеслав · #3 11.05.2010 22:56

MT, не понял... честно.
То что "пляшет" #d2, пригляделся, увидил.

#d2 {position: absolute; right:574px; top:206px; height:100px; width:127px; background:#5998C9}
у меня он прилеплен к правому краю на 574 пикселя... не пойму хода твоей мысля..

если не сложно, можно на прмере это показать?

MT · #4 11.05.2010 23:15

Примерно так:

Код:



    
        some text

Однако в вашем случае абсолютного позиционирования можно избежать в принципе — float здесь предостаточно.

Привалов Вячеслав · #5 11.05.2010 23:51

MT, работает! Спасибо!

зы. если ты из Караганды - на выходных можно смело идти пить пиво)))

Привалов Вячеслав · #6 12.05.2010 00:33

слушай, а как теперь быть с #d1? Он оказывается тоже смещается. С этот вариант уже не пройдёт... #d1 должен быть резиной начиная с left:0 до right:701... соответственно его ширина меняется в зависимости от разрешения экрана. вот так задачка...

#d1 {position: absolute; top:206px; right:701; height:100px; width:100%; text-align:right; background:#93B9DC}

то что получилось в прошлый раз здесь - http://siteman.kz/polegon/div/01/

Привалов Вячеслав · #7 12.05.2010 08:44

стоп.
Слои #d2-1 и #d2-2 перекрывают весь контент... Допустим, ссылки находящиеся в контенте на уровне этих дивов не активны в Опере и Фаирфоксе. вот пример:

шапка

меню

контент

ЭТО ССЫЛКА, закрытая дивами #d2-1 и #d2-2. В опере и фаирфоксе не работает.

футер

ни одно, так другое... Что делать?

MT · #8 12.05.2010 20:37

Привалов Вячеслав написал:

как теперь быть с #d1? Он оказывается тоже смещается. С этот вариант уже не пройдёт... #d1 должен быть резиной начиная с left:0 до right:701... соответственно его ширина меняется в зависимости от разрешения экрана.

Для начала попробуйте вникнуть в суть приведённого примера. ;-)

Привалов Вячеслав написал:

Слои #d2-1 и #d2-2 перекрывают весь контент... Что делать?

Как я упоминал в самом первом ответе, следует попробовать задать (положительные) значения z-index для перекрываемых блоков, дабы «поднять» их в «стопке» слоёв выше нашего перекрывающего абсолютно позиционированного блока. Свойство z-index применимо к абсолютно (position: absolute) и относительно (position: relative) блокам.

Привалов Вячеслав · #9 13.05.2010 12:34

ладно, MT, моих знаний цсс явно недостаточно чтобы так резко перейти с табличной вёрстки на дивную... Буду учить... Спасибо за помощь.

зы. как я понял z-index'ом можно указать порядок наложения дивов на странице?

MT · #10 13.05.2010 16:49

Привалов Вячеслав написал:

как я понял z-index'ом можно указать порядок наложения дивов на странице?

Совершенно верно, но, как и говорилось выше, только применительно к абсолютно (position: absolute) и относительно (position: relative) позиционированным блокам.

Отредактированно MT (13.05.2010 16:54)

Привалов Вячеслав · #11 13.05.2010 23:32

а по умолчанию - это какое позиционирование?
например:
#d3 {width:574px; height:300px; background:#003C79}

MT · #12 14.05.2010 00:34

По умолчанию — ни абсолютное, ни относительное.

AKS · #13 14.05.2010 09:18

MT
Что ж Вы не откроете Вячеславу секрет о том, какое значение для св-ва position принимается по умолчанию?
Привалов Вячеслав
По умолчанию устанавливается значение static.

Привалов Вячеслав · 14.05.2010 11:57

Спасибо МТ и AKS.
..вопрос, возможно, не закрыт. попробую погонять себя по цсс, если решение не найду - вернусь. ок?

Форум hotibo.ru

#1 11.05.2010 20:32

Два ДИВа "пляшут" в эксплорере на 1px между друг другом

#2 11.05.2010 21:56

Re: Два ДИВа "пляшут" в эксплорере на 1px между друг другом

#3 11.05.2010 22:56

Re: Два ДИВа "пляшут" в эксплорере на 1px между друг другом

#4 11.05.2010 23:15

Re: Два ДИВа "пляшут" в эксплорере на 1px между друг другом

Код:

#5 11.05.2010 23:51

Re: Два ДИВа "пляшут" в эксплорере на 1px между друг другом

#6 12.05.2010 00:33

Re: Два ДИВа "пляшут" в эксплорере на 1px между друг другом

#7 12.05.2010 08:44

Re: Два ДИВа "пляшут" в эксплорере на 1px между друг другом

#8 12.05.2010 20:37

Re: Два ДИВа "пляшут" в эксплорере на 1px между друг другом

Привалов Вячеслав написал:

Привалов Вячеслав написал:

#9 13.05.2010 12:34

Re: Два ДИВа "пляшут" в эксплорере на 1px между друг другом

#10 13.05.2010 16:49

Re: Два ДИВа "пляшут" в эксплорере на 1px между друг другом

Привалов Вячеслав написал:

#11 13.05.2010 23:32

Re: Два ДИВа "пляшут" в эксплорере на 1px между друг другом

#12 14.05.2010 00:34

Re: Два ДИВа "пляшут" в эксплорере на 1px между друг другом

#13 14.05.2010 09:18

Re: Два ДИВа "пляшут" в эксплорере на 1px между друг другом

#14 14.05.2010 11:57

Re: Два ДИВа "пляшут" в эксплорере на 1px между друг другом

Board footer