HTML and CSS
HTML and CSS
{Лаборатория экстремальной web-верстки...}
В стремлении к идеалу... Float-колонки одинаковой высоты
В стремлении к идеалу...
Как часто бывает, приходиться возвращаться к тому, о чем ранее писал не только потому, что сменился парк браузеров, и хотелось бы в них проверить, как оно и что.
Иногда, веянья времени совпадают и с переводом некоторых скриптов Мастера Lasto на обновленные рельсы, в частности речь идет о предполагаемом апгрейде Gold Shop’a.
Само собой, никоим образом не бегу впереди паровоза, но...
Сегодняшняя публикация посвящена формам.
Писал об этом в "Элементы web-страниц. Форма поиска". Комментарии были не однозначными, хотя скриншоты приведенные там свидетельствуют, что формам на web-страницах не уделяется должного внимания.
Личный опыт и это касаемо не только верстки, доказывает и подтверждает, что очень многое сокрыто в деталях и нюансах, а потому их проработке нужно уделять особое внимание.
Давайте посмотрим, что же необходимо, для приведения таких не послушных форм в божеский вид, в самых популярных браузерах.
Скриншот
html-код
<div id="forms">
<form name="search">
<input class="search" type="text">
<input class="submit" type="submit" value="Найти">
</form>
</div>
Стили
* {margin:0;padding:0;}
#forms {
border:1px #000 solid;margin:7px 10px 7px;
padding:4px;width:210px;
}
form {overflow:hidden;}
.search,.submit {
background-color:#fff;border:1px #000 solid;float:left;
}
.search {padding:1px 2px 0;width:156px;height:17px;}
.submit {font-size:11px;margin-left:2px;width:45px;height:20px;}
/* Start hack Section */
/* hack for FireFox 3.5 */
@-moz-document url-prefix(){.submit {padding-bottom:3px;}}
/* hack for IE6 */
*html form {zoom:1;}
/* End hack Section */
#forms не является обязательным.
Обратите внимание на разные высоты у поля ввода и кнопки "Найти".
Для той же кнопки желательно всегда указывать размер шрифта.
Без hack’a для FF, надпись на кнопке будет смещена вниз, что портит общую картинку.
Вот собственно, необходимый и достаточный минимум для нормального, практически идеального, визуального отображения формы поиска на web-ресурсе.
Float-колонки одинаковой высоты
Нет, беспросветна эта тьма, Сбежали из шестой палаты... И сводят дружно WEB с ума, Маржины, падинги, флоаты. Зверинец браузеров - психов, По сути дела, та же масть... Ох, не будите братцы лихо, Легко в том омуте пропасть ;)Gordi
Продолжим тему если не новой, то уж точно мало известной и недостаточно популярной техники создания колонок равной высоты.
В двух предыдущих публикациях посвященной этой теме, основной упор был сделан на макетах, в которых все колонки имели индивидуальный цветной border и разноцветную фоновую заливку.
К сожалению, как уже упоминалось, добиться резиновой области контента, пока не удалось.
Не много по игравшись и отложив поиск решения на потом, задался целью - исключить так ли уж необходимый border и использовать данный прием для макета "кирпич", как я его называю.
Посмотрим пару скриншотов:
Первый из коллекции прошлых статей покрасивше будет, но как уже говорил, здесь все колонки с фиксированной шириной, линки на обновленные примеры в конце статьи.
Второй, тема сегодняшнего поста.
По html-коду никаких различий не имеется, область контента "резиновая", не единственным недостатком, на мой взгляд, является, то обстоятельство, что все слито воедино. Нет четко очерченных границ между колонками.
Возможно это не принципиальный момент. На любителя, мои предпочтения склоняются к разметке на основе первого скриншота.
Кратко, о том, в чем же смысл предлагаемого.
<div id="right">
<div id="left">
<div id="content">
<div class="content">Content</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</div>
</div>
Вложенные друг в друга контейнеры с идентификаторами позиционируются соответствующим образом при помощи float и задают цвет нашим колонкам.
В контейнерах с классами, находится информация и блоки с ней с помощью float и относительного позиционирования размещаются там, где необходимо.
Как обычно, стараюсь представить своим читателям пять вариантов расположения колонок навигации относительно области контента.
Ссылки на примеры чуть ниже, но без разночтений при просмотре в различных браузерах, не обошлось.
При использовании данной техники придания иллюзии равной высоты колонкам макета, лучше всех ведут себя, вы будете удивлены – IE6(7).
Все пять вариантов работают в них отлично, как хорошие швейцарские часы.
В группу риска, как всегда попала "северная ведьма", иначе "норвежская красавица" :)
Имеются проблемы и в остальных популярных браузерах, не большие примечания на тестовых страницах, в них все довести до ума не получилось, там, где случилось так, просто иллюстрация проблем, и задел работы на будущее.
Примеры по скриншоту номер один:
Примеры по скриншоту номер два:
