HTML and CSS

HTML and CSS

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

Vertical Text Абсолютное позиционирование и колонки равной высоты

Vertical Text

Самым простым, эффективным и надежным решением по созданию вертикально расположенного текса, является графика.

В первую очередь не последнюю роль играет качество текста и минимальные погрешности его визуального представления в различных браузерах.

Но...

Если наш текст будет на любой подложке (прозрачная, градиент или однотонная заливка), то при отключенной графике, линк на доступ к спрятанной закладке отданный, как background:url(…), а это подразумевалось при создании данной конструкции, отсутствует.

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

Все это требует работы в графических редакторах, что в некоторых случаях по каким-то причинам невозможно или нет необходимого практического навыка.

Плюс/минус время.

Тут и пригодится возможность только средствами html и css добиться нужного результата.

Способ не универсальный.

Проблемы разночтений в зоопарке браузеров достаточно велики и очевидны, но иногда...

Без пояснений, что, как и зачем.

Смотрим, забираем, пользуемся.


RSS лента ВСЕГО блога с комментариями RSS лента ВСЕГО блога БЕЗ комментариев RSS лента этой КАТЕГОРИИ с комментариями RSS лента этой КАТЕГОРИИ и БЕЗ комментариев RSS лента ЭТОГО ПОСТА с комментариями к нему

Абсолютное позиционирование и колонки равной высоты

В любой сфере деятельности, а будем говорить применительно к web-верстке, встречаются побочные эффекты. Собственно, в этом нет ничего необычного. Все в основном сводится к правке косяков и кривостей в тех или иных браузерах.

Другое дело, что иногда, минусы побочных эффектов можно обратить и в свою пользу, даже отказавшись от устоявшихся, укоренившихся подходов к решению тех или иных проблем.

Очень часто верстальщики, как начинающие, так и профессионалы для создания иллюзии одинаковой высоты колонок центральной части макета используют стилевые правила:

margin-bottom:-32767px;padding-bottom:32767px;

Побочные эффекты разметки на их основе давно известны:

  • Не удачное сочетание стилей может привести к появлению бесконечной вертикальной прокрутке web-страницы
  • Отсутствие нижнего border’a у колонок
  • Не корректная работа меток-якорей

Если два первых пункта при грамотной реализации и не больших издержках в виде лишних контейнеров для прорисовки нижнего border’a не являются непреодолимыми, то проблема работы меток-якорей решения на сегодняшний день не имеет.

Предлагаемая вам разметка практически полностью лишена перечисленных недостатков, за исключением дополнительных блоков.

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

Пример


RSS лента ВСЕГО блога с комментариями RSS лента ВСЕГО блога БЕЗ комментариев RSS лента этой КАТЕГОРИИ с комментариями RSS лента этой КАТЕГОРИИ и БЕЗ комментариев RSS лента ЭТОГО ПОСТА с комментариями к нему

Прыг: 04 05 06 07 08 09 10 11 12 13 14
Скок: 10 20 30 40 50 60 70 80 90
English German French Spanish Italian Japanese
  • Programming V. Lasto
  • Designer S. Gordi
  • Created in 0,04867 seconds
  • © 2007-2010