Catogories List [CSS Buttons Needed]

[drone]

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.

 

 

Cheers

[ErollorD]

I can help you with that but I'm too busy with my projects. I suggest that you check contribution section for css menus and try to solve it. If not, PM me and we will solve it 100%....

[drone]

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

 

Cheers.

[drone]

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.

 

Cheers

[Gameprodigy]

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.

[drone]

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.

[drone]

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

 

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

 

to:

 

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

[drone]

Does anyone have any ideas on how to get the rollover working?