Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Категории на главной через css

gts

Автор: ,
в Песочница

 Share

Recommended Posts

gts Enthusiast

gts

Опубліковано:
Опубліковано: (змінено)

Привет. Сайт at7.ru, cейчас на главной странице в "Категории на главной" три блока, нужно добавить четвертый (пример на прикрепленной картинке). Насколько я понимаю, нужно править код http://at7.ru/catalog/view/theme/default/stylesheet/stylesheet.css Какие изменения туда нужно внести, чтобы было как в примере? 

}
.category-item {
	padding: 10px 10px 16px 10px;
}

.category-item img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 5px solid #ddd;
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
	-o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
	box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.category-item img:hover {
	border: 5px solid #fff;
	position: relative;
	transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	transform: scale(1.01,1.01);
	-webkit-transform: scale(1.01,1.01);
	-moz-transform: scale(1.01,1.01);
	-ms-transform: scale(1.01,1.01);
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
/*	outline: 18px solid #ea7808;
	outline-offset: -18px;*/

 

ex.jpg

2.png

Змінено користувачем gts
Надіслати
Поділитися на інших сайтах

fanatic Grand Master

fanatic

Опубліковано:
Опубліковано:
4 минуты назад, gts сказал:

нужно добавить четвертый (пример на прикрепленной картинке). Насколько я понимаю, нужно править код http://at7.ru/catalog/view/theme/default/stylesheet/stylesheet.css

а при чем тут css?  сколько блоков выводите в шаблоне, столько и есть на странице.  или я что то не понял?

 

Надіслати
Поділитися на інших сайтах
1

gts Enthusiast

gts

Опубліковано:
  • Автор
Опубліковано:
Только что, fanatic сказал:

а при чем тут css?  сколько блоков выводите в шаблоне, столько и есть на странице.  или я что то не понял?

 

используется шаблон HTML содержимое со следующим кодом. Что нужно сделать, чтобы четвыртый блок шел на новой строке? 

<div class="row">
<div class="col-md-4">
      <div class="category-item">
        <a href="/katalog-kaminov/kaminy-elektricheskie/"><img src="/image/catalog/elektricheskie-kaminy.jpg" alt="Электрические камины"></a>
      </div>
</div>
<div class="col-md-4">
      <div class="category-item">
        <a href="/katalog-kaminov/kaminy-3d/"><img src="/image/catalog/3d-kaminy.jpg" alt="3D Камины"></a>
      </div>
</div>
<div class="col-md-4">
      <div class="category-item">
        <a href="/katalog-kaminov/ochagi/"><img src="/image/catalog/ochagi.jpg" alt="Очаги для каминов"></a>
      </div>
</div>
</div>

 

Надіслати
Поділитися на інших сайтах

zlob Proficient

zlob

Опубліковано:
Опубліковано:
5 минут назад, gts сказал:

используется шаблон HTML содержимое со следующим кодом. Что нужно сделать, чтобы четвыртый блок шел на новой строке? 


<div class="row">
<div class="col-md-4">
      <div class="category-item">
        <a href="/katalog-kaminov/kaminy-elektricheskie/"><img src="/image/catalog/elektricheskie-kaminy.jpg" alt="Электрические камины"></a>
      </div>
</div>
<div class="col-md-4">
      <div class="category-item">
        <a href="/katalog-kaminov/kaminy-3d/"><img src="/image/catalog/3d-kaminy.jpg" alt="3D Камины"></a>
      </div>
</div>
<div class="col-md-4">
      <div class="category-item">
        <a href="/katalog-kaminov/ochagi/"><img src="/image/catalog/ochagi.jpg" alt="Очаги для каминов"></a>
      </div>
</div>
</div>

 

ну вы 4ки на 3ки поменяйте и соответсвенно сам 4 блок запилите

Надіслати
Поділитися на інших сайтах

gts Enthusiast

gts

Опубліковано:
  • Автор
Опубліковано: (змінено)
18 минут назад, zlob сказал:

ну вы 4ки на 3ки поменяйте и соответсвенно сам 4 блок запилите

сделал, но почему-то на сайте 4-й блок отображается с ошибкой . 

<div class="row">
<div class="col-md-3">
      <div class="category-item">
        <a href="/katalog-kaminov/kaminy-elektricheskie/"><img src="/image/catalog/elektricheskie-kaminy.jpg" alt="Электрические камины"></a>
      </div>
</div>
<div class="col-md-3">
      <div class="category-item">
        <a href="/katalog-kaminov/kaminy-3d/"><img src="/image/catalog/3d-kaminy.jpg" alt="3D Камины"></a>
      </div>
</div>
<div class="col-md-3">
      <div class="category-item">
        <a href="/katalog-kaminov/ochagi/"><img src="/image/catalog/ochagi.jpg" alt="Очаги для каминов"></a>
      </div>
<div class="col-md-3">
      <div class="category-item">
        <a href="/katalog-kaminov/ochagi/"><img src="/image/catalog/ochagi.jpg" alt="Очаги для каминов"></a>
      </div>
</div>
</div></div>

 

3.jpg

Змінено користувачем gts
Надіслати
Поділитися на інших сайтах

fanatic Grand Master

fanatic

Опубліковано:
Опубліковано:
19 минут назад, zlob сказал:

ну вы 4ки на 3ки поменяйте

и будет 4 блока в ряду.

может как-то так 

	    <div class="row">
		<div class="col-md-4">
		    <div class="category-item">
			<a href="/katalog-kaminov/kaminy-elektricheskie/"><img src="/image/catalog/ochagi.jpg" alt="Электрические камины"></a>
		    </div>
		</div>
		<div class="col-md-4">
		    <div class="category-item">
			<a href="/katalog-kaminov/kaminy-3d/"><img src="/image/catalog/ochagi.jpg" alt="3D Камины"></a>
		    </div>
		</div>
		<div class="col-md-4">
		    <div class="category-item">
			<a href="/katalog-kaminov/ochagi/"><img src="/image/catalog/ochagi.jpg" alt="Очаги для каминов"></a>
		    </div>
		</div>
	    </div>
	    <div class="row">
		<div class="col-md-4 col-md-offset-4">
		    <div class="category-item">
			<a href="/katalog-kaminov/ochagi/"><img src="/image/catalog/ochagi.jpg" alt="Очаги для каминов"></a>
		    </div>
		</div>
	    </div>

 

Надіслати
Поділитися на інших сайтах
1

fanatic Grand Master

fanatic

Опубліковано:
Опубліковано:

что-то у вас на первых  скринах,  3 блока  в ряду. а на последнем, просится 4.    так сколько нужно блоков в ряду?  вы определитесь

Надіслати
Поділитися на інших сайтах
1

jaffagold Mentor

jaffagold

Опубліковано:
Опубліковано: (змінено)

Можно стилями даже это замутить:

 

@media (max-width: 992px){

  body[class="common-home"] h2+.row .col-md-4:nth-of-type(4) {

      margin-left: 33.33%;

  }

}

Хотя, если вы сами прописываете это в html-Модуле, то все можно было бы упростить.

( опоздал, уже офсетом сделали, )

Змінено користувачем jaffagold
Надіслати
Поділитися на інших сайтах

zlob Proficient

zlob

Опубліковано:
Опубліковано:
Только что, gts сказал:

Благодарю, получилось.

так вам же не 4 в ряд надо, а 3 в одном и 1 снизу

Я просто не посмотрел скрины с самого начала

Если так, то решение вам выше прислали)

