
Originally Posted by
Glamorousshoe
I have an issue with the way the categories are displayed in the center colum. The CSS included with the mod is correct but I can't get the output on the site to match the CSS.
I have the link manager configured to display 3 categories per row. But the output on the site is one column I even added 4 categories and still get only one column. I am not using the original css so I have changed some of the classes to match my templete but I didn't do anything to the module files so It should work fine. I integrated the stylesheets with my original Stylesheet.
Please let me know if there is a fix for that before I continue implementing the classes of my templete in this mod's templete.
a link of the page is
www.coolcarpartsonline.com/links.html
This is the code with the correct classes which will give you the three across display:
This is the css for this display:
Code:
.linkstext{padding: 10px 0;float:left;width:33%;text-align:center;font-size:1em;}
Code:
<h1>Links</h1>
<div class="linkstext"><a href="http://www.mysticmountainnaturals.com/demotest/index.php?main_page=links&lPath=6">
<img src="images/link_category/bath_beauty.png" alt="Bath and Beauty" title=" Bath and Beauty " width="80" height="80" /><br />Bath and Beauty</a></div>
<div class="linkstext"><a href="http://www.mysticmountainnaturals.com/demotest/index.php?main_page=links&lPath=8">
<img src="images/link_category/candles.png" alt="Candles" title=" Candles " width="80" height="80" /><br />Candles</a></div>
<div class="linkstext"><a href="http://www.mysticmountainnaturals.com/demotest/index.php?main_page=links&lPath=10">
<img src="images/link_category/computers.png" alt="Computers, Electronics, Gadgets" title=" Computers, Electronics, Gadgets " width="80" height="80" /><br />Computers, Electronics, Gadgets</a></div>
Your display is as follows:
If you are going to use this <div class="content"> you will have to define the content class in the stylesheet so that it will out put the proper display:
.content{padding: 10px 0;float:left;width:33%;text-align:center;font-size:1em;}
However doing this will have an effect on other pages which use the content class for display.
My recommendation would be to use the class="linkstext" instead of the class="content"
Code:
<h1>Links</h1>
<div class="content"><a href="http://www.coolcarpartsonline.com/index.php?main_page=links&lPath=1">
<img src="images/link_category/Automotive_Category_image.bmp" alt="Automotive" title=" Automotive " width="80" height="60" /><br /><div class="linkboxcontent">Automotive</div></a></div>
<div class="content"><a href="http://www.coolcarpartsonline.com/index.php?main_page=links&lPath=2">
<img src="images/pixel_trans.gif" alt="Business" title=" Business " width="1" height="1" /><br /><div class="linkboxcontent">Business</div></a></div>
<div class="content"><a href="http://www.coolcarpartsonline.com/index.php?main_page=links&lPath=3">
<img src="images/pixel_trans.gif" alt="Test" title=" Test " width="1" height="1" /><br /><div class="linkboxcontent">Test</div></a></div>
Bookmarks