Jump to content
  • Checkout
  • Login
  • Get in touch


The e-commerce.

Catogories List [CSS Buttons Needed]


Recommended Posts

Hey guys,


I?m relatively new to OSC and would like some advice/help on creating some CSS buttons in my Categories Navigation.


I have made up a image of how I?d like to the buttons to function:




It's a simple idea ideally, on rollover the background would change to white with pink text.


To be used here: www.peasorbeans.co.uk/catalog



Any help on how to achieve this would be much appreciated.




Link to comment
Share on other sites

OK thanks I will check out the contribute section and keep you updated.


Is there anyone which could recommend a contribution for me to use to achieve the above menu, I htink Im having a little bad luck and have managed to choose the worse of the bunch.



Link to comment
Share on other sites

I see you have the buttons installed, there should be a mouseover or rollover code that you can add to highlight it when your holding the pointer over it.


I have the buttons kinda installed, they are not quite right yet but im a little closer to my goal. I still have two issues:


1: Where do I place the code for the rollover? Is this apart of the CSS file for the buttons?

2: Ive fiddled with the CSS file for some time and I cannot remove the gap around the outsides of my buttons, is this in the <table> HTML or is there something im missing in the CSS.


Heres the CSS code that the contribution gave me:


/* Menu Ctegories */
ul.catmenu {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 0px solid #FFF;

ul.catmenu li.catmenu {
position: relative;

li.catmenu ul.catmenu {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;

/* Styles for Menu Items */
ul.catmenu li.catmenu a {
display: block;
text-decoration: none;
color: #FFF;
background: #FFCCCC; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li.catmenu:hover ul.catmenu, li.catmenu.over ul.catmenu { display: block; } /* The magic */

body { 
font: normal 11px verdana; behavior:url("csshover.htc");

li.catmenu:hover ul.catmenu ul.catmenu, li.catmenu.over ul.catmenu ul.catmenu {display: none;} /* ????? ?? ??????? 3-?? ?஢?? */ 
ul.catmenu ul.catmenu li.catmenu:hover ul.catmenu, ul.catmenu ul.catmenu li.catmenu.over ul.catmenu {display: block;} /* ??? ? ?? ??????? 3-?? ?஢?? */

/* Menu Ctegories */



Thanks in advance.

Link to comment
Share on other sites

I've found a solution to the cell padding issue, change (in stylesheet.css):


.boxText {font-family: Verdana, Arial, sans-serif; font-size: 10px;}




.boxText {font-family: Verdana, Arial, sans-serif; font-size: 10px; padding: 0px;}

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Create New...