第一篇文章。
我有一个joomla网站，其中有一个名为eshop的网上商店组件 这个可以过滤类别的电子商店看起来像一个未输入的列表。
所以我制作了一个我希望它看起来像的Photoshop模型。现在，在你的帮助下，我可以完成这一部分。
然而，接下来是我该如何实现它呢？我应该使用rereplader，sourcerer组件还是应该直接进入管理布局的css文件。
你知道，这远远超出了我目前的技能，所以我真的需要帮助。
What it currently looks like my photoshop mockup
我在firefox中使用firebug来复制我认为的HTML语法，并开始在Dreamweaver中对其进行css样式，但是我被卡住了。
我目前的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.eshop-sub-categories-list ul {
width:736px;
list-style-type: none;
margin-bottom: 0px;
padding: 0px;
}
.eshop-sub-categories-list ul li {
display: inline-block;
background: #eeeeee;
margin-top:0px;
margin-right:7px;
margin-left:0px;
margin-bottom: 7px;
padding:0px;
line-height:41px;
}
.eshop-sub-categories-list .row-fluid a {
color: #292828;
text-decoration:none;
width:137px;
height:41px;
display: block;
text-align:center;
}
</style>
</head>
<body>
<div class="eshop-sub-categories-list"><div class="row-fluid">
<h4>Refine Search</h4>
<ul>
<li>
<h5>
<a href="/blomist/shop/band/satinband/3mm-satinband">
3mm Satinband </a>
</h5>
</li>
<li>
<h5>
<a href="/blomist/shop/band/satinband/6mm-satinband">
6mm satinband </a>
</h5>
</li>
<li>
<h5>
<a href="/blomist/shop/band/satinband/10mm-satinband">
10mm satinband </a>
</h5>
</li>
<li>
<h5>
<a href="/blomist/shop/band/satinband/12mm-satinband">
12mm satinband </a>
</h5>
</li>
<li>
<h5>
<a href="/blomist/shop/band/satinband/25mm-satinband">
25mm satinband </a>
</h5>
</li>
<li>
<h5>
<a href="/blomist/shop/band/satinband/30mm-satinband">
30mm satinband </a>
</h5>
</li>
<li>
<h5>
<a href="/blomist/shop/band/satinband/38mm-satinband">
38mm satinband </a>
</h5>
</li>
<li>
<h5>
<a href="/blomist/shop/band/satinband/50mm-satinband">
50mm satinband </a>
</h5>
</li>
<li>
<h5>
<a href="/blomist/shop/band/satinband/100mm-satinband">
100mm satinband </a>
</h5>
</li>
<li>
<h5>
<a href="/blomist/shop/band/satinband/150mm-satinband">
150mm satinband </a>
</h5>
</li>
</ul>
</div>
</body>
</html>