Перейти к содержанию
gts

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

Рекомендуемые сообщения

Привет. Сайт 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
4 минуты назад, gts сказал:

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

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

вы стилями не сделаете, вам в тпл надо поменять 4 на 3

вот тут

<div class="col-md-4">

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

или как вариант :D

 

пропишите в стили вот так 

.col-md-4 {
    width: 25%;
}

 

но это совсем плохая затея))

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Только что, 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>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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 блок запилите

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Потому что 1 </div> с самого конца нужно перенести перед последним блоком

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 минуты назад, fanatic сказал:

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

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

Пропустил момент, что ему блок нужно снизу под 3мя)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
10 минут назад, zlob сказал:

Потому что 1 </div> с самого конца нужно перенести перед последним блоком

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

@media (max-width: 992px){

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

      margin-left: 33.33%;

  }

}

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

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

Изменено пользователем jaffagold

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Только что, gts сказал:

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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>

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

.

Изменено пользователем zlob

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

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

Изменено пользователем jaffagold

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
4 минуты назад, zlob сказал:

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

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

то что у меня

col-md-offset-4

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 минуту назад, fanatic сказал:

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

то что у меня


col-md-offset-4

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
17 минут назад, jaffagold сказал:

Мне стало интересно написать эти стили, так, для разнообразия. 

Раньше не видел такое :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.