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 и теперь работает. Спасибо!