|
|
Posted by Els on 09/15/05 13:05
Martin Mr wrote:
> Hello Group,
>
> I found myself in the Internet a nice CSS code to have a
> mouseover menu with text in the buttons.
>
> Thus the following third, differently styled link ("back") is not supposed
> to be affected by that CSS style, but the background image (and mouseover)
> keeps
>
> on appearing also behind that "back" link. How can I avoid this?
> Is there a way to restrict CSS to the two links? Or is there a
> way to "isolite" the formatting of the third link from the CSS style?
> Any hints?
Yup.
Just give the back link a different class.
Altered code below:
<style type="text/css">
a {
display:block;
height:1em;
width:180px;
padding:4px;
color:#000000;
font-size:100%;
font-family:Verdana, Arial, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
margin:20px;
background-image:url(Balken.gif);
}
a.back{
display:auto;
width:auto;
padding:auto;
color:#cc0000;
font-size:85%;
font-family:Trebuchet MS,Arial,Helvetica;
font-weight:normal;
text-decoration:underline;
text-align:left; /* or right */
margin:auto;
background-image:none;
}
a:hover {
background-image:url(Balken_over.gif);
}
a.back:hover{
background-image:none;
}
</style>
<p style="margin-left: 120">
<a href="file1.html">menu this</a>
<a href="file2.html">menu that</a>
</p>
<a href="index.html">back</a>
However, in general it's much easier to look at a container around the
links that are to be displayed a certain way. In this particular case,
the menu links are in a <p> element, which you could give a class, say
<p class="navigation">.
In which case, the styles could be written much shorter:
p.navigation a {
display:block;
height:1em;
width:180px;
padding:4px;
color:#000000;
font-size:100%;
font-family:Verdana, Arial, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
margin:20px;
background-image:url(Balken.gif);
}
p.navigation a:hover{
background-image:url(Balken_over.gif);
}
That way only the links in that particular <p> element will take on
that styling. Any other links will just act like they normally would.
Btw - looks like you'd better use:
<ul id="navigation">
<ul>
<li><a href="file1.html">menu this</a></li>
<li><a href="file2.html">menu that</a></li>
<ul>
It is after all a list of links, not a paragraph :-)
--
Els http://locusoptimus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Guns N' Roses - Yesterdays
Navigation:
[Reply to this message]
|