Изменить вид отображения

Тема в разделе "Верстка", создана пользователем Porsche71, 24 сен 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Porsche71

    Porsche71 Постоялец

    Регистр.:
    23 май 2010
    Сообщения:
    81
    Симпатии:
    28
    Здравствуйте. Помогите, пожалуйста, изменить вид отображения подкатегорий для opencart'а.
    Они имеют вот такой вид сейчас:
    [​IMG]
    А хотелось бы, чтоб эти закругленные рамки с текстом выводились по принципу:
    • Текст3
    • Текст4
    • Текст5
    Код файла category.tpl
    Код:
    <div class="category-list">
        <?php if (count($categories) <= 1) { ?>
        <ul>
          <?php foreach ($categories as $category) { ?>
          <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
          <?php } ?>
        </ul>
        <?php } else { ?>
        <?php for ($i = 0; $i < count($categories);) { ?>
        <ul>
          <?php $j = $i + ceil(count($categories) / 4); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($categories[$i])) { ?>
          <li><a href="<?php echo $categories[$i]['href']; ?>"><?php echo $categories[$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        <p></ul>
        <?php } ?>
        <?php } ?>
      </div>
    Код css:
    Код:
    /* category */
    .category-info {overflow: auto;margin-bottom: 20px;padding: 15px;color:#fff;background: #20252b url('../image/patterns/pattern_20.png') repeat;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.20);-webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.20);-moz-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.20);}
    .category-info p {margin:0;}
    .category-info .image {float: left;margin-right: 15px;padding:0;height:80px}
    .category-list {overflow: auto;margin-bottom: 20px;padding:0}
    .category-list ul {float: left;list-style:none;padding:0;margin:0}
    .category-list ul li {margin:0 5px 5px 0;float:left;text-align:center}
    .category-list ul li a{position:relative;text-decoration:none;border:2px #eee solid;font-weight:bold;overflow:hidden;background:#fff;padding:7px 7px 6px 7px;display:block;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
    .category-list ul li a:hover{color:#232323;border:2px #222 solid;}
     
    Последнее редактирование: 24 сен 2013
  2. Arcvi

    Arcvi Постоялец

    Регистр.:
    10 май 2013
    Сообщения:
    74
    Симпатии:
    33
    картинка не грузится. может надо убрать list-style:none; ?
     
  3. Porsche71

    Porsche71 Постоялец

    Регистр.:
    23 май 2010
    Сообщения:
    81
    Симпатии:
    28
    Перезелил картинку. Убрать не помогло(
     
  4. Genk0

    Genk0

    Регистр.:
    2 июн 2010
    Сообщения:
    10
    Симпатии:
    12
    float:left; :facepalm:
     
    Porsche71 нравится это.
  5. asusdemo

    asusdemo Создатель

    Регистр.:
    27 фев 2013
    Сообщения:
    48
    Симпатии:
    9
    Так добавьте к стилям display:block; Тогда будет у вас вывод не по горизонтали, а по вертикали!