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

Сообщений: 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)

Новые темы	Объявления	Свободное общение
20:13 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 19:41 25$ (ежемесячно) AdSense 21:39 Подскажите где продвигать сайт. 10:57 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 19:12 Мошенники-копирайтеры 08:57 Индексация страниц 23:16 Есть ли альтернатива Адсенсу и РСЯ?	11:46 Рассылки СМС/SMS, Вайбер/Viber, Ватсап/Whatsapp, Телеграм/Telegram любой тематики по всему миру 10:21 PAY2DAY.TOP - Покупка и продажа криптовалюты за рубли. 20:13 BIGPROXY.SHOP - Резидентные Ротационные Backconnect Proxy USA EUROPA MIX [Безлимитный трафик] 11:01 Современный скрипт обменника электронных валют 10:13 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика 04:10 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 23:58 Аккаунты работадателей HH.RU	11:58 Добро пожаловать в цифровой мир... 00:12 Огородники 22:36 Точные прогнозы на футбол 10:59 Новости искусственного интеллекта 04:26 Хром ругается на форум 18:41 С юмором по жизни! 14:22 SENDERSEX.COM - Тизерная партнёрка онлайн игры Эротические Фанты Онлайн