Хитрости верстки. Свойства CSS overflow и position | DAndreev.com

Хитрости верстки. Свойства CSS overflow и position

CSS-icon-300x300

Работая над проектом сайта компании “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!

Retweet

Самые популярные статьи

Комментарии

Alexey
16 Jan, 2012в00:14

Век живи – век учись.

Оставить комментарий