289

Пятничные сниппеты. CSS

30 мая 2008, 13:04HTML и CSSрейтинг +23-

Очередная подборка сниппетов. На этот раз она посвящена CSS.

выравнивание по центру, css, обводка, css хаки, position css, content css, outline css
Здесь могла бы быть Ваша реклама
показать рекламу :)убрать рекламу

1. Выравнивание по центру окна.

Есть несколько сравнительно честных способов выровнять блок по центру окна. Первый. Он центрирует блок ровно по центру окна. Минус в том,что нужно прописывать width и margin.

 .block 
{
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 100px;
margin-left: -100px; /* отрицательный левый отступ, равный половине длины блока */
margin-top: -50px; /* отрицательный верхний отступ, равный половине высоты блока */
}

2. Второй. Попроще. Но опять-таки надо прописывать ширину.

 .block 
{
position: relative;
width: 300px;
margin: auto;
}

3. Третий способ.

body
{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align:left;
}

4. Выравнивание блока произвольной ширины внутри другого блока.

Решение от Студии Артемия Лебедева.

<style type="text/css">
.align_center
{
position: relative;
width: 100%;
}
.align_center:after
{
content: '';
display: block;
clear: both;
}
.align_center_to_left
{
position: relative;
right: 50%;
float: right;
}
.align_center_to_right
{
position: relative;
z-index: 1;
right: -50%;
}
</style>
<div class="align_center" style="border: 1px dashed red; color: red;">
Выравниваем относительно этого блока.
<div class="align_center_to_left">
<div class="align_center_to_right" style="margin: 1em 0; border: 1px dashed green; color: green;">
Ширина блока зависит от&nbsp;размера надписи.
</div>
</div>
</div>

5. fixed в IE < 7

Какизвестно,в IE 7 поддежка свойства fixed включена полноценно. Но если вы все еще отлаживаете ваш код под шестого ослика, то вы молодец, и в то же время мы вам сочувствуем. Решение проблемы было предложено сначала Андреем Шитовым. Но это решение работает только в том случае, если мы забъем на стандарты (доктайп должен быть отключен). Затем на Хабре предложили решение для ситуаций, когда доктайп указан.

body
{
padding: 5em 0 0 0;
}

h1
{
position:fixed;
_position: absolute;
top: 0;
_top: expression(eval(document.documentElement.scrollTop));
left: 0;
margin: 0;
padding: 0;
background:lime;
}

Правда, тоже не валидно, но иначе)


6. Запретить огнелису обводить ссылки при фокусе

a:focus 
{
outline: none;
}

На сегодня все. Веселых выходных!

Memori.rumister-wong.combobrdobr.rumoemesto.rudel.icio.uszakladki.yandex.rugoogle.com/bookmarks/

Комментарии

в пункте надо бы еще добавить top:50%;left:50%, иначе блок за экран уползет:) И для чего во втором пункте position: relative, по сути ведь получается то же самое что и пункт 3?
skippi, 30 мая 2008, 21:41
* в пункте 1 надо бы еще добавить...
skippi, 30 мая 2008, 21:41
Спасибо. Поправил первый пункт.
Автор Жека, 30 мая 2008, 22:11
> a:focus {} Лучше бы делать вот так: :focus { outline: none; } ибо FF также выделяет, к примеру, div-ы, если по ним щелкнуть правой кнопкой.
AztEK, 6 июня 2008, 15:26
Спасибо Автору за 6 пункт и AztEK за дополнение. Очень пригодилось!
Hentony, 18 июня 2008, 22:48
да! 6-й пункт рулит!
djacson, 20 июня 2008, 0:34