31 августа 2010, 16:20

Жесткое порно...

Упал старенький PC – мать или процессор еще не знаю, пока все на ноуте, многие материалы и наработки наверняка канули в небытие, возможно, хотя бы часть удастся восстановить.

Архивы не полные само собой существуют, но лень же каждый день даже на флешку дублировать.

Разбирая завалы прошлого на CD и DVD, наткнулся на давно забытую, забавную вещицу. Уж и не помню, кому и зачем делал, но ведь порно же самое настоящее :)

Кратенько в чем смысл фишки.

Три колонки центральной части – по краям фиксированная ширина, центр безразмерный и ограничен только по min/max-width самой страницей.

При уменьшении размеров окна браузера левая и правая колонки скрываются за вертикальными границами.

В конечном итоге, когда появляется горизонтальная прокрутка на странице остается только область контента.

Посмотреть

Есть рабочий вариант и для IE6.

Оставить комментарий

28 августа 2010, 01:01

Любителям экзотики и извращений...

На простой вопрос, можно ли с помощью 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;.

Одна из последних публикаций на тему и практическая реализация в действии.

Комментариев: 5

Прыг: 01 02 03 04 05 06 07 08

HTML and CSS

HTML and CSS

{Лаборатория экстремальной web-верстки...}

Жесткое порно...

Любителям экзотики и извращений...