PDA

Click to See Complete Forum and Search --> : Choosing hover attribs for CSS menu

Kevey
10-23-2005, 05:54 AM
I have a menu with multiple links. I am trying to make each link on its respective page be displayed in its hover color and not be selectable (to show the person where they are). Any help appreciated!

Here's the CSS:

.buttonscontainer {width: 100px;float:left;}
.buttons a {color: #6699cc;
border: 1px solid;
background-color: #6699cc;
padding-top: 2px;
padding-bottom: 2px;padding-right: 1px;
padding-left: 10px;
font: 12px Arial, sans-serif;letter-spacing:2px;
font-weight: bold;
text-decoration: none;
border-color: #ffffff #ffffff #ffffff #cacaca;
display: block;
margin: 0px;
width: 100%;
text-align: left;color: #ffffff;}

.buttons a:hover {border: 1px solid;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 0px;
font: 12px Arial, sans-serif;letter-spacing:2px;
font-weight: bold;
background-color: #adc7e1;
border-color: #adc7e1 #adc7e1 #ffffff #adc7e1;
color: #000000;
text-decoration: none;}

and here is the html:

<div class="buttonscontainer">
<div class="buttons">
<a href="http://www.kevey.com/index.html">Home</a>
<a href="http://www.kevey.com/p1.html">Page 1</a>
<a href="http://www.kevey.com/p2.html">Page 2</a>
<a href="http://www.kevey.com/p3.html">Page 3</a>
</div></div>
LJK
10-23-2005, 11:37 AM
Hi -
Just create a class for links that are selected, then tweak the .html for each link that's to be affected:
- Pg. 1 -

<html>
<head>
<title>Menu test</title>
<style type="text/css">
.buttonscontainer {
width:100px; float:left;
font-family:"arial", "helvetica", sans-serif;
}
.buttons a {
color:#6699cc; border: 1px solid;
padding:2px 1px 2px 10px; letter-spacing:2px;
font-weight: bold; font-size:12px; text-decoration: none;
display: block; margin: 0 auto; width: 100%;
text-align: left;
}
.buttons a:link, .buttons a:visited{
color: #ffffff;
background-color: #6699cc; border-color: #ffffff #ffffff #ffffff #cacaca;
}
.buttons a:focus, .buttons a:hover{
background-color: #adc7e1;
border-color: #adc7e1 #adc7e1 #ffffff #adc7e1;
color: #000000;
}
.buttons a.selected{
color:black; background:#6699cc none;}
}
</style>
</head>
<body>
<div class="buttonscontainer">
<div class="buttons">
<a href="#" class="selected">Home</a>
<a href="menutest2.html">Example</a>
<a href="http://www.kevey.com/p2.html">Page 2</a>
<a href="http://www.kevey.com/p3.html">Page 3</a>
</div>
</div>
</body>
</html>

- Pg. 2 -

<html>
<head>
<title>Menu test 2</title>
<style type="text/css">
.buttonscontainer {
width:100px; float:left;
font-family:"arial", "helvetica", sans-serif;
}
.buttons a {
color:#6699cc; border: 1px solid;
padding:2px 1px 2px 10px; letter-spacing:2px;
font-weight: bold; font-size:12px; text-decoration: none;
display: block; margin: 0 auto; width: 100%;
text-align: left;
}
.buttons a:link, .buttons a:visited{
color: #ffffff;
background-color: #6699cc; border-color: #ffffff #ffffff #ffffff #cacaca;
}
.buttons a:focus, .buttons a:hover{
background-color: #adc7e1;
border-color: #adc7e1 #adc7e1 #ffffff #adc7e1;
color: #000000;
}
.buttons a.selected{
color:black; background:#6699cc none;}
}
</style>
</head>
<body>
<div class="buttonscontainer">
<div class="buttons">
<a href="menutest.html">Home</a>
<a href="#" class="selected">Page 1</a>
<a href="http://www.kevey.com/p2.html">Page 2</a>
<a href="http://www.kevey.com/p3.html">Page 3</a>
</div>
</div>
</body>
</html>


Hope that helps,
El
Kevey
10-24-2005, 01:04 AM
That is exactly what I had in mind...THANK-YOU! It always comes down a couple lines of code that make everything look good! I am glad you folks are here. :)
NogDog
10-24-2005, 01:06 AM
That is exactly what I had in mind...THANK-YOU! I don't know why I can't
see the effect in IE, but I do see it working in Firefox...very cool. Thanks again!
IE only supports the :hover pseudo-class for <a> elements. :(
Kevey
10-24-2005, 01:14 AM
I edited my last entry probably as you were reading it. I commented out the a:focus and hover code and it works like a champ in IE as far as I need it to...i was really skeptical about css a few weeks ago, but have since done a 180...very cool stuff.
LJK
10-24-2005, 05:20 PM
Hi -
I'm really glad that helped you & that you're willing to put more than a toe into using css for styles! Confused about the IE thing, though, as I thought the style was applied to the :hover pseudoclass -

.buttons a:focus, .buttons a:hover{
background-color: #adc7e1;
border-color: #adc7e1 #adc7e1 #ffffff #adc7e1;
color: #000000;
}


I tried it on IE 6._ for win and it was fine...what am I missing, here?

El
Kevey
10-25-2005, 12:50 AM
Its probably me missing something...I tried it in 6.x IE and it did not work...it did work in FF...so assumed it was an issue and removed it to see if I really needed it. I only used the following in CSS (your recommendation) and the buttons
change to the hover color and are not selectable on their respective pages...exactly what I was hoping for.

.buttons a.selected{
color:black; background:#6699cc none;}

Do I need the other code you provided?