hi, im kinda new to this. im just working on my first site and are having some problems making a horizontal panel of buttons for the top of my site using css rules eg a:hover , etc .

 

i have set my links into a <ul>. the problem i am getting is that i would like the whole of the button's background to change when the mouse is over the button, also have all of the button be clickable instead of just the text inside it.

 

so far i have managed to get the text colour and the background just behind the text to change colour, and can only get it in a vertical men bar.

 

thanks in advance

 

dave

changing the elements within the ul to display:inline should make it horizontal

to make the overall background change you need to add something like this to the css

 

a:hover ul.myclassname{

background-color:red;

}

 

this only works if you give the holding ul a class of myclassname or whatever you prefer - what this is saying is when you hover over an A, make any UL with a classname of myclassname, have background color of red

does that make any sense?

changing the elements within the ul to display:inline should make it horizontal

to make the overall background change you need to add something like this to the css

 

a:hover ul.myclassname{

background-color:red;

}

 

this only works if you give the holding ul a class of myclassname or whatever you prefer - what this is saying is when you hover over an A, make any UL with a classname of myclassname, have background color of red

does that make any sense?

 

yeah i think so, am at work so can only print this out and try it when i get home

 

the only other way os to just make it a rollover which i was trying not to do, but hey, if i have to i have to

 

ta for the reply

the only other way os to just make it a rollover which i was trying not to do, but hey, if i have to i have to

There is another way, but it's probably not as good practice as Womble's suggestion.

You can add padding to the <li> elements in your css eg:

a:hover li.myclassname {
padding:5px 10px;
}

This will make the background area appear larger around the text.

There is another way, but it's probably not as good practice as Womble's suggestion.

You can add padding to the <li> elements in your css eg:

a:hover li.myclassname {
padding:5px 10px;
}

This will make the background area appear larger around the text.

 

ok thanks, prob not best practice as you say , but maybe could do something with it.

ta for your reply