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

Сообщений: 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:50 Индексация страниц 12:36 У кого новостник, дайте пару советов плиз 13:53 AviTool - мощный инструмент для автоматизации работы с Avito 17:01 Absence в Армении 23:19 Ребята подскажите какими сервисами и прогами вы пользуетесь для SEO продвижения? 20:28 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 14:50 Какую выбрать тему/нишу для сайта?	16:01 Whatsapp рассылки и реселлерская программа 15:21 PAY2DAY.TOP - Покупка и продажа криптовалюты за рубли. 15:03 BestChange – обменивать электронную валюту можно быстро и выгодно 14:16 Продажа аккаунтов HH.RU 13:39 Продам аккаунты Gmail USA IP \| Gmail MIX IP \| Outlook Old 13:07 A-Parser 1.1 - продвинутый парсер поисковых систем, Suggest, PR, DMOZ, Whois, etc 11:45 FastWM.org Выгодный обмен/вывод Webmoney/Ya.M/QIWI/Сбер/Приват24	10:59 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 20:17 Точные прогнозы на футбол 12:23 150+ хакерских поисковых систем и инструментов 08:38 Накрутка поисковых подсказок 17:41 Стряхнуть обыденность - об Агасфере 10:54 Добро пожаловать в цифровой мир... 22:39 Топ-5 способов использовать мобильные прокси для бизнеса: подробный обзор