Иногда, при HTML-верстке страниц, необходимо выровнять некий блок по центру вертикали родительского. Новички, наткнувшись на свойство CSS «vertical-align:middle», сразу же пытаются использовать его, якобы, по назначению, но не всё так просто.
Это свойство может быть пригодно только в двух случаях: в первом — оно аналогично аттрибуту valign="middle" у HTML-тега <TD> и будет работать как задумано. Во втором случае его можно использовать для выравнивания двух или более рядом стоящих линейных блоков (display:inline).
В остальных случаях, если мы хотим выравнять по центру вертикали родительского блока HTML-элемент, этот вариант не прокатит. Для этого, есть три не идеальных, но решени...
На моей памяти существует всего два основных, неглючных, способа блочной верстки (без использования таблиц). О них и пойдет речь в данной статье.
Первый способ основывается на использовании CSS-свойства «display» со значениями, симулирующими поведение элементов таблицы, а именно: display:table, display:table-row и display:table-cell.
Этот способ работает идеально во всех браузерах, которые поддерживают подобные значения для свойства display, а это основная масса браузеров, кроме нашего «фаворита» Internet Explorer. До 8-й версии IE не поддерживал полностью как CSS 2.1, так и CSS 3.
Поэтому, чтобы исправить ситуацию, пришлось найти «очередной хак для IE». И этим хаком стали свойства float:...
В этой статье я расскажу про два, наиболее часто используемых мной, способа верстки «закругленных уголков». Оба они очень просты в применении.
Итак, первый способ. Он подойдет для простых одноцветных блоков с обрамляющей рамкой или без неё. Для начала нам надо знать цвет фона и параметры рамки для нашего блока. Допустим, цвет фона блока будет #CCCCCC, а цвет рамки, толщиной в 1 пиксель — #666666. Далее создаем круг с данными параметрами и нужного скругления в Fireworks, Photoshop или любом другом редакторе. Всё! Все четыре уголка мы собрали в один файл и воспользуемся им в CSS следующим образом: мы создадим внешний контейнер (блок) с относительным позиционированием (position:relativ...
Привязка футера (подвала) к низу страницы при блочной верстке
При блочной верстке часто бывает необходимо «прижать» подвал сайта к низу страницы, независимо от количества основного контента страницы. Для этого есть простой выход, без применения javascript, используя один CSS. Способ тестировался с включенным доктайпом, и возможно не будет работать, как ожидалось, если его убрать. Но это так, к слову.
Итак, сперва выставляем для элементов html и body высоту 100%. Это единственные элементы, на которые можно выставить высоту в процентах или любых других значениях, и при этом она будет «растягиваться» дальше, если контент превысит указанное значение.
Это понадобиться для того, чтобы внутри body мы смогли создать элемент со значением min-height, указанный...
