Сделать каталог в HTML

Все привет! Хочу на главной сделать каталог с категориями и подкатегориями. Сначала хотела попробовать модулем это сделать, но мне нужно именно по своему - не все подкатегории, да и по красивше все сделать) Вполне подошел бы следующий вариант - создать html блок, внутри его сделать таблицу ну и т.д. Но тут же возникает проблема с адаптивностью - в мобильной версии все приобретает жуткий вид.
Вот у меня собственно вопрос, какое тут есть решение?

 

Проблем не должно быть, если верстать согласно правилам Bootstrap
Покажите, насколько все жутко?

 

Здравствуйте, показать не смогу, сайт еще не в сети, мучаю его на домашнем компьютере. А не подскажите как вообще правильно делать или где почитать? Я вот делала следующим образом: создала HTML блок через встроенный модуль. Там в редакторе сделала таблицу, вставила картинки и сделала ссылки на категории. Начинаю увеличивать масштаб и тут же картинки наезжают друг на друга Я конечно еще тот чайник, но я хочу научиться..

 

Когда вы делаете пункты меню с иконками, по стандартам это делают через список.
Ссылку можно сделать блоком или инлайн-блоков, как вы заметили у ссылки есть в левой части большой отступ, он и служит для backround.
Возьмите все ваши иконки запихните в одну прозрачную картинку, подгоните им одинаковый размер в итоге вы получите спрайт.
Один запрос, несколько картинок, свойством background-position вы будите управлять позициями всех картинок, а background-size размером. Прежде чем впихивать все, по экспериментируйте!

HTML:

    <ul>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
    </ul>

Код:

a {display:inline-block;padding:10px 10px 10px 30px;}

 

Спасибоо))) Это все через стандартный html модуль делается? или как-то по другому? Стили нужно же в css прописывать отдельно?
Мне вот как хотелось: 6 ячеек, вверху каждой ячейки картинка, а под ней список ссылок с названием категорий)
А в мобильной версии все эти ячейки должны идти друг под другом))

 

Это все лучше делать в отдельном html документе. А потом только переносить DOM дерево в HTML модуль.
Я примерно понял что вы хотите, но попробуйте все же нарисовать в Photoshope или даже лучше для вас в Fireworks, а потом покажите как хотите.

 

Спасибо Вам большое за помощь, в идеале я хочу, чтобы было вот так как на картинке)

 

Вот вам пример
Копируете все это к себе в тестовый документ, не забывая подключить bootstrap.min.css
В OpenCart он используется.
Вам нужно изучать Bootstrap

 

Ухты))) Здорово)) Спасибо большое) Буду разбираться!