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

Пятничные сниппеты. 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;">
Ширина блока зависит от&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;
}

 

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

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 16

skippi
в пункте надо бы еще добавить top:50%;left:50%, иначе блок за экран уползет:) И для чего во втором пункте position: relative, по сути ведь получается то же самое что и пункт 3?
#
skippi
skippi
* в пункте 1 надо бы еще добавить...
#
skippi
Автор Жека
Спасибо. Поправил первый пункт.
#
Автор Жека
AztEK
> a:focus {} Лучше бы делать вот так: :focus { outline: none; } ибо FF также выделяет, к примеру, div-ы, если по ним щелкнуть правой кнопкой.
#
AztEK
Hentony
Спасибо Автору за 6 пункт и AztEK за дополнение. Очень пригодилось!
#
Hentony
djacson
да! 6-й пункт рулит!
#
djacson
Dmitriy
Thanks, to anchor focus
#
Dmitriy
Snowcore
Отличная подборка! А то раньше я не знал ничего кроме 'margin: auto' для центрирования :)
qy
3P— просто восторг! Как сам не дотумкал...)
#
qy
qy
п. 3, не понял я этого фокуса:
"No-русский значок"+"3" "неразрывный пробел"="3P" %)
#
qy
Mordraug
AztEK, если сделать просто :focus {outline:none;} - у вас пропадут оутлайны и для полей ввода формы, которые по-сути нужны. Идеалогия тут простая - либо указать конкретно для чего обводку убрать, либо убрать для всего как вы предложили, но потом добавлять её там где нужно.
alexpts
a:focus {
outline: none;
}

Всю голову пол года назад изломал, так и не узнал как это убрать. Спасибо за пост, не все методы выравнивания знал.
Роберт
Не проще ли использовать display: inline-block, для 6ого пункта?
#
Роберт  
Роберт
то есть для 4ого*
#
Роберт  
Kertz
Как должен выглядеть expression в 5 примере, для того чтобы H1 при прокрутке оставался не прижатывм к верху, а был по центру, т.е. top: 50%;?
#
Kertz
wdtime.ru
Хорошо написано на тему позиционирования Position CSS

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler