Sulpher

Вопрос решили вот так: <style> .twocolumn li {display:block;width:49%;float:left;} </style> <ul class="twocolumn"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> Всем спасибо, тему закрываем.

Возникла необходимость вывести список <ul><li> в две или более колонок не разрывая списка. Например, у меня имеется список: <ul> <li>ссылка 1</li> <li>ссылка 2</li> <li>ссылка 3</li> <li>ссылка 4</li> <li>ссылка 5</li> <li>ссылка 6</li> </ul> А на выхлопе нужно получать примерно такое: > ссылка 1 > ссылка 4 > ссылка 2 > ссылка 5 > ссылка 3 > ссылка 6 Иллюстративный пример: Имеется подключенная JQuery 1.3.2 (1.4) Каким образом можно добиться такого эффекта?

Коллеги, нужно решение или пинок, я и еще один сторонний верстальщик с этим вопросом не справились Есть макет из трех колонок, левая\правая фиксированной ширины, центральная соответственно резина, сам сайт резиновый по ширине экрана Нужно сверстать блоками, левая\правая колонки имеют фоновую заливку в соответствии с макетом дизайна и все три колонки должны быть одной высоты по самому заполненному блоку background: url("../images/bg_module.gif") repeat-y; Все инструкции что я встречал по данной ситуации говорят делать через отрицательный margin и border-left: 200px solid #FFF2BF; /* фон левого сайдбара */ Но меня это соответственно не устраивает, поскольку нужна фоновая картинка Так как на сайте подключен Jquery для всего прочего решил использовать его для эмуляции function setEqualHeight(columns) { var tallestcolumn = 0; columns.each( function() { currentHeight = $(this).height(); if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } } ); columns.height(tallestcolumn); } $(document).ready(function() { setEqualHeight($("#tpl_container > div.column")); }); Мозилла, Опера, Сафари, ИЕ7-8 - все прекрасно это дело понимают, но вот в ИЕ6 левая колонка с периодичностью 8 из 10 при обновлении страницы улетает вправо или вообще в никуда, при этом бывает при прокрутке страницы вниз она появляется. Убираю setEqualHeight из шаблона - в ИЕ все хорошо становится (ну за исключением что одинаковая высота пропадает) Без ИЕ6 никуда (специфика сайта не позволяет), 2 дня гуглю - ничего порядочного не находится Потому прошу монстров верстки подсказать - есть ли такой баг с setEqualHeight&&Ие6 и\или показать рабочий макет страницы по указанным требованиям (резиновая страница, три колонки, все одинаковой высоты, правая\левая имеют фоновую заливку repeat-y) Можно, конечно, сделать хак и для ИЕ6 отдавать не одну высоту а разные, но это не решение Особо хорошим людям дам логин\пароль к работающему в сети макету текущего сайта Заранее признателен. Решение найдено. Тему можно закрывать.

Проблема актуальна. Ждём совет.

Дмитрий, намек понял. Просто Оперой пользуюсь только чтобы посмотреть как отображается верстка. Видимо, с момента выхода 9.01 прошло много времени. Внимание на кривизну скрипта обратили посетители. Выходит, проблема не скрипта, а браузера. Тогда вопрос снят. Что касается второй части вопроса с hover'ами, можете помочь?

В Opera 9.01 не совсем хорошо. Хорошо, но тогда как? Можете привести рабочий рецепт?

Здравствуйте! Есть интересный модуль меню для CMS Joomla под названием Lava Factory menu, который представляет собой меню, в котором hover плавно двигается за курсором. Довольно зрелищно! Эффект в действии можно увидеть здесь. Проблема, собственно, заключается в том, что плавность теряется при просмотре в Opera. Движение становится дерганым. В остальных браузерах все нормально. Тестировалось на IE7, FF2, Safari 3, Netscape 9. На официальном форуме разработчики ответили, что не ставят цель поддерживать Opera, а затачивали меню только под IE и FF. Странная кроссбраузерность. Скрипт использует библиотеку jquery. И вторая проблема заключается в авторской недоработке. Например, если подвести курсор к любому пункту меню и кликнуть на него, красный фон (hover) плавно переедет к курсору и окрасит выбранный пункт меню. Но стоит убрать мышкой курсор в другое место экрана, то hover быстро возвращается к первому пункту меню. Нужно же, чтобы hover не уезжал на первый пункт, а оставался на выбранном пункте меню. Скажите, пожалуйста, это сложно сделать? Здесь выложил установочный модуль для Joomla. Если нужно, могу запостить некоторые фрагменты кода в теме. Буду очень признателен, если кто-нибудь посоветует как решить эти обозначенные в топике проблемы.

Я попробовал видоизменить Ваш скрипт таким образом: <script language="JavaScript" type="text/javascript"> var width=0; //Определяем реальные значения высоты и ширины if (self.screen) { width = screen.width } if (width >= 1280) { location.href = "/templates/mservice_optimal/css/template_css_wide.css" }; { location.href = "/templates/mservice_optimal/css/stylesheet_wide.css" }; else (width == 1024) { location.href = "/templates/mservice_optimal/css/template_css.css" }; { location.href = "/templates/mservice_optimal/css/stylesheet.css" }; </script> Но он почему-то не работает...

Скажите, а параметр высоты указывать обязательно? Валидатор ругается на двойной знак & в строках if (width == XXX && height == YYY) Я опустил и привел строку к такому виду: if (width == XXX) А также первую строчку сделал такой: <script type="text/javascript"> Теперь все валидно. Как Вы думаете, так нормально? Валидация-то может и соблюдается,но не факт что заработает во всех браузерах. Я просто не знаю Java Script. Вот на этом форуме мне дали ряд советов. Там же привели такие строки: // Вот так можно узнать высоту и ширину рабочей части окна (без тулбаров) var clientHeight = document.compatMode=="CSS1Compat" && !window.opera?document.documentElement.clientHeight:document.body.clientHeight var clientWidth = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth

Добрый день! Не секрет, что мониторы с высоким разрешением завоевывают популярность и уже практически начинают смещать стандартный экранный режим 1024x768, в связи с чем все чаще приходится задумываться о поддержке обоих стандартов (1024x768 и 1280x1024 - больше пока, думаю, нет смысла), но поскольку резиновая верстка накладывает определенные ограничения в плане дизайна, я решил сделать два шаблона - определять разрешение экрана и грузить нужный CSS. Использовал следующий скрипт: <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ if(screen.width >= 1280) { document.write('<link href="/templates/mservice_optimal/css/template_css_wide.css" rel="stylesheet" type="text/css" />'); } else { document.write('<link href="/templates/mservice_optimal/css/template_css.css" rel="stylesheet" type="text/css" />'); } /*]]>*/ </script> Он проходит W3C валидацию, но... видимо, в связи с тем, что это Java sctipt, Jigsaw валидатор не видит загруженные стили и сообщает: there are no any stylesheets in this document. Господа, можете подсказать решение? Как лучше всего определять разрешение экрана и при этом соблюсти XHTML и CSS валидацию?

Спасибо за советы, господа!

Yopopt, Вы были абсолютно правы - в данном случае оптимальнее всего сверстать шаблон заново. Чем я и не применул заняться. В качестве каркаса был взят вот этот пример. Теперь все работает как надо. Единственное, что вызывает нарекание - правая колонка постоянно обновляется, вместо того,чтобы кэшироваться. Причем отключал вывод модулей для этой колонки и их стили - обновляется даже чистый текст. Не могли бы Вы посмотреть? Ссылка та же: http://polygon.cre-active.eu У меня есть подозрение,что причина в структуре вывода блоков: первым идет leftcolumn, затем грузится средняя колонка с контентом, которая и создает торможение, поскольку контент отнимает какое-то время на загрузку. После чего грузится rightcol. Я, конечно же, не уверен в своем предположении, но мне кажется,что блок все же должен кэшироваться...

Проверил валидатором сайт с хостинга... Да, Вы правы - действительно, много мусора. Он появляется из-за использования двух модулей CMS Joomla (модуль последних зарегистрированных пользователей компонента Community Builder и календарь), но там незначительные ошибки - border=0 вместо border="0" и аналогично, которые плодят плеяду однотипных ошибок (исправлю - на шаблон это, насколько понимаю, не влияет)... Убрал все z:index, как Вы и советовали. Но макет все равно валится в IE6, увы... Что же может так нарушать шаблон в IE6? Во всех остальных основных браузерах работает нормально.

Все же я поторопился с поспешными выводами... Левая колонка все равно "скачет" в IE7, не смотря на то, что я убрал display:inline и position:relative в #left_des и #right_des...

Я невнимательно прочитал Ваш совет по поводу margin'ов в #leftcol Сделал по аналогии с top - вместо margin-right указал left:-19px и теперь работает. Спасибо!

