Вопрос по верстке

Сообщений: 178 Регистрация: Апр 2013

10 Июня 2014 08:00

Только начинаю делать собственные сайты не на готовых движках, столкнулся с проблемой в верстке. Посмотрите на top-shop.ru/ , на главной, товары разделены вертикальной пунктирной линией. При этом border-right, насколько я понимаю, есть только у 3 блоков из 4. Вопрос: как не выводить border-right для правого крайнего блока (то есть, чтобы у четвертого слева товара не было вертикальной пунктирной линии, как на top-shop.ru/), учитывая, что товары на сайт выводятся массивом, соответственно, и div class для каждой мини-карточки товара используется один и тот же, просто дублируется в зависимости от количества выводимых товаров. Спасибо!

Olderman

Сообщений: 1026 Регистрация: Авг 2013

10 Июня 2014 08:25

Код

<style>
.wrapper > div {border-right:1px dashed #ccc} 
.wrapper > div:last-child  {border:none  !important;}
</style>

<div class="wrapper"> 
   <div>бла бла бла</div>
   <div>бла бла бла</div> 
   <div>бла бла бла</div>
</div>

импортант тут на самом деле просто для страховки, по идее все и так работать будет. Читайте: http://webgyry.info/last-child

Изменено: Olderman - 10 Июня 2014 08:30

Dexter

Сообщений: 395 Регистрация: Дек 2013

10 Июня 2014 09:17

Максим, там не border-right. У них в шаблоне вшит вывод бордера-картинки, ребята не заморачивались с CSS.

"<div class="vert_razd_line_cont"><div class="vert_razd_line" style="height:252px;">

</div></div>"

А так, Olderman совершенно верно советует.

Альтернативный вариант -

.wrapper > div:nth-child(4) {border:none !important;}

Так же избавит 4ый див от рамки.

Мои услуги: Создание и разработка сайтов на Wordpress/фреймворках, создание шаблонов на WP, любая верстка по макету и без, разработка функционала. skype: sonicks12, email: spklkr@yandex.ru

Olderman

Сообщений: 1026 Регистрация: Авг 2013

10 Июня 2014 09:24

Цитата
Dexter пишет: У них в шаблоне вшит вывод бордера-картинки

на да, конечно, картинка ))) вы уж наговорите сейчас. А это что, у них, в файле additional.css на 6 строке, картинка?

Код
.vert_razd_line { border-right: 1px dashed #CCCCCC; width: 1px !important; }

Цитата
Dexter пишет:ребята не заморачивались с CSS.

если это не css, я прям тогда не знаю, что такое css...

Изменено: Olderman - 10 Июня 2014 09:25

Dexter

Сообщений: 395 Регистрация: Дек 2013

10 Июня 2014 09:29

Да, каюсь, с утра недоглядел. Принимаю желаемое за действительное smile:)

*ушел пить кофе.

Olderman

Сообщений: 1026 Регистрация: Авг 2013

10 Июня 2014 09:33

Цитата
Dexter пишет: Да, каюсь, с утра недоглядел.

Бывает )) Надо сначала пить кофе ))))

Dexter

Сообщений: 395 Регистрация: Дек 2013

10 Июня 2014 09:37

первое, что я делаю после пробуждения - иду на работу smile:D

Кофе и все ништяки уже тут

Максим Павлов

Сообщений: 178 Регистрация: Апр 2013

10 Июня 2014 16:20

Цитата
Dexter пишет: Альтернативный вариант - .wrapper > div:nth-child(4) {border:none !important;} Так же избавит 4ый див от рамки.

Огромное спасибо за помощь, сделал для себя большое открытие сегодня. У меня в тестовом инет-магазине товаров очень много, и во .wrapper выводится минимум 16 <div>, по 4 <div> на строчку. Соответственно, была задача убрать бордер не только у одного <div>, а у каждого четвертого. В моем случае помогло nth-child, записал так:

.wrapper > div:nth-child(4n+4) {border:none !important;}

Таким образом, у каждого четвертого <div> нет бордера. Еще раз огромное спасибо!

Если кому нужно и может быть полезным, систему высчитывания "формулы" по типу nth-child(4n+4) можно посмотреть здесь

http://htmlbook.ru/css/nth-child

Изменено: Максим Павлов - 10 Июня 2014 16:21

Dexter

Сообщений: 395 Регистрация: Дек 2013

10 Июня 2014 16:34

Всегда пожалуйста )

Валентин Сообщений: 621 Регистрация: Май 2010	#10 12 Июня 2014 21:44 добавлю к вышесказанному: эти псевдоклассы не поддерживаются ишаком ниже 9 версии... что бы не обидеть посетителей, заходящих с 8 ишака и ниже, можно использовать вот этот хак инвестиции

Похожие темы:

13.10.2019 17:18	Подскажите cms вопрос-ответ или подобное.
16.07.2019 08:06	Вопрос по Url страниц
24.09.2018 12:12	Нужна помощь в верстке
15.06.2018 11:22	Бесплатная помощь по верстке
24.11.2017 19:14	Вопрос к обладателям темы ВП Newspaper

Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)

Новые темы	Объявления	Свободное общение
14:13 Profit Pixels - In-House Форекс, Крипто, Трейдинг CPA Офферы \| Еженедельные Выплаты \| CPA до $950 10:09 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 21:07 Взрывной рост роботности в Метрике 18:33 Trafee.com – эффективная монетизация вашего дейтинг трафика 15:41 Adtrafico - Правильная партнёрская сеть под бурж трафик 22:12 Stixi.ru. и stixi.com 20:30 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options	14:51 Мощные прокси для вашего бизнеса! 12:17 Продам дешёвые домены (1$/штука) 10:58 BIGPROXY.SHOP - Резидентные Ротационные Backconnect Proxy USA EUROPA MIX [Безлимитный трафик] 10:17 Размещу ссылки/статьи на ваш сайт \| Рост ИКС \| XRumer 23.0.4 StrongAI 22:12 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 18:06 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика 05:50 LunaProxy дешевый глобальный резидентный прокси $0,77/ГБ Ротирующийся прокси\|Собственный IP\|Безлимитный план	17:56 Точные прогнозы на футбол 20:09 Сколько сейчас стоит наполнение ИМ? 12:43 Куплю проигрышные букмекерские аккаунты 04:33 Половина скидок на распродажах — фейк 07:53 НейроБабушка наказывает мошенников 19:59 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко 19:57 Пятница 13-ое: VK принял радикальное решение и закрыл доступ к порно контенту