Танцы с волками…
Сильно, конечно сказано…
Браузеры, это такие милые зверюшки, которые часто нуждаются в приручении и любви, но без должного опыта в дрессуре, с ними ой, как трудно.
Ведь, как повелось, верстаешь под один самый лучший, тут поставьте свой любимый, потом подгоняешь под "зоопарк". Выбор богат, но в основном все ограничивается только популярными/распространенными.
Говорить о негативе в рамках сегодняшнего поста не буду, все проблемы с младшими версиями IE, ушли в условные комментарии (CC), там им, в общем-то, и место.
Тема мной затрагивалась, ссылок самому на себя давать не с руки, кому интересно, найдут и прочитают про мечты и утопии, гибридную верстку. Повторю лишь скриншот.
При создании иллюзии равной высоты колонок с использованием:
margin-bottom:-32767px;padding-bottom:32767px;
По мимо проблемы связанных с не корректной работой меток-якорей, есть еще одна – нет возможности простыми средствами прикрутить нижний border, его просто не видно.
Ранее для решения этого вопроса мной использовалось абсолютное позиционирование. Но, как показала практика, у приема на его основе, есть серьезный минус, абсолютно позиционированные блоки всегда требуют конкретного указания ширины.
Если у нас, к примеру, область контента резиновая, приходится ставить проценты, а с ними не только у браузеров не лады, но и по разному процентные величины, у разных блоков, ведут себя при уменьшении размеров окна браузера.
Вот и попробуем вместо position:absolute; поиграть с отрицательными отступами.
Также вернемся к псевдо эмуляции min/max-width, писал и об этом, ищем и находим.
С чем будем работать?
Пример всего один, иное размещение колонки (колонок) отведенных под навигацию делаем по аналогии.
<body>
<div class="main">
<div class="header">Header</div>
<div class="middle">
<div class="content">Content</div>
<div class="left">Left</div>
</div>
<div class="left_a"></div>
<div class="content_a"></div>
<div class="footer">Footer</div>
</div>
</body>
html-код по минимуму, а иначе к чему огород городить. Два пустых блока отвечающих за отрисовку нижних border-ов, выделены цветом, согласен плохо и не хорошо. Но в конечном итоге по визуалу, все красиво :)
<style type="text/css">
* {margin:0;padding:0;}
html, body {height:100%;}
body {
background-color:#eee;margin:0 4%;
padding:0 0 0 614px;position:relative;
}
.main {margin:0 0 0 -614px;height:100%;}
.middle {
background-color:#eee;overflow:hidden;
margin-top:-150px;margin-bottom:5px;
padding-left:204px;min-height:100%;
}
.content,.left {
margin-top:150px;margin-bottom:-32767px;padding-bottom:32767px;
}
.content {
background-color:#fff;border:#00f 1px solid;
float:right;width:99%;
}
.left {
background:#edd;border:#a00 1px solid;
float:left;margin-left:-204px;width:200px;
}
.header {
background:#ee9;border:#000 1px solid;
overflow:hidden;position:relative;top:0px;
margin-bottom:3px;zoom:1;height:100px;
}
.footer {
background:#9ee;border:#000 1px solid;
overflow:hidden;margin-top:3px;height:40px;
}
.content_a,.left_a {overflow:hidden;}
.content_a {
border-bottom:#00f 1px solid;margin:-1px 0 0 210px;
}
.left_a {
border-bottom:#a00 1px solid;margin:-5px 0 0 1px;width:200px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.main {height:auto;}
*html .main {display:inline;zoom:1;}
*html .middle {zoom:1;}
*html .left {margin-left:-102px;height:415px;}
.content_a {margin:-20px 0 0 209px;}
*html .content_a {margin:-0 0 0 209px;}
.left_a {margin:-25px 0 0 1px;}
</style>
<![endif]-->
Как видим все не так уж и сложно. Расшифровывать ничего не буду, тем кто читает с листа, ясно и так, а тем, кто еще не научился, пример подойдет в самый раз, окрыли в редакторе, и играем до потери пульса :)
Единственно, что не удалось, так это сто процентная высота макета в IE6.
Спрячь, если есть что…
У кого как, но лично меня раздражают сайты, где при двух-трех колоночной разметке в колонках отведенных под навигацию и рекламные блоки, в этих самых колонках, если контента прилично, образуются пустоты.
За примерами далеко ходить не будем.
В секции "Смени дизайн" выбираем "Старый". Открываем любой пост, читаем или просто скролим до конца страницы или хотя бы до середины, что видим в колонках справа?
Девственную чистоту.
Внимательный читатель моего блога, наверняка, обратил внимание на цикл публикаций, посвященных эмуляции position:fixed;
В них была озвучена попытка борьбы именно с этим обстоятельством. Для тех, кто еще не понял, и до сих пор задается вопросом о целесообразности – это главный смысл переложенной фишки.
В принципе все проблемы там решаемы.
Жаль, что OPERA все изгадила. Но не раз писал, браузер не смотря на свои достоинства, обладает рядом существенных недостатков, отсюда моя патологическая не любовь к нему.
Так, что же такое можно придумать, компенсируя отсутствие информации в колонках навигации. Не будем же мы набивать их всякой ерундой лишь для того, чтобы в них что-то было, и скролл упирался в самый пол :)
Подобного рода попытку делал в статье Footer Gordi, там были блоки, в колонках всегда прижатые к низу страницы.
Но давайте не много усложним задачу и будем эти самые блоки прятать, пусть их появление зависит от того, сколько в какой из колонок информации.
Что будет находиться в этих контейнерах, тут полностью на ваше усмотрение.
Ни html-кода, ни стилей с пояснениями не привожу. Лень :) Достаточно тестовой странички.
Тут, само собой OPERA опять в пролете :)
Отрыв страницы от нижней границы окна браузера. Величина этого отступа – высота спрятанных блоков. Проблема решаема, но все чаще склоняюсь к мысли забить на этот странный браузер.
Ставьте нормальные, забудьте OPERA, как страшный сон.
Контроль...
Первая попытка, хотя бы для самого себя прояснить проблему разрешения экрана монитора. Вернее, попытка сформулировать, что необходимо для решения данной проблемы. А то, что в этом есть потребность, надеюсь, никто отрицать не станет.
Многие давно забили на это по ряду причин. Ограничили бесконтрольное расползание разметки страницы с помощью min/max-width и все.
Ну, а если копнуть глубже?
Так ли все прекрасно?
Отбросим в сторону производителей мониторов. У них свои задачи. Но то, что они создают проблемы верстальщикам и дизайнерам это факт.
Стандартов, а они есть, производители мониторов придерживаются точно так же, как и производители браузеров :(
От осознания этого не легче, поэтому каждый решает проблемы по-своему, единственно верного решения здесь нет и, по-видимому, не будет.
То, что задача носит не тривиальный характер, наглядно видно из ТТХ монитора.
Навскидку.
Диагональ в дюймах.
Разрешение в пикселях.
Соотношение сторон.
Этого уже вполне достаточно.
А есть еще пропорции при разных разрешениях, тут вообще песня :)
Скажем, дефолт на сегодня - 1024*768
Следующая позиция – 1152*864
Далее – 1280*720, 1280*786, 1280*960, 1280*1024
Дальше – 1360*768
Еще дальше – 1600*900, 1600*1024, 1600*1200
Максимум, что есть у меня – 1920*1080
У вас может быть по-другому.
А если взять ноутбуки, "крышу" сорвет однозначно.
Понятно, что жизнь не стоит на месте, с повышением качества мониторов, идет изменение его технических характеристик, но, а нам то, что делать?
Сделаешь дефолт, а он на максимальных разрешениях смотрится, откровенно говоря, так, что ни в какие ворота не лезет. Не сижу я у своего посетителя за плечом, не знаю какой там у него монитор, разрешение, но могу себе представить, как он высказывается по поводу и все, наверняка, матом :)
Опять же не затрагиваю возможность масштабирования web-страницы, предоставляемую разработчиками браузеров, все тут по-разному и качество оставляет, желает лучшего.
И возникает вопрос вопросов, лично для меня, кто-то этим и не озадачивается вовсе, как отдать посетителю свою страничку с минимальными погрешностями?
Причем, не напрягая его, понуждая нажать какую-нибудь кнопочку, а автоматом.
То, что тема стоит того, чтобы ей вплотную позаниматься, можете убедиться сами, посмотрев примеры.
В первом из них обычная разметка.
Смотрим на разных разрешениях.
Это поможет понять, смысл к чему написан пролог, предвосхищающий цикл статей на эту тему.
Во втором сделана прикидочная попытка, с помощью JavaScrip отдающего свои стили под соответствующее разрешение, чтобы хоть как-то сохранить пропорции. Цели, все вывести с точностью до пикселя, пока не стоит.
Что же касаемо дополнительных файлов стилей, кого этим испугаешь. Пишем же их, предопределяя сепц. правила для того или иного браузера. "Условные комментарии" (CC), наглядное тому подтверждение :)
Горизонтальный banner counters.php - width:494px;