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

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


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 post
Share on other sites

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

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

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

 

Link to post
Share on other sites

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

вот тут

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

Link to post
Share on other sites

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

 

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

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

 

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

Link to post
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 post
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 post
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 post
Share on other sites

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

Link to post
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 post
Share on other sites
2 минуты назад, fanatic сказал:

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

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites
10 минут назад, zlob сказал:

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

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

 

Link to post
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 post
Share on other sites

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

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

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

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

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

Link to post
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 post
Share on other sites

.

Edited by zlob
Link to post
Share on other sites

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

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

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

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

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

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

Edited by jaffagold
Link to post
Share on other sites

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

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

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

то что у меня

col-md-offset-4

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

Link to post
Share on other sites
1 минуту назад, fanatic сказал:

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

то что у меня


col-md-offset-4

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

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

Link to post
Share on other sites

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

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

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

Link to post
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
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • 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.