My CSS skills are not very great so I am turning to you guys, hopefully someone can help me out. You can see the results in the image I have attached and below is the relevant CSS / HTML. I can post the full CSS / HTML if needed as well.
Code: Select all
#navigation
{
float: left;
width: 7%;
}
/** ...... **/
/*
Primary navigation
*/
#navigation ul
{
list-style-type: none;
}
#navigation ul li
{
position: relative;
width: 85px;
padding: 0px 0px 5px 0px;
}
#navigation ul li img
{
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
.caption
{
position: absolute;
top: 69px;
width: 100%;
text-align: center;
font-weight: bold;
float: left;
}
Code: Select all
<div id="navigation">
<ul>
<li>
<?php echo $this->mainNav('/', 'navHome', 'Home') ?>
</li>
<li>
<?php echo $this->mainNav('/invoices/', 'navInvoices', 'Invoices') ?>
</li>
<li>
<?php echo $this->mainNav('/companies/', 'navClients', 'Companies') ?>
</li>
<li>
<?php echo $this->mainNav('/products/', 'navProducts', 'Products') ?>
</li>
<li>
<?php echo $this->mainNav('/settings/', 'navSettings', 'Settings') ?>
</li>
<li>
<?php echo $this->mainNav('/users/', 'navUsers', 'Users') ?>
</li>
<li>
<?php echo $this->mainNav('/domains/', 'navDomains', 'Domains') ?>
</li>
</ul>
<div>