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

[Porsche71]

Здравствуйте. Помогите, пожалуйста, изменить вид отображения подкатегорий для opencart'а.
Они имеют вот такой вид сейчас:

А хотелось бы, чтоб эти закругленные рамки с текстом выводились по принципу:

• Текст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;}

 

[Arcvi]

Здравствуйте. Помогите, пожалуйста, изменить вид отображения подкатегорий для opencart'а.
Они имеют вот такой вид сейчас:

А хотелось бы, чтоб эти закругленные рамки с текстом выводились по принципу:

• Текст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;}

картинка не грузится. может надо убрать list-style:none; ?

 

[Porsche71]

картинка не грузится. может надо убрать list-style:none; ?

Перезелил картинку. Убрать не помогло(

 

[Genk0]

float:left;

 

[asusdemo]

Так добавьте к стилям display:block; Тогда будет у вас вывод не по горизонтали, а по вертикали!