Как сделать список категорий горизонтально.

Регистрация
6 Июн 2013
Сообщения
103
Реакции
2
Здравия форумчане!
Есть список подкатегорий. Он выводится вертикально списком. Как сделать так, чтобы он выводился списочно?
upload_2013-11-6_12-17-44.png
Аналогичный вопрос по поводу товаров. Может кто покупал или есть свободный модуль для вывода товаров более компактно, нежели списочно. Буду весьма признателен. Готов платить какие-то деньги.
Может, есть вариант шаблона с нормальным выводом товаров.
 

WinsanT

Писатель
Регистрация
15 Янв 2012
Сообщения
7
Реакции
2
На сколько я помню, в строчном варианте должно быть описание категории...
Вообще, можно реализовать это по средством CSS стиля (столбиками, а не строчками)
Было бы не плохо увидеть ссылку на магазин...
 

trusted

Постоялец
Регистрация
13 Июн 2012
Сообщения
55
Реакции
20
Задаёшь wight and hight, а потом через float делаешь элементы плавающими. Все можно сделать и в html, и в css.
 
Регистрация
6 Июн 2013
Сообщения
103
Реакции
2
вот магазин. progips.com.ua
к сожалению не силен в стилях и т.д. могу выполнить инструкции.
может у кого есть модуль для этого?
мне товарищ говорит, что где-то видел модуль, где одновременно меняется и категории и товары на горизонтальный вывод.
 

kabasik

Полиционер
Регистрация
14 Мар 2012
Сообщения
224
Реакции
73
вот магазин. progips.com.ua
к сожалению не силен в стилях и т.д. могу выполнить инструкции.
может у кого есть модуль для этого?
мне товарищ говорит, что где-то видел модуль, где одновременно меняется и категории и товары на горизонтальный вывод.
Модуль был но он вроде для 1.4
А вообще добавляешь в product-list.css
Код:
product_list li {
float: left;
width: 150px;
и подгоняешь в product-list.tpl название и картинку под блок как нужно. Не забудь сделать Бэк-ап
 
Регистрация
6 Июн 2013
Сообщения
103
Реакции
2
Модуль был но он вроде для 1.4
А вообще добавляешь в product-list.css
Код:
product_list li {
float: left;
width: 150px;
и подгоняешь в product-list.tpl название и картинку под блок как нужно. Не забудь сделать Бэк-ап
ul#product_list {
list-style-type: none
}
#product_list li {
margin-bottom: 14px;
padding: 12px 8px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px
}
#product_list li a {
color: #374853;
text-decoration: none
}

#product_list li .left_block {
float:left;
padding-top:58px;
width:15px
}
#product_list li .left_block .compare label {display:none;}

#product_list li p.compare input {
vertical-align: text-bottom
}

#product_list li .center_block {
float: left;
padding:0 7px;
width: 342px;/* 356 */
border-right:1px dotted #ccc
}
#product_list a.product_img_link {
overflow:hidden;
position:relative;
float: left;
display:block;
margin-right: 14px;
border: 1px solid #ccc
}
#product_list a.product_img_link img {
display: block;
vertical-align: bottom
}
#product_list li span.new {
display: block;
position: absolute;
top: 15px;
right:-30px;
padding: 1px 4px;
width: 101px;
font-size:10px;
color: #fff;
text-align: center;
text-transform: uppercase;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform:rotate(45deg);
/*-ms-transform: rotate(45deg);*/
background-color: #990000;
transform: rotate(45deg); /* Newer browsers */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

.ie9 #product_list li span.new{top:-18px;right:-38px}
.ie8 #product_list li span.new{top:-18px;right:-38px}
.ie7 #product_list li span.new {top:-30px;right:-25px}
.lt-ie6 #featured-products_block_center .product_image span.new {top:-30px;right:-25px}
#product_list li h3 {
padding:0 0 10px 0;
font-size:13px;
color:#000
}
#product_list li a {
color: #000;
text-decoration: none;
}

#product_list li p.product_desc {
overflow: hidden;
padding:0;
line-height:16px;
}
#product_list li p.product_desc,
#product_list li p.product_desc a {
color:#666;
}