Надіслати
Поділитися на інших сайтах

gts Enthusiast

gts

Опубліковано:
  • Автор
Опубліковано:
11 минут назад, fanatic сказал:

и будет 4 блока в ряду.

может как-то так 


	    <div class="row">
		<div class="col-md-4">
		    <div class="category-item">
			<a href="/katalog-kaminov/kaminy-elektricheskie/"><img src="/image/catalog/ochagi.jpg" alt="Электрические камины"></a>
		    </div>
		</div>
		<div class="col-md-4">
		    <div class="category-item">
			<a href="/katalog-kaminov/kaminy-3d/"><img src="/image/catalog/ochagi.jpg" alt="3D Камины"></a>
		    </div>
		</div>
		<div class="col-md-4">
		    <div class="category-item">
			<a href="/katalog-kaminov/ochagi/"><img src="/image/catalog/ochagi.jpg" alt="Очаги для каминов"></a>
		    </div>
		</div>
	    </div>
	    <div class="row">
		<div class="col-md-4 col-md-offset-4">
		    <div class="category-item">
			<a href="/katalog-kaminov/ochagi/"><img src="/image/catalog/ochagi.jpg" alt="Очаги для каминов"></a>
		    </div>
		</div>
	    </div>

 

Попробовал этот вариант, это то что нужно, благодарю.

Надіслати
Поділитися на інших сайтах

jaffagold Mentor

jaffagold

Опубліковано:
Опубліковано: (змінено)

Эта конструкция была для того случая, когда у вас все блоки выводились друг за другом и четвертый становился слева на втором ряду. Именно это вам и не нравилось сначала. Мне стало интересно написать эти стили, так, для разнообразия. 

Такой костыль позволял выровнять четвертый блок по центру, если нет доступа к html-разметке. Например, если они выводятся так автоматически.

body использован, чтобы только на Главной это происходило

Медиазапрос для того, чтобы при перестроении блоков на узких экранах эти стили не применялись.

НО в целом, не заморачивайтесь, эти стили вам действительно не нужны, если у вас ест контольнад html-кодом.

Но я указал, что через разметку можно сделать намного проще. Вам уже дали правильный вариант разметки.

Змінено користувачем jaffagold
Надіслати
Поділитися на інших сайтах

fanatic Grand Master

fanatic

Опубліковано:
Опубліковано:
4 минуты назад, zlob сказал:

это мы че получим? 4 в ряд или 3 и 1?

это просто контейнеh сдвигается вправо  на %

то что у меня 

col-md-offset-4

если я правильно понял. в css не очень

Надіслати
Поділитися на інших сайтах
1

zlob Proficient

zlob

Опубліковано:
Опубліковано:
1 минуту назад, fanatic сказал:

это просто контейнеh сдвигается вправо  на %

то что у меня 


col-md-offset-4

если я правильно понял. в css не очень

Да, я уже понял, поэтому потер сообщение)

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду