Пятничные сниппеты. CSS
Очередная подборка сниппетов. На этот раз она посвящена 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;">
Ширина блока зависит от размера надписи.
</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;
}
На сегодня все. Веселых выходных!
Рекомендуем почитать
