Бомба. Приобретая, всегда теряем...

Trifler Blog

Бомба. Приобретая, всегда теряем...

    Чудес на свете не бывает?
    За них приходиться платить?    
    Один, без "башенно" верстает,
    Другому, в пору все чинить :)      

Gordi


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

В общем, руки заняты, а в голове одна постоянная мысль не дающая покоя, как же при использовании столь любимых автором стилевых правил:

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

при минимуме html-кода:

<div class="middle">
  <div class="content">Content</div>
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

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

Собственно, о нюансах подобного рода разметки писал не однократно.

Давайте еще раз остановимся на принципиальных моментах, которые являются сдерживающим фактором повсеместного использования оной на практике.

  1. Не удачное сочетание стилей, не относящихся собственно к глобальной разметке макета, в частности не оправданное применение, вроде бы безобидного position:relative, может привести к возникновению бесконечной вертикальной прокрутке страницы. В этом примере position:relative; для простоты иллюстрации, добавлен трем центральным колонкам.
  2. Проблема нижнего border’a нашла свое решение, но это потребовало дополнительной разметки, что конечно можно обыграть и в свою пользу, используя ее в качестве псевдо footer’a, но все эти подпорки довольно сильно портят впечатление, нет настоящего фен-шуя.
  3. Метки-якоря. Если б вы знали, сколько приходит писем от тех, кто не внимательно читает, с просьбами и даже требованиями срочно решить проблему корректного их поведения в предлагаемой и пропагандируемой мной разметке.
    Увы, все мои попытки, предпринятые в этом направлении, пока не увенчались успехом.
    Тот же пример в полной мере отражающий данную проблему.

Итак.

Можно ли получить макет, имеющий полную иллюзию равной высоты колонок с индивидуальной фоновой заливкой и своими, разного цвета border’ом вокруг каждой колонки?

Скриншот:

boom

И вся эта радость без описанных выше минусов.

Ответ однозначный - да!

Но, как всегда, что-то приобретая, мы что-то неизбежно теряем...

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

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

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

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

Поэтому не привожу html структуру и стили тестовых страниц, также, как и не поясняю те или иные нюансы, все не однократно будет меняться в процессе доводки до ума.

Вот такая "бомба" :)

Смотрим – left-content и content-right.

Комментарии к этой заметке больше не принимаются.


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

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