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'ов)

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