Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
Akasha48
0 / 0 / 0
Регистрация: 06.06.2016
Сообщений: 2
1

Как сделать на сайте 4 колонки?

06.06.2016, 13:27. Просмотров 825. Ответов 3
Метки нет (Все метки)

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* * * product-list2.html * * */
/*list*/
.product-list2{list-style:none;margin:0;padding:0;}
.product-list2.list hr{display:none;}
.product-list2.list li{border:1px solid transparent;border-bottom-color:#e6e6e6;margin-top:-1px;}
.product-list2.list li:hover{border-color:#ababab;}
.product-list2.list .product-block{display:table-row;}
.product-list2.list .image,.product-list.list .offers{display:table-cell;vertical-align:middle;padding:30px 15px;}
.product-list2.list .image a{width:100px;}
.product-list2.list .image a img{max-width:100px;max-height:100px;}
.product-list2.list .image .corner.top { top: 10px; }
.product-list2.list .text{display:table-cell;padding:30px 0;vertical-align:top;width:428px;}
.product-list2.list .text .name{margin-bottom:5px;height:auto;}
.product-list2.list .text .prd-rating{margin-bottom:10px;}
.product-list2.list .text .description p,
.product-list2.list .text .description{margin:0;}
.product-list2.list .offers{text-align:right;width:150px;}
.product-list2.list .offers span{display:block;}
.product-list2.list .offers .compare-at-price{margin-bottom:5px;}
.product-list2.list .offers .price{font-size: 24px;margin-bottom:10px;}
.product-list2.list .offers .available{color: #a1a1a1;margin-bottom:10px;}
/*thumbs*/
.product-list2.thumbs hr{margin:0;border-color:#e6e6e6;}
.product-list2.thumbs li{display:inline-block;width:130;margin:0;padding:20px 0;vertical-align:top;}
.gt-ie8 .product-list2.thumbs li{width:130px;}
.product-list2.thumbs li:hover .product-block{border-color:#ababab;}
.product-list2.thumbs .product-blockborder:1px solid transparent;text-align:center;padding:5px 10px 0;}
.product-list2.thumbs .image{display:table;width:100%;}
.product-list2.thumbs .image a{height:100px;}
.product-list2.thumbs .image a img{margin:0;max-height:100px;max-width:100px;}
.product-list2.thumbs .image .corner.top { top: 5px; }
.product-list2.thumbs .image .corner.left { left: 0px; }
.product-list2.thumbs .text .name{margin-bottom: 5px;}
.product-list2.thumbs .text .prd-rating,
.product-list2.thumbs .text .description{display:none;}
.product-list2.thumbs .offers{height: 65px;line-height: 1;margin: 0;}
.product-list2.thumbs .offers .available.on{display:none;}
.product-list2.thumbs .offers .available{display:block;color: #a1a1a1;padding-top:15px;}
ul.thumbs input { margin: 0 3px 0 0 /* for correct checkbox display */; }
Помогите, пожалуйста!

На главной странице сайта не могу сделать 4 колонки вместо 1. Второй день мачаюсь!

Вот, адрес сайта:

http://test.spbtovar.ru/test/
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
06.06.2016, 13:27
Ответы с готовыми решениями:

Как сделать сайт в три колонки и резиновым?
Помогите пожалуйста. У меня получился такой код. Сайт: http://test1siegmein.ucoz.ru/ Как сделать...

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

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

Как сделать меню в две колонки, без таблиц
Доброго времени суток. Подскажите пожалуйста как сделать такое же меню без таблиц ? особенно...

Как в футере сделать две колонки по центру и интервал между ними
Как в футере сделать эти две колонки по центру и между ними интервал 20 пикселей?...

3
dzendev
163 / 88 / 45
Регистрация: 12.03.2016
Сообщений: 235
06.06.2016, 14:08 2
CSS
1
2
3
4
5
6
7
.product-list2 li {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 32%;
}
Так?
1
Akasha48
0 / 0 / 0
Регистрация: 06.06.2016
Сообщений: 2
06.06.2016, 14:58  [ТС] 3
Здравствуйте! Спасибо за ответ.
Получилось 3 колонки как и в оригинальной теме, нужно 4 меньшего размера.

Вот home.html может поможет:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="wrapper"> 
   <div class="left">
   <div class="cpt_custom_html cptovst_ef6c7y"><h2>
НОВИНКИ
</h2></div>
 
{if $wa->shop}
{$products = $wa->shop->productSet("novinki")}
{include file="product-list2.html" products=$products}
{/if}
    
</div>
     <div class="right">
     <div class="cpt_custom_html cptovst_ef6c7y"><h2>
СПЕЦ-
ПРЕДЛОЖЕНИЯ
</h2></div>
 
  <div class="outline">
 
   <p>
   {if $wa->shop}
{$products = $wa->shop->productSet("spetspredlozheniya")}
{include file="product-list2.html" products=$products}
 
{/if}
 
    
</p>
  </div>
 </body>
</html>
 
</div>
</div>
0
dzendev
163 / 88 / 45
Регистрация: 12.03.2016
Сообщений: 235
06.06.2016, 16:58 4
Ну вроде сами сделали...
0
06.06.2016, 16:58
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.06.2016, 16:58

Как сделать фон на сайте?
Хоху что-бы на сайте можно было менять фон и что-бы после перезагрузки страницы он сохранялся...

Сделать блоки как на сайте
Добрый вечер! Помогите начинающему прогеру. Ни как не могу сделать задание. Есть сайт...

Как сделать скролинг на сайте?
Резиновый сайт на джумле. Минимальный размер, установлен 1000px. По идее, при достижении этого...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru