Практичная хозяйка располагает на кухне целым арсеналом ножей на все случаи жизни, просто для удобства, не знаю некоторых нюансов можно долго искать решение проблем, это как хозяйка с тупым ножом. Сегодня предлагаю вашему внимаю пару советов верстальщику, о которых не стоит забывать, они помогут вам более удобно обходиться с кодом, чтобы ваша верстка выглядела хорошо, а делать ее было легче, иногда даже как ножом по маслу.
html – файл.
1) Кодировка документа, обычно для русскоязычный сайтов utf-8, для остальных windiws-1251;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
2) Логотип в семантической верске, должен быть текстом обрамленный в тег h1, если даже он сделан картинкой, ее нужно вешать фоновым рисунком. См статью
/blog/semantichnaya-verstka-logotipa-na-sajte
3) Не забывайте проверять ошибки валидации.
4) Блоки лучше делать через class нежели id, разве что вы точно уверены что в дальнейшем не будут встречаться повторные id="name".
5) Удобно разделяйте сайт на блоки (header, sidebar, posts, widgets, footer), что в дальнейшем программисту будет удобно писать под эти блоки модули или компоненты.
6) Меню и разные элементы (в зависимости от дизайна) делать списками, что семантично и удобно.
css – стили.
1) В блоках с плавающей высотой (конетента в блоке может быть больше) задавать свойство overflow: hidden; что тем самым очистит ваши float или display:inline эллементы внутри блока с плавающей высотой.
#box {
overflow: hidden;
width: 247px;
}
2) Фото в статьях ограничивайте максимальную ширину, чтобы если будет большая фотка чтобы она не вылазила за ширину блока.
.post img {
max-width: 400px;
}
3) использовать css3, конечо он не работает в ie но если это не сильно влияет на дизайн, то оно того стоит.