Мечты и утопии – это реально!

Trifler Blog

20 января 2009, 18:00

Мечты и утопии – это реально!

Совсем коротенька заметка. Был анонс вот, и сделаем доброе дело. Будет представлено три варианта. Речь пойдет о макетах сделанных с использованием относительного позиционирования, float и border-а.

Занимательные эксперименты с колонками равной высоты, где используется абсолютное позиционирование, подошли к своему логическому завершению.

О проблемах уже говорил, повторяться не буду.

Скажем так, свежий взгляд, позволил несколько иначе оценить цикл публикаций посвященных данной теме. И вывод не порадовал. Да интересно, да может быть кому-то и пригодится, но самое главное – нет в представленных решениях легкости, все очень жестко зафиксировано, есть резиновая область контента, а вот все остальное словно кирпич…

Примеры, как и обещано, имеют сто процентную высоту с включением header и footer, одинаковую высоту колонок, резиновую область контента - все браузеры, кроме IE6.

В качестве еще одного анонса:

/ / / /

Нет, это не таблицы. Настоящая, реально работающая web-страница в уменьшенном виде. Скриншоты отражают ее поведение.

Каждый контейнер имеет свою фоновую заливку, можно и графику размножить, свой индивидуальный border. Понятное дело - колонки одинаковой высоты. Про сто процентную высоту с header и footer тоже разговора нет. Расположение колонок, на любой вкус.

Только не задавайте вопрос, а зачем?

В личной переписке, как раз такую разметку и просят чаще всего.

В качестве вступительного экзамена верстальщику при приеме на работу.

Проиллюстрировал работу макета во всех популярных браузерах и вперед.

Конкурс, что ли устроить?

Ну, кто смелый?

html-код, центральная часть:

<body>
<div id="middle">
  <div class="content">Content </div>
  <div class="left">Left </div>
  <div class="right">Right </div>
</div>
</body>
Комментарии к этой заметке больше не принимаются.
Все заметки категории «HTML and CSS»

Рейтинг популярности - на эти заметки чаще всего ссылаются:

  1. 1277268923532 position:absolute; Ликбез
  2. 0877996995200 Вертикальное раздвигающееся меню
  3. 0865950425348 Закругленные углы - градиент, html and css
  4. 0838942916744 Hack CSS for IE8
  5. 0831563727184 display:inline-block; and display:inline;
  6. 0688630796544 Фиксированные блоки на web-странице
  7. 0643210485892 max-width и min-width в IE6. Решить за 60 секунд
  8. 0415034819082 Footer всегда внизу. Личный архив
  9. 0380826026240 position:relative;overflow:hidden;border-top; Браузеры
  10. 0292057796608 Вертикальный скролл

banner counters.php

leftcounters
width:160px;
height:160px;

banner counters.php

centercounters
width:160px;
height:160px;

banner counters.php

rightcounters
width:160px;
height:160px;

Горизонтальный banner counters.php - width:494px;

январь, 2009
пн вт ср чт пт сб вс
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
free counters