Жесткое порно...
Упал старенький PC – мать или процессор еще не знаю, пока все на ноуте, многие материалы и наработки наверняка канули в небытие, возможно, хотя бы часть удастся восстановить.
Архивы не полные само собой существуют, но лень же каждый день даже на флешку дублировать.
Разбирая завалы прошлого на CD и DVD, наткнулся на давно забытую, забавную вещицу. Уж и не помню, кому и зачем делал, но ведь порно же самое настоящее :)
Кратенько в чем смысл фишки.
Три колонки центральной части – по краям фиксированная ширина, центр безразмерный и ограничен только по min/max-width самой страницей.
При уменьшении размеров окна браузера левая и правая колонки скрываются за вертикальными границами.
В конечном итоге, когда появляется горизонтальная прокрутка на странице остается только область контента.
Есть рабочий вариант и для IE6.
Любителям экзотики и извращений...
На простой вопрос, можно ли с помощью position:fixed; создать полноценную web-страницу - большинство продвинутых верстальщиков без особых раздумий, дадут отрицательный ответ. И будут правы.
Собственно о трудностях прямого использования position:fixed; писал не однократно, ничего не изменилось, и ждать в этом смысле каких либо подвижек не приходится, скорее всего, фиксация блоков на web-странице так и останется экзотикой.
Как иллюстрация выше сказанному пара примеров.
html-код не сложен, тоже самое относится к стилям описывающими его поведение.
<body> <div id="content"> <div class="content">…</div> </div> <div id="fixed"> <div class="content">…</div> </div> <div class="fixed_scroll"></div> <div class="fixed_scroll no"></div> </body> * {margin:0;padding:0;} html,body {background-color:#669;height:100%;} html {overflow:hidden;} #content,#fixed { background-color:#666;border:#ccc 1px solid; color:#fff;position:fixed;top:0;bottom:0;z-index:10; overflow:hidden;padding:10px 0; } #content {right:278px;min-width:600px;max-width:74%;} #fixed {right:30px;width:240px;} .fixed_scroll { background-color:#666;position:fixed;top:3px; right:279px;bottom:3px;z-index:100;width:20px; } .no {right:31px;} .content {overflow:auto;height:100%;} *html #content, *html #fixed, *html .fixed_scroll {position:absolute;height:100%;} *html #content {width:74%;} *html .fixed_scroll {padding-bottom:10px;}
Идеология разметки заключается в следующем:
- web-страница визуально состоит из двух колонок позиционирование которых относительно друг друга и вертикальных границ рабочей области браузера выполнено с помощью position:fixed; - выделено синим цветом в html-коде.
- Дополнительные контейнеры, вложенные в них снабженные стилевым правилом overflow:auto; позволяют контенту находящемуся в них и превосходящему по высоте рабочую область браузера, прокручиваться по вертикали независимо друг от друга. Подсвечено зеленым.
- Появляющиеся вертикальные скроллы, портят общее впечатление, поэтому они накрыты пустыми вертикальными блоками с цветом фоновой заливки основных колонок. Две красные строки в html-коде.
О недостатках подтверждающих, что подобного рода разметка относится к классу экзотики:
- Практически бесконтрольное расползание центральной колонки на все доступное место по ширине.
- Уменьшение размера окна браузера по горизонтали выталкивает ту же самую колонку за левую вертикальную границу.
- Отсутствие горизонтальной прокрутки.
В следующем примере центральная колонка разбита на две части. Ей же указана фиксированная ширина, что несколько улучшает ситуацию по контролю над шириной оной, взамен добавляя головную боль – чем заполнить пустоту в левой части рабочей области браузера, как при изменении разрешения экрана монитора, так и в случае если диагональ монитора зашкаливает.
Не смотря на очевидные достоинства – минимум html-кода и css, вывод напрашивается сам собой, разметка web-страницы на основе position:fixed; чистой воды экзотика и для этих целей надо смотреть в сторону position:absolute;.
Не большое усложнение разметки в данном случае, полностью устраняет все недостатки присущие position:fixed;.
Одна из последних публикаций на тему и практическая реализация в действии.
Текст под прозрачным фоном
В большинстве случаев подобного рода изыск нужен только для того, чтобы при отключенной графике на ее месте появлялся текст.
В основном это касается шапки сайта.
Ситуация выглядит следующим образом:
- Основная часть header состоит из одного или нескольких графических файлов и имеет неоднородный фон, скажем градиент.
- На этом фоне расположен логотип – картинка или картинка с текстом на прозрачной подложке.
- Необходимо спрятать текст под логотипом.
- Логотип и текст появляющийся при отключенной графике должны быть кликабельны.
<body>
<div id="header">
<h1>
<a href="путь к главной сайта">Имя сайта</a>
<span onclick="location.href='путь к главной сайта'"></span>
</h1>
</div>
#header {
background:url(header.jpg) no-repeat;position:relative;
}
#header h1 {position:absolute;top:XXpx;left:XXpx;}
#header h1 a {font:bold XXpx Georgia;}
#header h1 span {
background:url(logo.png) no-repeat;
position:absolute;top:XXpx;left:XXpx;
}
Данный код лишь частный случай, все справедливо, если только logo.png имеет цвет подложки, совпадающий с header.jpg или в отсутствии header.jpg с его фоновой заливкой.
Скриншоты:
Нижний скриншот наглядно показывает проблему, если бы графический текст был бы выполнен на прозрачной подложке.
Возможно, решение существует и оно намного проще моего, но то, что удалось сделать за пару минут, полностью меня устроило и искать, что-либо не было необходимости.
Чип и Дейл, а вернее абсолютное позиционирование спешит на помощь.
<body>
<a class="title_site" href="путь к главной сайта">Имя сайта</a>
<div id="header">
<h1 onclick="location.href='путь к главной сайта'"></h1>
</div>
#header {
background:url(header.jpg) no-repeat;position:relative;
}
#header h1 {
background:url(logo.png) no-repeat;
position:absolute;top:XXpx;left:XXpx;
}
a.title_site {
font:bold XXpx Georgia;position:absolute;
top:XXpx;left:XXpx;
}
Для стилей в первом и во втором случае ряд параметров не указан, в частности это высота и ширина для logo.png и цвет фоновой заливки header’a.
Горизонтальный banner counters.php - width:494px;