Размещаем любой блок над флеш

      <div class="flash-wrap"> <!--  Нужен для того что бы размещенная ссылка была именно там где нужно нам, а не там где хочет она. -->
         <a class="flash-link" href="#">Перейти на PokrovBlog</a>
         <object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
            <param name="wmode" value="opaque"> <!-- Флеш ведет себя так как нам надо. Если он лежит в body, то слои будут его закрывать, если в слое - то он закрывает нижние (по z-index) слои и закрывается верхними. Фон имеет фоновый цвет. Без этой штуки работать ничего не будет. -->
            <param name="movie" value="flash.swf" />
            <param name="quality" value="high" />
         </object>
      </div>

         .flash-wrap{
            position: relative;
            }
         
         .flash-link{
            position: absolute; top:0px; left:0px;
            }

Это наитипичнейшый пример, но иногда требует нечто более сложное. Например, мне нужно было сделать чтобы баннер с активной ссылкой (то есть уже вшитой в код самого флеша), вел на другой адрес.

Размешаем активную область над флеш.

      <div class="flash-wrap">
         <a class="flash-link" href="#"></a>
         <object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
            <param name="wmode" value="opaque">
            <param name="movie" value="flash.swf" />
            <param name="quality" value="high" />
         </object>
      </div>

      .flash-wrap{
         position: relative;
         }
     
      .flash-link{
         position: absolute; top:0px; left:0px;
         width:180px; /*Размеры флешки*/
         height:220px;
         background: url('images/0.gif') no-repeat; /*Особенный костыль для всех IE. Если фона нет, то воспринимается ссылка вшитая во флеш, а не наша. Думаю понятно, что 0.gif это прозрачный однопиксельный гиф.*/
         }

Пример

Какое то время назад я предложил ограничить поддержку IE6. Блогом я не ограничился и связался с некоторыми компаниями. Отказались. Мотивируя, что только дескать они не дураки, что надо бороться за каждого клиента, ну и прочие поверхностные суждения, здорово оправдывающие узость мышления, заботой о ближнем. Тем временем журнал internetno.net опубликовал следущее.

Популярные веб-сервисы начинают отказываться от поддержки браузера Microsoft Internet Explorer6.

Как передает TechCrunch, видеохостинг YouTube теперь предупреждает пользователей о скором прекращении поддержки IE6 и призывает «обновиться» до последних версий Chrome, Firefox и Internet Explorer 8.

Аналогичный шаг готов предпринять Digg. Ранее поддерживать IE отказались разработчики из 37signals. Все их веб-сервисы, включая Basecamp, Highrise и Campfire, требуют установленного Internet Explorer 7-й версии и выше. Такое же решение год назад приняла и Apple — для работы с MobileMe требуется IE7+.

Шире мыслят за пределами нашей родины. Теперь ожидаю волну подражателей, возможно кто-то даже снабдит свой index.html девизом: “Мы первые!”.

Как верстальщик я, конечно рад. Как личность тщеславная — обидно, что не я. Что упорства в себе не нашел за шиворот оттащить от “шестерки” тех кого мог.

Среди комментаторов вряд ли, но наверняка среди читателей найдутся те, кто не раз и не два оставлял на форумах вариации на тему “Ну когда же он сдохнет!”. 

Что думаете други? Вечно плестись в заду у запада бум?

Порой дизайнеры создают вот такие штуки:

Создавать для каждого типа “жирности” отдельный класс не кажется мне кошерным вариантом. Во-первых, не изящно. Во-вторых, тексты заносят в основном люди далекие от веба, и донести мысль прописывания классов весьма проблемно. Да и не надо. Будем делать так:

Ну, короче, вы поняли мысль.
====
Маленькое примечание. Расширения для FF Html Validator, может вам сказать что код не валидный. Не верьте ему. Ибо надежный источник заявляет что: This document was successfully checked as XHTML 1.0 Strict!

Не забывать, прикрепляя какой-нибудь скрипт для IE, прописывать его в <!--[if lte IE7]>...<![endif]-->

Читать дальше...

Читать дальше...

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

Крутой верстальщик понимает, что промосайтам чхать на кол-во тегов, для них больше важна оптимизация картинок, а на сайтах типа “чтоб было” можно выжать максимально оптимизированный код… А еще он не упирается рогом в семантику, когда не надо, и понимает, что валидность, это гарант того, что через 5 лет ваш начинающий YouTube не развалиться в супер новом браузере от Яндекса.

Читать дальше...

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

1. Перед началом работы смоделируйте каркас работ в голове. Настоящая работа верстальщика происходит ДО того как открывается редактор. Все остальное лишь инструмент.
2. Не злоупотребляйте <div>. Чем меньше вы сможете использовать тегов тем лучше. Впрочем всегда есть исключения (Статья на эту тему).
3. Не зацикливайтесь на одних и тех же методах. Возможно именно сейчас появился более совершенный способ реализации png, закругленных уголков или чего еще. Не нашли в рунете — придумайте сами.
4. Каждый дизайнер обладает своим собственным стилем. Верстальщик тоже, просто это не так заметно. Поэтому не старайтесь копировать стиль верстки подчистую. Я например не разделяю блоки кода комментариями, потому что использую структурированный стиль написания и интуитивные id. Мне так удобно, не не факт, что это будет удобно вам. Используйте, то что вам подходит, а не то что СЧИТАЕТСЯ удобным.
5. Не забывайте про то что браузеров много. Отмазка, “у меня нет этого браузера” — смешна.

Эстафету передам Евгению, Дмитрию и Владимиру