Очень красивое решение. Жалко, что не до конца реализовано поведение блока, если выставить .fixedwidth в auto. Бета все-таки. Хотя, скрипт февральский, а это дает надежду на появление более свежих версий уже в скором времени. В реальных проектах я этот способ использовать, скорее всего, не буду (если только куски скрипта выдирать), но идея достойная уважения.
Спасибо за конструктивный комментарий.
1. Прозвучит странно, но у меня под 7-м IE тормозило сильнее, чем под 6-м. Сейчас вот пытался оптимизировать expression, но без особого успеха.
2. Вы правы, но в некоторых ситуациях все же и мой способ с кучей expression'ов имеет право на жизнь.
3. Каюсь, поленился. Посчитал, что ссылки на метод, на которые я опирался, будет достаточно... Уже понял, что бы неправ.
4. Единственное, что помешало мне сделать все красиво и без хаков под IE - это эмуляция при помощи expression :before и :after... Именно строчка с this.innerHTML (и даже с insertAdjacentHTML как я сегодня убедился) заставляет IE корчиться в муках...
Так как в JavaScript я совершенно не разбираюсь, то мне сложно искать легковесный способ, позволяющий внедрять дополнительные блоки в HTML.
Не могли бы вы направить меня в нужную сторону? Хочется написать такой скрипт, который бы быстро внедрял дополнительные блоки в код, а уже после выполнения скрипта подключались expression'ы с фильтром для IE6... Ну как-то так :)
Как, не расскажете? На словах, чисто теоретически. Можете даже ссылочкой поделиться на описание метода, которым вы бы воспользовались. Надеюсь, это не займет у вас слишком много времени. Напомню постановку задачи: блок должен быть резиновым, границы представляют собой полупрозрачный png (т.к. присутствует также тень), все должно быть кроссбраузерно и + без дополнительных хаков для IE7.
3 div'а. wrap - это просто обертка, для красивости. А вот теперь представьте, что у вас на сайте будет несколько таких блоков. Допустим, 3. Тогда в HTML-коде будет уже 27 несемантичных div'ов против моих 9. Так что здесь не все так просто.
Почему у меня вёрстка таких макетов(для любопытных: скоро запустится, посмотрите сами) обходится без дополнительных стилей для IE7(не IE6)?
Потому что IE7 не понимает псевдоклассы :before и :after. Только поэтому у меня появились отдельные стили для IE7. И все это было сделано, замечу, с одной целью сделать с использованием наименьшего числа несемантичных элементов.
Если вы сверстаете полностью полупрозрачный блок, состоящий из 1 div'а без скриптов для нормальных браузеров и при этом все будет работать в IE6 - то вы станете моим кумиром. Дерзайте.
И еще. Зря вы взяли шаблон целиком и впихнули его к себе на сайт. Многие вещи, используемые в моем шаблоне, на реальном портале не нужны. Это
padding-bottom:1000em;
margin-bottom:-1000em;
и пляски с overflow:hidden
А разбираться в вашем сайте у меня сейчас нет ни времени, ни особого желания. Т.к. данный макет, как я уже успел убедиться, не годен для использования в реальных условиях.
Не знаю как все остальные верстальщики, а я самоучка. Единственным источником информации для меня является интернет. Согласитесь, систематически изучить предмет в такой ситуации ой как непросто. Статьи Webmascon'а, тематические форумы, книга Э.А. Мейера и т.п. это хорошо. Но на профессиональных верстальщиков в моем городе не учат. А таких как я очень много. Со временем ситуация наладится, вымрут динозавры вроде IE6 и появятся какие-нибудь новые проблемы. А пока... будем бороться за культуру верстки? :-)
Смысл этих блоков в том, что они содержат бэкграундом картинку скругленного угла, а не в том, что они нужны для очистки. Про самоочистку float я в курсе. Кстати, предпочтительнее в таких случаях использовать overflow:hidden; Полезная статья по теме.
Очень интересно. Надо будет на досуге поразбираться с "плохими" вариантами. Хороший вариант всем хорош, но некрасив с отключенными картинками. А я решил, что для меня в данном случае это важно :-)
В работе я, как правило, всегда пользуюсь faux columns
Спасибо за ценный комментарий. В свою защиту могу сказать только то, что я понамешал здесь очень много всего и сразу. Обошелся 3 картинками вместо 4 или 6 - это дополнительные блоки плюс проблемы, возникающие с их позиционированием. Еще я очень хотел, чтобы ,было как можно меньше скриптов. Вы все верно говорите, я согласен. Можно и нужно в реальной работе упрощать и делать так, как будет лучше (быстрее, надежнее) для данного проекта. За упоминание insertAdjacentHTML большое спасибо, не знал.
Количество блоков минимально, не спорю. Но не выполняется ряд придуманных мною требований, а именно: валидность (ибо хаки и валидатор вываливает непонятную ошибку) и положение контента в коде перед содержимым боковых панелей. Глубже не копал.
1. Прозвучит странно, но у меня под 7-м IE тормозило сильнее, чем под 6-м. Сейчас вот пытался оптимизировать expression, но без особого успеха.
2. Вы правы, но в некоторых ситуациях все же и мой способ с кучей expression'ов имеет право на жизнь.
3. Каюсь, поленился. Посчитал, что ссылки на метод, на которые я опирался, будет достаточно... Уже понял, что бы неправ.
4. Единственное, что помешало мне сделать все красиво и без хаков под IE - это эмуляция при помощи expression :before и :after... Именно строчка с this.innerHTML (и даже с insertAdjacentHTML как я сегодня убедился) заставляет IE корчиться в муках...
Так как в JavaScript я совершенно не разбираюсь, то мне сложно искать легковесный способ, позволяющий внедрять дополнительные блоки в HTML.
Не могли бы вы направить меня в нужную сторону? Хочется написать такой скрипт, который бы быстро внедрял дополнительные блоки в код, а уже после выполнения скрипта подключались expression'ы с фильтром для IE6... Ну как-то так :)
Потому что IE7 не понимает псевдоклассы :before и :after. Только поэтому у меня появились отдельные стили для IE7. И все это было сделано, замечу, с одной целью сделать с использованием наименьшего числа несемантичных элементов.
Если вы сверстаете полностью полупрозрачный блок, состоящий из 1 div'а без скриптов для нормальных браузеров и при этом все будет работать в IE6 - то вы станете моим кумиром. Дерзайте.
И еще. Зря вы взяли шаблон целиком и впихнули его к себе на сайт. Многие вещи, используемые в моем шаблоне, на реальном портале не нужны. Это
padding-bottom:1000em;
margin-bottom:-1000em;
и пляски с overflow:hidden
А разбираться в вашем сайте у меня сейчас нет ни времени, ни особого желания. Т.к. данный макет, как я уже успел убедиться, не годен для использования в реальных условиях.
Оригинал
Полезная статья по теме.
В работе я, как правило, всегда пользуюсь faux columns