caprella

Не могу успокоиться Выходит довольно интересная задача, потому что ширину блока нужно задавать в процентах от ширины окна, но при этом эти блоки должны слайдиться. Немного помучив разметку, нашла только вариант с использованием js и динамическим расчетом ширины каждого блока в слайдере. Буду внимательно следить, вдруг кто предложит изящный вариант только с использованием css.

Из-за обилия <script> между блоками <a> лениво было считать, сколько там этих <a>, но судя по id (cat_0 - cat_N) все логично получается. Отображаются все блоки по id="cat_19", т.е. ровно 20 штук, ведь для каждого .cat задана ширина в 5%. Таким образом, независимо от ширины родительского дива, на каждую категорию выделяется 5% его ширины, поэтому 21-ый элемент уже не помещается, опускается вниз под ленту блоков и обрезается родительским контейнером. Если позволяет ТЗ, попробуйте задать ширину каждого блока в px вместо %, а родительский контейнер сделать заведомо большего размера, чтобы все это вместить. Хм.. полистала и поняла, зачем задается в процентах

Вот, можете глянуть такой вариант http://jsfiddle.net/caprella/Srrjj/. Как по мне, не самый элегантный, но другого способа не придумала Я его предлагала на stackoverflow, там вроде похожая проблема была. Это после того, как вы исправили код по совету rus?

А какое из свойств вы пробуете переопределить? Я наблюдаю у себя в хроме такую же картину, что и у вас на скриншоте. И вроде бы все логично: браузерные font-size и font-weight переопределены в вашем reset, марджины тоже ваши подхватываются, display вы не переопределяете. Возможно, вы имеете в виду то, что эти user agent правила переопределяют те, что идут в инспекторе ниже, но тут тоже логично, потому что ниже идут унаследованные стили (Inherited from.. на скриншоте), а они всегда имеют приоритет ниже по сравнению с теми правилами, которые применены непосредственно к элементу.

а в браузере какие-нибудь пользовательские стили не прописаны? и было бы неплохо посмотреть на код, а не только скриншот

Loba_ru, да что же вы так разошлись. Будет еще море конкурсов, а вашу работу и так посмотрят. Захотите комментариев - опубликуйте в ветке критики, вам все впечатления напишут. Или для вас принципиальны голоса за вашу работу? Если вы регистрировались тут только ради конкурса, возможно, и правда зря

Могу предложить такой вариант http://jsfiddle.net/caprella/rzGxx/ При таком подходе боковые колонки тянутся под основной контент, но можно с растягиванием химичить и дальше.

Тоже поучаствую: http://jsfiddle.net/caprella/FrdJk/ Комментарий: Проверено в Chrome 30.0, FF 23.0.1, IE10. В FF не совсем корректно рендерится border при закругленных углах с определенными значениями border-radius (см. попу паука и белые однопиксельные полосы). Так и не смогла побороть их - буду признательна за подсказку от знающих людей. Нашла похожую проблему на stackoverflow и остановилась на том, что это может быть багом FF.

Интересное решение, я бы не додумалась Подскажите, плз, почему именно такой набор свойств в .t:after.

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

У меня при загрузке тоже ничего не видно, но судя по css, текст будет видимым при фокусе ссылки. Я кликнула в поле Result и табуляцией перевела фокус на <a> - так работает.

Выложите код на http://jsfiddle.net/

А я вообще не поняла, что и куда должно тянуться

Это очистка float шалит. Попробуйте, например, чистить при помощи overflow: hidden (.clear убираем, родителю ставим overflow: hidden) или задайте более навороченные стили для .clear (вот здесь http://habrahabr.ru/post/189118/, например, можно глянуть в разделе очистки float'ов)

Так ваш кусок кода и отображается. Фон имеет цвет, блоки высоту и цветные границы. Если вы напишете какой-то текст в разметке или вставите картинку, они будут видны.

В общем, все-таки остановилась я на display: table. Всем спасибо за помощь и поддержку

Да, задача как раз в том, как ограничить ширину каждого пункта, чтобы текст переносился в его границах. Только вот max-width не совсем подходит, потому что текст в каждом пункте ведь разный, и при таком варианте придется для каждого пункта отдельно выставлять этот max-width. Буду сейчас пробовать использовать max-width в %

Впервые попала на проект с серьезным адаптивным дизайном, и спросить на проекте не у кого. Задача: обычное меню. При больших разрешениях выводится в одну строку, каждый пункт меню однострочный. При среднем размере экрана каждый из пунктов меню должен стать двухстрочным (т.е. не пункты переносятся на вторую строку, а каждый пункт сам по себе в 2 строки начинает располагаться). Вот набросала костяк: http://jsfiddle.net/8cSLF/ Немного игралась с white-space - не вышло. По идее, можно указать ширину для каждого пункта меню, и тогда текст автоматически будет переноситься в его границах, но все пункты разные, и эта идея кажется какой-то "костыльной". Вспомнила, что есть таблицы и обрадовалась, но потом поняла, что не совсем подойдут таблицы, т.к. для маленьких экранов нужно оставлять всего 3 пункта меню, а остальные показывать второй строкой по клику на More (т.е. пришлось бы как-то разбивать таблицу на несколько tr). Да, нужно поддерживать ИЕ7 и 8, поэтому с псевдоклассами и прочими фишками туговато. Буду очень признательна за помощь, потому что результат хотят быстро, а голова соображает медленно. Спасибо.

У меня муж за Pro с ретиной работает - все просто зашибись Такой четкой картинки я пока еще не видела, при зуме ничего не мылится, цветопередача отличная. Я за ним часто в Aperture сижу и пока еще никаких проблем не замечала.

Zeeeya, по-моему, вы не совсем поняли, что сделали. Вас попросили выложить код (разметка + стили) на jsfiddle, чтобы можно было что-то там исправить и помочь вам, а вы выложили шаблон. Вы разобрались, из чего этот шаблон собран? Например, "<?php " - это включения php-кода, который вообще к серверным языкам относится. Я хоть с джумлой, слава богу, не работала, но подозреваю, что "<jdoc:include" - тоже элемент шаблонизации, т.е. в конечном итоге в это место будет выведен результат работы какого-то модуля. По сути, мы ведь разметку и увидеть не можем, как и jsfiidle ничего не может нарисовать в окне Result.

В хроме по F12, в ФФ Firebug и др. Кстати, инспектор показывает пустые <a href="">, потому что у вас многие <a> не закрыты. Посмотрите, например, на пункт "Банковское, биржевое дело и страхование" - там ссылка не закрыта, вот и творилось у вас безобразие.

Здравствуйте. Очень резко встал вопрос вербального общения с заказчиками. Работаю в оффшорном филиале американской компании, и почти все вокруг "спикают" аж на раз. Когда проходила сюда собеседование, на проект требовался только reading and writing level, а сейчас проект другой, и тут уже народ жаждет общения. Пока заказчика предупредили, что у меня weak speaking english, но подозреваю, что как-то коммуницировать голосом придется и очень скоро. В связи с этим, может кому-то попадались толковые аудио-подкасты об html/css/javascript. Но не уроки, а именно discussions, чтобы там шло общение в формате диалогов. Искала, но находятся или аудио- и видео-уроки, или аудио-книги, а мне же отчитываться нужно будет и вопросы задавать. И все это при коллегах, которые так резво рядом щебечут.. Аж коленки трусятся.

А вы бы в инспекторе посмотрели - там же масса пустых ссылок с паддингами.

На здоровье

Почитайте о версте двухколоночных макетов http://htmlbook.ru/layout