Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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


gts
 Share

Recommended Posts

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

Edited by gts
Link to comment
Share on other sites


4 минуты назад, gts сказал:

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

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

 

Link to comment
Share on other sites

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

 

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

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

 

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

Link to comment
Share on other sites


Только что, 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>

 

Link to comment
Share on other sites


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 блок запилите

Link to comment
Share on other sites


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

Edited by gts
Link to comment
Share on other sites


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>

 

Link to comment
Share on other sites

2 минуты назад, fanatic сказал:

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

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

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

Link to comment
Share on other sites


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

Link to comment
Share on other sites

10 минут назад, zlob сказал:

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

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

 

Link to comment
Share on other sites


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

 

@media (max-width: 992px){

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

      margin-left: 33.33%;

  }

}

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

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

Edited by jaffagold
Link to comment
Share on other sites


Только что, gts сказал:

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

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

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

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

Link to comment
Share on other sites


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>

 

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

Link to comment
Share on other sites


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

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

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

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

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

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

Edited by jaffagold
Link to comment
Share on other sites


4 минуты назад, zlob сказал:

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

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

то что у меня

col-md-offset-4

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

Link to comment
Share on other sites

1 минуту назад, fanatic сказал:

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

то что у меня

col-md-offset-4

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

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

Link to comment
Share on other sites


17 минут назад, jaffagold сказал:

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

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

Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.