Спасибо Вам за ответ и советы, Yopopt! Эти строки как раз и позаимствованы с примера 3-хколоночного макета (сайт CSSplay. ) Выходит, ошибка автора. Объяснить не могу, т.к. пока еще недостаточно разбираюсь в свойствах. Сделал все, как Вы рекомендовали и теперь практически во всех работает! В частности, убрал display:inline и position:relative в #left_des и #right_des. В результате в IE7, Firefox 2.0 и Opera 9 работает отлично. В IE6 пока не проверял. А вот в Safari левая колонка немного сдвинута вправо. Если указать margin-right:-240px вместо текущего значения 222px, в этом браузрере все нормально, но сдвигается, соответственнно, в других. Интересно, с чем это связано? Спасибо, это помогло! Вы упоминали про ошибки и мусор в CSS. Проверял на валидацию - ошибок нет, кроме 17 предупреждений (это поправлю). Или Вы имеете ввиду так сказать, идеологию верстки? Пока постигаю CSS верстку, подозреваю, что какие-то моменты, на которые Вы обратили внимание, просто реализованы криво. Можете в двух словах прокомментировать по поводу серьезных ошибок в верстке? Хотелось бы знать, над чем стоит работать.

Доброго времени суток. Я искал оптимальную реализацию вертикального растягивания колонок в CSS по аналогии со свойствами таблиц и сверстал шаблон, основываясь на примере от Ste Nicholls, выложенном на его сайте CSS_Play -исходник. Итак, мой шаблон корректно отображается в Firefox 2.0, Opera 9. В Internet Explorer'е 7 левая колонка постоянно "скачет", смещаясь на пол экрана. В Safari колонка на несколько пикселей сдвинута вправо. Пример выложил в сеть, можете посмотреть здесь . Использована след. конструкция, с помощью которой достигается 3-хкол. макет: HTML (шаблон для Joomla - не обращайте внимания на куски PHP-кода): Суффиксы модулей в данном случае не влияют - отключал, эффект тот же. Второй, более глобальный глюк, объяснение которому я не могу найти: в некоторых моментах часть контента начинает выводиться в самом низу основого поля текста, сразу после самого нижнего модуля левого или правого краев (во всех браузерах). Во вложении картинка, которая наглядно демонстрирует данный глюк. На моем сайте этот глюк появляется в двух случаях: в меню Community Builder и при использовании Ajax Vote от Joomla Works. Касаемо этого примера, прошу опробовать: http://polygon.cre-active.eu user name: user password: 111222111 Зайдите под данным профилем и кликните в "change my profile" - появится Community Builder и этот глюк. А вот здесь скриншот. Курьезно, но причина именно в примере от Stu Nocholls (я специально убрал свой код и оставил чистый оригинал), ибо в др. шаблоне данного странного поведения не обнаруживается. Скорее всего, не прописано какое-то свойство или.... в общем, прошу помощи, ибо не знаю, в чем ошибка. Я специально использовал исходник 3-х колоночного макета от гуру CSS верстки во избежании кривизны, но к сожалению, что-то не учтено. Должен заметить, что данный глюк появляется в некоторых случаях, т.к. если размещать обычный HTML текст, данной проблемы нет) Очень прошу уважаемое сообщество помочь в решении данного вопроса, т.к. очень не хочется верстать табличным способом.

Великолепно, теперь все работает!!! Огромное Вам спасибо!

Уже пробовал... HTML код соответсвует стандартам, зато CSS валидатор пишет об ошибке: Эх...

Ах, да, забыл сказать: код скрипта я использовал такой: Оригинал взял отсюда: http://homepage.ntlworld.com/bobosola/pnginfo.htm

Спасибо за потраченное Вами время на ответ, maddogrts. Попробовал, как Вы советовали. Действительно, такой скрипт более компактен, не использует 1x1 gif. Я вынес ява скрипт в отдельный файл и в html документе просто его подгружаю. Вот что получилось: http://www.blackminds.fatal.ru/sulpher/ie-png.html Однако validator снова сообщает об ошибке: (http://validator.w3.org/check?uri=http%3A%...=Inline&group=0) Можно ли каким-нибудь образом решить эту проблему? Хотелось бы ,чтобы валидатор "скушал" наконец документ и не выдавал ошибку.

Доброго времени суток. У меня на сайте используется фишка PNG behavior, которая корректно отображает PNG-24 в IE5.5/6. (http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html) При прохождении теста на валидность, валидатор указал на ошибку: Т.е. проблема в использовани свойства behavior: Видимо, валидатор не понимает специфичное для IE свойство и сообщает об ошибке. Есть ли возможность использовать альтернативное свойство? Надеюсь на помощь.