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

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

Новые темы	Объявления	Свободное общение
19:37 Xrumer-полезный софт или нет? 17:26 AI под надзором. Минцифры готовят клеймо для контента 17:23 APK на паузе. Google убивает быстрый конверт 17:18 Яндекс-ап 20 марта и похороны ChatGPT, Claude и Gemini. Считаем убытки 15:02 Слипание слов в блоке 10:39 MAX попер в бурж: 40 стран, ведение каналов и горы дешевого трафика 22:32 Gambling Craft - гемблинг по белому	17:24 Обменный Сервис - Купец (Kupec.cc) 15:52 Продам аккаунты Gmail USA IP \| Gmail MIX IP \| Outlook Old 14:06 Продвижение YouTube видео в топ поиска \| Любой тип контента \| Гарантия результата 14:06 №1 Рассылка / Инвайтинг [TELEGRAM] \| Приватный метод 14:06 Trustpilot Reviews \| Подниму рейтинг вашей компании 14:06 Установка\|Настройка\|Доработка\|Наполнение сайтов\|Дизайн\|3D\|Видеомонтаж 13:24 Мобильные и Резидентные Прокси Для Соц Сетей \| 3 Гб Бесплатно	19:26 Сайты Рунета 16:24 молодильные яблоки и живая вода 08:52 Чак Норрис ушел - 19 марта 2026, 86 лет, семья подтвердила 00:10 8 марта: желаю аптайма 99.9% и e-e-a-t без локов 20:23 Панель Кнопки соцсетей 20:09 Точные прогнозы на футбол 14:03 Огородники