Сообщений в теме: 24

[gesha81]

Mr.Nito (26 Сентябрь 2016 - 10:05) писал:

Здравствуйте.
Нужно немного поправить вёрстку.
Для этого в Редакторе шаблонов - HTML
найдите:

Скрытый текст

<!-- таблица лейдинга -->
<div class="pattern">
<div class="row-margin">
<div class="top-left">
	 <a href="http://buffik.ru/catalog/Balans-bordy" target="_blank">
	 <img src="http://r204928.storeland.net/balans.jpg" alt="">
	 </a>
</div>
<div class="top-right">
	 <a href="http://buffik.ru/catalog/Tovary-so-skidkami" target="_blank">
	 <img src="http://r204928.storeland.net/NOVINKI.jpg" alt="">
	 </a>
</div>
</div>
<div style="clear:both;"></div>
<div class="row-margin">
<div class="long-top">
	 <a href="http://buffik.ru/catalog/Tovary-so-skidkami" target="_blank">
	 <img src="http://r204928.storeland.net/promo.jpg" alt="">
	 </a>
</div>
</div>
<div style="clear:both;"></div>
<div>
<div class="bot-left">
	 <a href="http://buffik.ru/catalog/Kepki" target="_blank">
	 <img src="http://r204928.storeland.net/reep.jpg" alt="">
	 </a>
</div>
<!-- <div class="bot-right">
	 <a href="http://www.boardshop-1.ru/catalog/bones/" target="_blank">
	 <img src="http://www.boardshop-1.ru/upload/iblock/89c/bones_370_270.jpg" alt="">
	 </a>
	 </div>
</div>
<div style="clear:both;"></div>
<div class="row-margin">
<div class="long-bot">
	 <a href="http://blog.boardshop-1.ru/" target="_blank">
	 <img src="http://www.boardshop-1.ru/upload/iblock/cda/blog_1045_270_5.jpg" alt="">
	 </a>
	 </div>-->
</div>
<div style="clear:both;"></div>
</div>
<!-- конец таблицы лейдинга -->

замените на

Скрытый текст

<!-- таблица лейдинга -->
<div class="container landing-table">
<div class="row">
<div class="top-left">
	 <a href="http://buffik.ru/catalog/Balans-bordy" target="_blank">
	 <img src="http://r204928.storeland.net/balans.jpg" alt="">
	 </a>
</div>
<div class="top-right">
	 <a href="http://buffik.ru/catalog/Tovary-so-skidkami" target="_blank">
	 <img src="http://r204928.storeland.net/NOVINKI.jpg" alt="">
	 </a>
</div>
</div>
<div class="row">
<div class="long-top">
	 <a href="http://buffik.ru/catalog/Tovary-so-skidkami" target="_blank">
	 <img src="http://r204928.storeland.net/promo.jpg" alt="">
	 </a>
</div>
</div>
<div class="row">
<div class="bot-left">
	 <a href="http://buffik.ru/catalog/Kepki" target="_blank">
	 <img src="http://r204928.storeland.net/reep.jpg" alt="">
	 </a>
</div>
<div class="bot-right">
	 <a href="http://www.boardshop-1.ru/catalog/bones/" target="_blank">
	 <img src="http://www.boardshop-1.ru/upload/iblock/89c/bones_370_270.jpg" alt="">
	 </a>
</div>
</div>
<div class="row">
<div class="long-bot">
	 <a href="http://blog.boardshop-1.ru/" target="_blank">
	 <img src="http://www.boardshop-1.ru/upload/iblock/cda/blog_1045_270_5.jpg" alt="">
	 </a>
</div>
</div>
<!-- конец таблицы лейдинга -->

в самом конце файла main.css добавьте

.landing-table .top-left {
width: 35%;
float: left;
height: 270px;
float: left;
overflow: hidden;
}
.landing-table .top-right {
width: 64%;
height: 270px;
float: right text-align: right;
margin-left: 5px;
float: left;
overflow: hidden;
}
.landing-table .long-top {
width: 100%;
overflow: hidden;
}
.landing-table .long-top img {
width: 100%;
}
.landing-table .bot-left {
float: left;
width: 58%;
}
.landing-table .bot-right {
float: left;
width: 30%;
}
.landing-table .long-bot img {
width: 100%;
}

для скрытия на мобильных устройствах в конце main.css добавьте

@media all and (max-width: 381px) {
.landing-table {display:none;}
}

Но это не то , что нужно было. Расположение блоков должно остаться прежним, а сейчас они "поплыли" и распологаются просто один над другим...

[Mr.Nito]

gesha81 (26 Сентябрь 2016 - 10:16) писал:

Но это не то , что нужно было. Расположение блоков должно остаться прежним, а сейчас они "поплыли" и распологаются просто один над другим...

Внесли вам изменения, создали бэкап, проверьте пожалуйста.

В разметке были закомментированы нужные <div> , поэтому блоки ломались.

[gesha81]

Mr.Nito (26 Сентябрь 2016 - 10:29) писал:

Внесли вам изменения, создали бэкап, проверьте пожалуйста.

В разметке были закомментированы нужные <div> , поэтому блоки ломались.

Спасибо. Все устраивает. Только подскажите пожалуйста еще, что нужно  дописать в стиле, что бы пространства между ячейками таблицы были  равны 3 хотя бы или 5

[Razon]

gesha81 (26 Сентябрь 2016 - 10:38) писал:

Спасибо. Все устраивает. Только подскажите пожалуйста еще, что нужно  дописать в стиле, что бы пространства между ячейками таблицы были  равны 3 хотя бы или 5

В файле main.css
Добавьте строку:

.row .long-top, .row .bot-left, .row .top-right, .row .top-left {padding-top:5px; padding-bottom:5px;}

[gesha81]

Ra1zon (26 Сентябрь 2016 - 10:51) писал:

В файле main.css
Добавьте строку:

.row .long-top, .row .bot-left, .row .top-right, .row .top-left {padding-top:5px; padding-bottom:5px;}

Ну вот и славненько )))) Большое Спасибо!