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

Константин Дубровский · 6 Ноя 2013

Здравия форумчане!
Есть список подкатегорий. Он выводится вертикально списком. Как сделать так, чтобы он выводился списочно?

Аналогичный вопрос по поводу товаров. Может кто покупал или есть свободный модуль для вывода товаров более компактно, нежели списочно. Буду весьма признателен. Готов платить какие-то деньги.
Может, есть вариант шаблона с нормальным выводом товаров.

WinsanT · 6 Ноя 2013

На сколько я помню, в строчном варианте должно быть описание категории...
Вообще, можно реализовать это по средством CSS стиля (столбиками, а не строчками)
Было бы не плохо увидеть ссылку на магазин...

trusted · 6 Ноя 2013

Задаёшь wight and hight, а потом через float делаешь элементы плавающими. Все можно сделать и в html, и в css.

Константин Дубровский · 7 Ноя 2013

вот магазин. progips.com.ua
к сожалению не силен в стилях и т.д. могу выполнить инструкции.
может у кого есть модуль для этого?
мне товарищ говорит, что где-то видел модуль, где одновременно меняется и категории и товары на горизонтальный вывод.

kabasik · 9 Ноя 2013

Константин Дубровский написал(а):
вот магазин. progips.com.ua
к сожалению не силен в стилях и т.д. могу выполнить инструкции.
может у кого есть модуль для этого?
мне товарищ говорит, что где-то видел модуль, где одновременно меняется и категории и товары на горизонтальный вывод.

Модуль был но он вроде для 1.4
А вообще добавляешь в product-list.css

Код:

product_list li {
float: left;
width: 150px;

и подгоняешь в product-list.tpl название и картинку под блок как нужно. Не забудь сделать Бэк-ап

Константин Дубровский · 9 Ноя 2013

kabasik написал(а):
Модуль был но он вроде для 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

XImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid

XImageTransform.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 · 9 Ноя 2013

Стой стой, тебе же под категории нужны, тогда просто к .inline_list li {
добавь:

float: left;

Константин Дубровский · 18 Ноя 2013

так пока product_list не трогаю. надо пока разобраться с category.css

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 · 1 Дек 2013

/*** 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 · 4 Дек 2013

Здравствуйте!
Есть решение? Тоже задаюсь тем же вопросом..
Можно их вообще убрать?

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

Константин Дубровский

Постоялец

WinsanT

Писатель

trusted

Постоялец

Константин Дубровский

Постоялец

kabasik

Полиционер

Константин Дубровский

Постоялец

kabasik

Полиционер

Константин Дубровский

Постоялец

albwibowo

Создатель

Magikson

Создатель