Работая над проектом сайта компании “Novrealty” я столкнулся с такой задачей как элементы, выступающие за границы блока. Вот Вам пара замечательных приемов, как это легко реализовать.
Вообще, во время верстки часто вспоминаешь дизайнера очень нехорошими словами. Потому как нарисовать-то он нарисовал, а вот как это всё творение сверстать – это уже головная боль верстальщика.
И так у нас есть несколько блоков, которые идут один за другим, и надо сделать так, чтобы самый левый выходил за границы блока в котором они все находятся.
Верстка с помощью position и oveflow
Первый прием – это комбинация CSS свойств position и overflow. Для этого, блоку, который должен выступать устанавливаем position : relative и сдвигаем его влево на 50 пикселов (50 пикселов, это ширина выступающей части) left: -50;
А чтобы после этого блока не осталось пустого пространства, установим width : 0. Теперь браузеры не резервируют место для этого блока (точнее резервируют 0 пикселов).
Ну а теперь чтобы стало видно, то что находится внутри блока (выступающие элементы) устанавливаем свойство overflow : visible. Оно позволяет видеть в блоке всё, что выходит за его границы, а так как ширина его зада ноль, то собственно это всё что в нем есть.
Этот прием я проверял на всех браузерах, работает отлично везде, кроме моего горячо любимого IE-6. Он не смотря на width:0 все равно оставляет место под блок.
Так что если Вам необходимо сверстать под IE-6, то следующий прием верстки как раз для вас.
Верстка с использованием position relative и absolute
И на самом деле мне этот способ нравится больше. Он намного проще, а вот мест, где его можно использовать просто не счесть. Он основан на комбинации CSS свойств position : relative и position : absolute.
Как известно, position : absolute задает жесткие координаты блока, относительно начала страницы, а все остальные блоки располагаются, так как будто этого вообще нет.
А теперь самое интересное! Если этот элемент находится в блоке с position : relative, то координаты он отсчитывает от левого верхнего угла этого блока. И достаточно просто задать left: -50, как наш элемент выедет нужное положение.
Применений этому методу очень много, на сайте Novrealty.com , я использовал его как минимум в 4 разных местах. А что самое приятное, этот прием работает даже на IE-6!
Комментарии
16 Jan, 2012в00:14
Век живи – век учись.