Записи в рубрике "html/css"

br clear="all" vs div class="clear"

Суббота, 26 Сен 2009 22:17

Топик на заметку верстальщику. Если для того, чтобы правильно считалась высота контейнера, содержащего float элементы, вы все еще кладете в конец этого контейнера <div class="clear">, то хочу предложить вам намного более простой и удобный вариант с использованием <br clear="all" />, который абсолютно валиден, и делает абсолютно тоже, но записывается и читается затем в коде намного легче. Вот уже несколько месяцев, как я заменил используемый по жизни .clear с описанием через css на <br clear="all" />, и уверенно могу сказать, что никаких недостатков по сравнению с первым методом у него нет (тег прекрасно понимается ИЕ6). Итого нам не нужно прописывать в css бесконечные стили на класс .clear

1
.clear { height: 0; font-size: 0; overflow: hidden; clear: both; }

И еще кучу всего, что обычно пишут верстальщики, а достаточно в конец контейнера пололжить <br clear="all" />. Имхо, код становится намного более красивым и читаемым.

Update 14.12.2010 Как оказалось, разница все же куда более существенна. Дело в том, что <br clear="all" /> при некоторых обстоятельствах создает своим присутствием попросту пустую строку, обнулить которую не представляется возможным. Поэтому все же рекомендую пользоваться этим тегом аккуратно, он неуниверсален и в некоторых ситуациях не сможет заменить <div class="clear">, который с легкостью обнуляется. В своей практике я перешел на повсеместное использование техники .clearfix, позволяющей правильно считаться высоте блока-родителя плавающих контейнеров и <div class="clear"> в некоторых случаях.

Теги: 

CSS: как изменить цвет и фон выделения текста

Вторник, 14 Апр 2009 19:20

Вопрос на ответ «Как изменить цвет/фон выделения в браузере» оказался ничуть не сложнее, чем я и ожидал. Подобный эффект без труда достигается использованием псевдо-селекторов CSS3. Выглядит это следующим образом:

1
2
::selection { background: #f6b36a; color:#000; }
::-moz-selection { background: #f6b36a; color:#000; }

Здесь первая строка устанавливает соответствующий фон (background) и цвет (color) для выделения в Opera и Safari, вторая — для FF. Ни IE6/7, ни как ни странно IE8 не поддерживают данных псевдо-селекторов, а потому насладиться подобной красотой пользователям этих браузеров не удастся.

Читать полностью »

Теги: 

Почему я люблю валидатор или нужно ли верстать валидно?

Пятница, 06 Фев 2009 12:38

Ни для кого ни секрет, что в современном вебе существует так называемая мода «на валидацию», которая встречает далеко неоднозначные отзывы с точки зрения как сторонников, так и противников сего нововведения.

Ни одна сумасшедшая война (холливар) между любителями подобных дел прогремела вокруг «моды на валидацию» с момента ее появления.

Сторонники — в большинстве продвинутые кодеры, все время совершенствующие свои скилы, соревнующиеся между собой в крутости своей верстки и Читать полностью »

Теги: 

IE6 BUG a:hover span

Вторник, 03 Фев 2009 18:17

В IE6 существует баг, когда при структуре типа <a><span>ТЕКСТ ССЫЛКИ</span></a> мы пытаемся сделать так, чтобы при a:hover изменялись стили span'a внутри ссылки, к примеру с него убиралось подчеркивание. Читать полностью »

Теги: 

SEO верстка: создаем SEO оптимизированный layout

Вторник, 20 Янв 2009 16:01

Работая в компании, где SEO уделяют достаточно большое внимание, мне хочешь – не хочешь, а пришлось научиться писать сайты так, чтобы они были, я бы сказал, “SEO благоприятны”, то есть чтобы в верстке уже был заранее заложен немалый потенциал для дальнейшей раскрутки сайта. Что такое SEO верстка и вопросы, связанные с семантикой я рассмотрю в следующих статьях, а сейчас поговорим о том, с чего начинается эта самая SEO версткао правильном layout'e сайта. Читать полностью »

Теги: 

Простым языком о несложных вещах: свойство hasLayout

Понедельник, 19 Янв 2009 17:06

Целью данной статьи не будет подача читателю 100% исчерпывающих фактов, правил, определений, причин появления и способов устранения багов, связанных со свойством hasLayout, так как такая информация уже давно существует, и ссылки на нее приведены в конце поста.

Напротив, в данной статье мы рассмотрим свойство hasLayout с практической стороны, посмотрим на него выпученными глазами ошарашенного кодера после того как, сверстав сайт на основе плавающей (float) модели для gecko и других нормальных браузеров, он открыл его в IE6 ))...

Знакомая ситуация? Тогда эта статья для вас. Читать полностью »