CSS » PokrovBlog | Максим Покровский о правильном Веб-дизайне

— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.

Сейчас работаю над:

Разработка одного стартапа

Текущй статус - разработка ТЗ.
Разработка конструктора для popsop.com

Заказать мне работу

20.01

Переходим на em

Комментарии (25) CSS, HTML

Сейчас мы за одну минуту перестанем указывать размеры шрифта в пикселях и станем указывать их в em. (давно вообщем то пора)

Итак, вот такая конструкция:

html{

    font-size:100.01%;

    }

body{

    font-size:62.5%;

    }

font-size:100.01%; - установили шрифт стандартного размера (16px). Почему я написал 100.01%? Это из-за проблем округления в Opera и Safari. Незнаю может уже пофиксили, но я навсякий случай продолжаю так писать.

font-size:62.5%; - Что бы не мучаться с математикой устанавливаем размер шрифта в 10px. Один раз посчитали, и хватит

Как пользоваться:

Например, нам нужен размер заголовка 24px, тогда пишем так: font-size:2.4em;
т.е 24px = 2.4em. Визаульное сходство прослеживается?

На что надо обратить внимание:

EM наследуется! Поэтому добрый совет, прописывайте размер шрифта непосредсвенно тегу с текстом. Тоесть если у вас такой код:

<div id="sidebar">

   <p>текст</p>

   <p>текст</p>

   <p>текст</p>

</div>

то следует писать не #sidebar{font-size:1.2em;}, а #sidebar p{font-size:1.2em;}. Поверьте, так гораздо меньше гемора. Если же вам приходится указывать размер шрифта вложенному элементу, например:

`Новинки Все новинки`

, а у родителя уже указан размер, то код будет такой:

h2{

    font:normal 2.4em Arial; // 24px

    }

h2 a{

      font-size:0.5em; //12px

      }

Математика тут элементраная: делем желаемое, на имеемое (12px/24px=0.5em)

Сорри за сжатую форму поста, наступила зима, сессия продрала свои налитые кровью глазки и возалкала свежей крови. Аминь.

Метки:CSS, HTML

24.12

6 expression для IE6

Комментарии (8) CSS, HTML

1. Эмуляция CSS-свойства content

ul li {

   margin: 0.5em 0; padding: 0 0 0 20px;

   list-style-type: none;

   behavior: expression( !this.before ? this.before = this.innerHTML = '&mdash;&nbsp;' + this.innerHTML : '' );

   text-indent: -1.24em;

   }

ul li:before { content: '\2014\a0'; }

2. Эмуляция position:fixed

body{

   background: url('/0.gif') no-repeat; 

   background-attachment: fixed; /*избавляемся от дергания при вертикально прокрутки*/

   }  

#header{

    width: 100%;

    padding: 0.5em 0;

    background-color: #000; 

    color: #fff;

    position: fixed;

    top: 0;

    left: 0;

    //position: absolute;

    top: expression(

        document.getElementsByTagName( 'body' )[0].scrollTop + "px"

    );

   }

#content{

   height:4000px;

   }

<div id="header">Эмуляция fixed</div>

<div id="content">Какой-то контент</div>

07.11

Контейнер для float - блоков

Комментарии (19) CSS

“Зафлоаченные” элементы изымаются из родительского блока, и “папа” “схлоповается”. Чтобы этого не происходило, я использую следующий стиль :

Туда

    Здесь

    Сюда

ul{

   overflow:hidden; /*Лекарство*/

   _height:1%; /*оно же для IE*/

   border:solid 1px red;

   list-style:none;

   padding:5px;

   }

   ul li{

      float:left;

      border:solid 1px blue;

      padding:5px;

      margin:0 5px;

      }