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.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/index.html">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/p1.html">Page 1</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/p2.html">Page 2</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/p3.html">Page 3</a>
</div></div>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=http://www.webdeveloper.com/forum/archive/index.php/"#" class="selected">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"menutest2.html">Example</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/p2.html">Page 2</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"menutest.html">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="selected">Page 1</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/p2.html">Page 2</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/p3.html">Page 3</a>
</div>
</div>
</body>
</html>
Hope that helps,
ElThat 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.
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.
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.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?
ElIts 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?
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.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/index.html">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/p1.html">Page 1</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/p2.html">Page 2</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/p3.html">Page 3</a>
</div></div>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=http://www.webdeveloper.com/forum/archive/index.php/"#" class="selected">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"menutest2.html">Example</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/p2.html">Page 2</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"menutest.html">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="selected">Page 1</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/p2.html">Page 2</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.kevey.com/p3.html">Page 3</a>
</div>
</div>
</body>
</html>
Hope that helps,
ElThat 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.
That is exactly what I had in mind...THANK-YOU! I don't know why I can'tsee 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.
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.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?
ElIts 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?