При создании меню стало общим местом использовать списки. Но странное дело, почти всегда для этих целей выбирают маркированный список UL или нумерованный список OL и очень редко список определений DL. Возможно, кто-то сможет достаточно подробно и популярно объяснить, почему это происходит, без особого углубления в тайны и хитрости семантики. Хотя на первый взгляд никаких подводных камней здесь вроде бы и нет, но, как знать :)

Чего тут больше? Привычка – все так делаю, чем я хуже? Косность мышления? Трудно сказать.

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

"Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде. Любой список представляет собой контейнер UL, который устанавливает маркированный список, или OL, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега LI." "Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера DL, термин — тегом DT, а его определение — с помощью тега DD".

Никакого стилевого оформления нет, только html.

Что бросается в глаза. При использовании обычного списка, почти всегда необходимо убивать маркеры или цифры. Для выделения заголовка, чтобы хоть как-то отделить его от ссылок находящихся ниже, надо прописывать отдельный класс для LI, в котором он будет находиться. Согласен пара строк в стилях, да указание класса в html-коде для заголовка это сущий пустяк.

Но риторический вопрос, зачем?

Всего этого можно легко избежать, работая со списком определений, навешивая соответствующие стили на DT без упоминания класса для заголовка в принципе.

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

Сказ про Иванушку-дурачка. Прощание с IE6

 Совсем, совсем не идеал,
 Забот, проблем с тобой не мало,
 Давно конкретно, всех достал,
 Прощай, прощай - пора настала…
Gordi

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

Собственно, и не планировал столь быстрого возвращения к циклу "Иллюзия идеала", да и самому тема приелась.

Но вот какая штука, давно пытался привести html-код блока middle к такому виду:

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

Возможно, это не последний подход к взятию веса, но на сегодняшний день ограничимся этим.

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

В принципе изначально, в статье "Иллюзия идеала - middle", собирался остановить свой выбор на приведенном в начале статьи коде. Но суровая проза жизни, благодаря "любимому" браузеру IE6, внесла свои коррективы.

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

Для сравнения приведу html-код из упомянутого поста:

  <div id="middle”>
    <div class="main">
      <div class="wrap">
        <div class="content">MIDDLE Content</div>
        <div class="left">MIDDLE Left</div>
      </div>
      <div class="right">MIDDLE Right</div>
    </div>
  </div>

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

Ну, а как же будут рады параноики и апологеты семантики, не трудно себе представить. Биться головой об стену в экстазе и истерике, совокупляясь везде и повсеместно, плакать и рыдать от счастья, с возгласами: "ну на конец-то", это их заставит, как пить дать.

Итак, почему же на протяжении довольно длительного времени, автор не предлагал вашему вниманию и не особо пиарил html-код находящийся в начале поста? Ответ был дан выше, странное поведение IE6, да и, как оказалось FF3.xx взбрыкивает тоже.

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

Скажу честно, его уход со сцены, возможно и принесет "страдальцам" облегчение, но многое в верстке станет обыденной рутиной, и мне IE6 будет явно не хватать, это точно.

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

Страница в IE6, при первоначальном ее открытии, не вносит дискомфорта. Но стоит навести курсор мыши на любую ссылку "Делаем колонку длиннее", левая колонка смещается в центр, обновление страницы по F5, приводит браузер в чувство.

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

Может быть, и не прав в попытке объяснить, почему это происходит, но кажется мне, что .left {margin-left:-100%;} в данном случае губителен для "любимого" браузера.

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

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

Понятно, для него функционал был урезан. Стараюсь, как можно реже использовать expression и посвятил не мало времени, решая проблему эмуляции тех же max/min-width и max/min-height. На страницах блога, есть, что почитать на эту тему.

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

В чем хитрость спросите вы?

Отвечаю.

