Руководство по оформлению HTML/CSS кода от Google

Множество полезных советов, среди которых: не указывать в ссылках протокол, а сразу начинать с двух слешей //site.ru, использовать вместо табуляции два пробела, всегда писать в нижнем регистре и много другого — в статье на Хабре.

Символ тонкого пробела в html для разбиения разрядов чисел

Всегда думал, как здорово разбивать разряды в цене не целым пробелом, а вдвое меньше: и глаз не спотыкается и разряды хорошо видно.

Разделение разрядов чисел полупробелом

В интернете с этим делом казалось бы сложнее — раньше мы всегда для этих целей использовали неразрывный пробел  . Но, как выяснилось, в html есть замечательный символ   — тонкий пробел, решающий разом все проблемы.

10000000
10 000 000
10 000 000

upd. Может не работать в старых версиях некоторых браузеров. Но во всех последних версиях — работает, проверено.

upd2. Целая батарея различных символов пробелов (и тонких и толстых), которые есть в Юникоде. Спасибо Никите Иванову

Отступ в ячейке таблицы у изображений при вёрстке на html5

При вёрстке на html5 к обычной ячейке таблицы, если там есть изображение, всегда внизу
добавляется отступ.
Взять самый простой код

<br />
&lt;table&gt;<br />
    &lt;tr&gt;&lt;td style=&quot;background:yellow;&quot;&gt;&lt;img src=&quot;0.gif&quot; height=&quot;80&quot; /&gt;&lt;/td&gt;&lt;/tr&gt;<br />
&lt;/table&gt;<br />

Высота ячейки 85px вместо предполагаемых 80. Откуда взялся отступ 5px?

Аналогичное явление происходит при вёрстке в режиме strict. Cтоит только сменить доктайп на классический html4 transitional, сразу всё отображается привычно. 

Я решил задать вопрос гуру. Сергей Чикуёнок, ни секунды не задумываясь, ответил, что это достаточно стандартная проблема.
<img> — инлайновый элемент, который по умолчанию выравнивается по базовой линии (которая выше, чем конец строки), поэтому и появляется отступ. Чтобы избавится от него, нужно прописать картинке display:block

Открытие портфолио в первый день лета

Свершилось: s.a.design

Вторую часть работ выложу в течение недели. Если вы заметите какие-то баги, глюки или неточности, которые там наверняка есть — незамедлительно информируйте.

Следуя незыблемому правилу «Сапожник без сапог», много лет подряд я только и мечтал о том, чтобы у меня появилось время сделать себе нормальный сайт. Вдохновившись новейшми веяниями интернет-индустрии, я собрался с силами и обуздал HTML5, со множеством его возможностей, наподключал повсюду своих шрифтов, чтобы вы наконец смогли посмотреть, чем я занимался все предыдущие годы. Спасибо всем кто верил в меня и особенно тем, кто не верил. И конечно Олегу Григорьеву, особенно за реализацию моей кнопочки «Контакты». Как показывает практика, даже великие дизайнеры могут ошибаться, и контакты бывают не только в радиоприёмнике, но и на моём сайте.

Отдельно хотелось бы написать о том, как «повезло» пользователям Оперы.
@font-family (подключение шрифтов), к сожалению, в этом браузере реализован настолько криво, что по сравнению с ним в рейтинге «Самый убогий браузер» злосчастный Интернет Эксплорер тихо курит в сторонке. Пришлось в некоторых местах использовать специальные хаки. Частично помогло.

Вёрстка 2010

Cтандарт HTML5, который так долго ждут разработчики, набирает обороты. Браузер IE6 теряет позиции с каждым днём. Всё логично. Добро рано или поздно должно победить зло.

На прошлой неделе Adobe добавила в Dreamweaver поддержку HTML5 и CSS3. Уже можно скачать специальный плагин для Dreamweaver CS5 — HTML5 Extension Pack и наслаждаться:

html5

Но главное, что произошло в вёрстке за последние полгода — это конечно Zen coding. Теперь даже моя бабушка верстает сайты быстрее вас! Сергей Чикуёнок и Вадим Макеев — большие молодцы. По-моему, это гениально. Посмотреть как это работает можно в этом видео:

Если коротко, то стоит написать:

div#content>ul.nav>li*5>a

И нажать Ctrl+, как вы получите:

<div id="content">
   <ul class="nav">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
   </ul>
</div>

Страница проекта ZenCoding.
Там же можно абсолютно бесплатно скачать плагины для вашего любимой программы вёрстки, в том числе для NotePad++ и Dreamweaver.

Красивый html

Верстаю конечно не каждый день, но тем не менее. Столько лет пользуюсь Дримвевером, а только вчера открыл замечательную кнопочку Apply Source Formatting, которая вмиг формирует отступы и переносы и грамотно форматирует любой код. А любой программист вам скажет, красиво написанный код — половина успеха.

Как прижать футер к низу страницы

Бывает, что на страницах с небольшим количеством информации, «подвал» сайта некрасиво зависает в середине экрана. В таких случаях, необходимо прижимать футер к нижней границе браузера. Я достаточно давно использую один из самых простых и распространённых способов реализации этой идеи.

Суть метода заключается в следующем. На странице создаётся блок container, который мы растягиваем на всю высоту экрана. А футер, за счёт отрицательного отступа, поднимаем вверх. В блоке с самим содержимым страницы content, оставляем снизу высоту, равную высоте футера, чтобы они не наезжали друг на друга. Вот и всё.

Стоит заметить, что поскольку IE6 не знает, что такое min-height, то для него приходится использовать хак. Все браузеры применят height:auto, а IE6, не умеющий обрабатывать !important, применит последнее значение height: 100%.

Основные плюсы данного способа:
— работает во всех браузерах;
— не зависит от количества текста на странице (меньше высоты экрана или больше).

Как прижать футер к низу страницы

HTML:

<br />
&lt;body&gt;<br />
    &lt;div id=&quot;container&quot;&gt;<br />
        &lt;div id=&quot;content&quot;&gt;Содержимое страницы&lt;/div&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;footer&quot;&gt;Подвал&lt;/div&gt;<br />
&lt;/body&gt;<br />

CSS:

<br />
html, body {<br />
    height: 100%;<br />
    margin: 0;<br />
    padding: 0;<br />
}<br />
#container {<br />
    min-height: 100%;<br />
    height: auto !important;<br />
    height: 100%;<br />
}<br />
#content {<br />
   padding-bottom: 120px;<br />
}<br />
#footer {<br />
    height: 120px;<br />
    margin-top: -120px;<br />
}<br />

Смотреть пример