#product_list li .right_block {
position:relative;
float: left;
width: 145px;
text-align: right
}
#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
display: block;
font-weight: bold;
color: #990000;
text-transform: uppercase
}
#product_list li .discount {
position:absolute;
top:0;
right:0;
display: inline-block;
font-weight: bold;
padding: 1px 5px;
font-size: 10px;
color: #fff;
text-transform: uppercase;
background: none repeat scroll 0 0 #9B0000
}
#product_list li .online_only {
margin:0 0 10px 0
}
#product_list li .content_price {
margin:26px 0 15px 0;
}
#product_list li .price {
display: block;
margin-bottom: 15px;
font-weight:bold;
font-size: 18px;
color:#990000
}
#product_list li span.availability {
color: #488C40
}
#product_list li .ajax_add_to_cart_button {
padding-left: 20px
}
#product_list li .ajax_add_to_cart_button span {
display: block;
position: absolute;
top: -1px;
left: -12px;
height: 26px;
width: 26px;
background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent
}
#product_list li .lnk_view {
display: block;
margin-top:15px;
padding:0 10px;
border:none;
font-weight:bold;
color:#0088CC;
background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent
}
#product_list li .lnk_view:hover {text-decoration:underline}
Не могу понять где вставлять конкретно.
Пока не понял как подгонять картинку и текст.
 

kabasik

Полиционер
Регистрация
14 Мар 2012
Сообщения
224
Реакции
73
Стой стой, тебе же под категории нужны, тогда просто к .inline_list li {
добавь:

  1. float: left;
 
Регистрация
6 Июн 2013
Сообщения
103
Реакции
2
так пока product_list не трогаю. надо пока разобраться с category.css
скан_подкатегории_горизонтально.jpg
h1{margin-bottom:0px;}

.resumecat {
margin:0px 0 0px 0;
padding:8px 7px;
color:#000;
background:#f0f0f0;
}

.content_scene_cat {
padding:5px;
border:0px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 1px #e2e2e2;
-webkit-box-shadow: 0 1px 1px #e2e2e2;
box-shadow: 0 1px 1px #e2e2e2;
}

.cat_desc {
font-size:12px;
line-height:18px;
}
.cat_desc p {padding:0 10px 5px 10px}
.cat_desc .lnk_more {
padding:0 10px;
color:#0088CC;
background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent;
}


/* ************************************************************************************************
SUB CATEGORIES
************************************************************************************************ */
#subcategories {margin-top:0px}
#subcategories h3 {
padding:5px 5px;
font-size:13px;
color:#fff;
text-transform:uppercase;
text-shadow:0 1px 0 #666;
background:url(../img/bg_table_th.png) repeat-x 0 0 #999
}

.inline_list {
list-style-type:none;
margin-top:10px;
}
.inline_list li {
padding:0px 0;
border-bottom:0px dotted #ccc
}
.inline_list li .img {
float:left;
margin-right:15px
}
.inline_list li img {
border:1px solid #ccc
}
.inline_list li .cat_name {
font-weight:bold;
font-size:13px
}

подскажите, кто делал. или если видели, дайте ссылку на сайт, где уже установлено такое расположение.
Заранее благодарен. Очень много места занимают эти подкатегории. это первое, что нужно сделать. очень плохо, что надо пролистывать, прежде, чем увидеть товары
 

albwibowo

Создатель
Регистрация
6 Июл 2007
Сообщения
13
Реакции
2
/*** ESSENTIAL STYLES ***/
.sf-contener {
clear: both;
}
.sf-right {
margin-right: 14px;
float: right;
width: 7px;
}
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
margin: 10px 0;
padding:0;
width:980px;/* 980 */
background: #383838;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;

}
.sf-menu a {
display: block;
position: relative;
color:#fff;
text-shadow:0 1px 0 #333;
}
.sf-menu li:hover ul
{
left: 10px;
}
.sf-menu li.sfHover ul {
left : 0px;
top: 34px; /* match top ul list item height */
z-index:99;
width:800px;

}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {

position:inline;
left : 0px;
top: 34px; /* match top ul list item height */
z-index:99;
width:200px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 200px; /* match ul width */
top: 0;
}

/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a {
display:block;
margin-right:2px;
padding: 0 22px 0 20px;
line-height:35px;
border: 0;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #fff;
white-space:nowrap;
}
.sf-menu li li {
background:#333 ;

}
.sf-menu li li li {
background:#333 ;

}
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #4E4E4E;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
background: #4e4e4e;
outline: 0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: 10px;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: 11px;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
background: url('../img/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-bottom-left-radius: 17px;
-moz-border-top-right-radius: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
li.sf-search {
background: inherit;
float: right;
line-height: 25px;
}
li.sf-search input {
-moz-border-radius: 0 5px 5px 0;
padding: 3px 0;
padding-left: 20px;
margin: 6px 6px 0 0;
background: #fff url('../img/search.gif') no-repeat left center;
border:1px solid #777
}

/* hack IE7 */
.sf-menu a, .sf-menu a:visited {height:34px !IE;}
.sf-menu li li {
width:200px;
background:#726f72 !IE;
}
 

Magikson

Создатель
Регистрация
3 Дек 2013
Сообщения
13
Реакции
1
Здравствуйте!
Есть решение? Тоже задаюсь тем же вопросом..
Можно их вообще убрать?
 
Сверху