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

Тема в разделе "PrestaShop", создана пользователем Константин Дубровский, 6 ноя 2013.

Информация :
Хочешь в разделе без проблем общаться - прочти правила, чтобы потом с форумом на время не прощаться. Читать обязательно!
Внимание! Читайте внимательно правила!Предупреждения выдаются без всяких вопросов. Нарушил - получил. Будьте Внимательнее! Постинг нескольких постов подряд приравнивается к НАРУШЕНИЮ! Будьте вежливы и соблюдайте правила ;-)
Модераторы: ZiX
  1. Константин Дубровский

    Константин Дубровский Постоялец

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

    WinsanT Писатель

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

    trusted Постоялец

    Регистр.:
    13 июн 2012
    Сообщения:
    55
    Симпатии:
    19
    Задаёшь wight and hight, а потом через float делаешь элементы плавающими. Все можно сделать и в html, и в css.
     
  4. Константин Дубровский

    Константин Дубровский Постоялец

    Регистр.:
    6 июн 2013
    Сообщения:
    103
    Симпатии:
    2
    вот магазин. progips.com.ua
    к сожалению не силен в стилях и т.д. могу выполнить инструкции.
    может у кого есть модуль для этого?
    мне товарищ говорит, что где-то видел модуль, где одновременно меняется и категории и товары на горизонтальный вывод.
     
  5. kabasik

    kabasik Полиционер

    Регистр.:
    15 мар 2012
    Сообщения:
    223
    Симпатии:
    68
    Модуль был но он вроде для 1.4
    А вообще добавляешь в product-list.css
    Код:
    product_list li {
    float: left;
    width: 150px;
    и подгоняешь в product-list.tpl название и картинку под блок как нужно. Не забудь сделать Бэк-ап
     
  6. Константин Дубровский

    Константин Дубровский Постоялец

    Регистр.:
    6 июн 2013
    Сообщения:
    103
    Симпатии:
    2
    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}

    Не могу понять где вставлять конкретно.
    Пока не понял как подгонять картинку и текст.
     
  7. kabasik

    kabasik Полиционер

    Регистр.:
    15 мар 2012
    Сообщения:
    223
    Симпатии:
    68
    Стой стой, тебе же под категории нужны, тогда просто к .inline_list li {
    добавь:

    1. float: left;
     
  8. Константин Дубровский

    Константин Дубровский Постоялец

    Регистр.:
    6 июн 2013
    Сообщения:
    103
    Симпатии:
    2
    так пока product_list не трогаю. надо пока разобраться с category.css
    скан_подкатегории_горизонтально.jpg
    подскажите, кто делал. или если видели, дайте ссылку на сайт, где уже установлено такое расположение.
    Заранее благодарен. Очень много места занимают эти подкатегории. это первое, что нужно сделать. очень плохо, что надо пролистывать, прежде, чем увидеть товары
     
  9. albwibowo

    albwibowo Создатель

    Регистр.:
    6 июл 2007
    Сообщения:
    13
    Симпатии:
    1
    /*** 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;
    }
     
  10. Magikson

    Magikson Создатель

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