Предположительно, нам известно, что margin-left:-100%; сбивает ослика с пути истинного. Следовательно, есть смысл только для него задать фиксированное значение данному свойству, но если это сделать, а потом с помощью expression пытаться эмулировать max/min-width, то при уменьшении размеров окна браузера по горизонтали, левая колонка будет смещаться влево, скриншот.

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

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

Да и чисто по человечески, все ли мы знаем, все ли умеем делать на отлично? Иногда, хоть застрелись, а не которые вещи, даже под дулом пистолета не сделаешь все равно.

В общем - богу богово, кесарю кесарево.

Что ж проблему прыгающей в центр левой колонки при наведении курсора мыши на ссылку "Делаем колонку длиннее", мы решили, а как дела обстоят с фоновой графикой для нее же?

Тут все печально.

В очередной раз, задав себе вопрос, а что ты хочешь? Использовать в качестве фона для левой колонки графику? Так какие проблемы?

Ты тут в четырех постах распинался, расхваливая придуманную тобой концепцию блочно-модульной верстки web-страницы, и даже имя не скромное ей подобрал – "Техника Gordi", так возьми заложенные ней идеи и потенциал, и вперед.

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

Последняя хитрость.

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

Вспомним пример, где в header использовалась графика. Там было задействовано четыре файла графики – общий для блока #header и еще три в каждую ячейку-блок. Надеюсь, вам становится понятен ход моих мыслей.

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

И вешаем его через background:url(XX.xx) repeat-y; но не на класс left, как это было раньше, и где возникали проблемы, а на #middle.

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

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

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

Ложка дегтя, без нее никак.

Если, вы посмотрите примеры в FF3.xx, то обнаружите, что вертикальные линии (border) отделяющие область контента от боковых колонок, отсутствуют. Ничего подобного в FF2.xx не наблюдалось.

Решение: создание ложных вертикальных линий с помощью различных комбинаций background-color для контейнеров входящих в состав блока #middle.

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

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

P.S. После грядущей кончины IE6, стили приобретут военно-морской лоск, где не будет места специальным стилевым правилам, только для него одного, "любимого". Что обеспечит полную валидность стилевого файла. html-код, а достаточно одного взгляда, в этом не нуждается.

Также, следует ожидать, что после промывания мозгов и восстановления потенции, утраченной в безнадежной погоне за призрачным первым местом в гонке вооружений, FF3.xx станет нормально отображать вертикальные border-ы отделяющие область контента от колонок навигации.

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

С "Техникой Gordi", вы забудете про "Святой Грааль" и прочую ерунду, типа натягивания боковых колонок на border, которым и сам отдал жертвенную дань, как страшный сон.

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

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

P.P.S. Не которые высказывания автора носят явно провокационный характер. Вам стоит хорошенько подумать прежде, чем вы решитесь, что-либо сказать по этому поводу в комментариях.

Из того, что не вошло в "Иллюзию идеала". body самодостаточный блок по своей сути, но почему-то редко используется в этой роли. Целесообразность в наличии дополнительного контейнера, в котором находятся те же – шапка, собственно тело страницы и подвал, часто вызывает известные сомнения. Понятно, что тут играет роль чисто индивидуальный подход, но в большинстве случаев может прекрасно обойтись и без него.

Cтранно, что очень многие этим злоупотребляют.

А, что делать - привычка вторая натура :)

В любом случае, body позволяет полноценно использовать функционал общего блока.

html

  </head>
     <body>
     .
     .
     .
     </body>
   </html>

css

  * {margin:0;padding:0}
  html {background-color:#ddd;height:100%;}
  body {
    background-color:#fff;
    border:#000 1px solid;
    margin:1px auto;
    min-width:720px;
    max-width:800px;
    min-height:100%;
    height:100%;
  }
  *html body {width:800px;}
  body {#padding-bottom:5px;}

Последняя строка в стилях, дает нужный отступ для IE 6(7) в FF,OPERA в нем нет нужды.

Как видим все очень просто.

Пример