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

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

Новые темы	Объявления	Свободное общение
19:39 SEO под нейро 18:01 Rotapost прикрыли! Чем пользоваться? 17:59 Ночной бар в Паттайе: как случайная встреча с "тайкой" и её кадыком перевернула мой взгляд на продвижение сайта в Google 2026 11:15 Как Яндекс индексирует ваш сайт? \| АПдейт выдача 8.12.2025 11:11 Операторы поиска Яндекса: FAQ для тех, кто хочет стать мастером поиска 18:31 Хлебные крошки на сайте: сказка из Простоквашино про навигацию в интернете 10:58 Стоит ли добавлять сайт в Rambler топ 100?	16:40 CryptoGraph — Анонимный обмен криптовалют без KYC и AML 13:53 Продам аккаунты Gmail USA IP \| Gmail MIX IP \| Outlook Old 12:34 Mixmasters - Exchange without AML and KYC 09:39 Продам: Флудер телефонов. Спамер телефонов. Массовые звонки на телефон 08:53 Мониторинг обменников Сrypto-scout.io 04:21 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 03:59 Продам обменник криптовалюты, а также новый обменник под ключ с обучением. Скидки на скрипты обменника	19:10 Точные прогнозы на футбол 18:32 Про мясо 18:00 С юмором по жизни! 14:04 Компьютерная мышь 13:08 Бесплатный майнинг Tether (USDT) 16:49 monetizer.agency – рекламная сеть для взрослого и развлекательного трафика. 100$ новому вебмастеру 20:43 Добро пожаловать в цифровой мир...