How restricting CSS-style?

[Els]

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

 

[Martin Möller]

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?

Martin



This is the code:

<style type="text/css">
<!--
a {
display:block;
height:10px;
width:180px;

padding:4px;
font-size:14px;
font-family:Verdana, Arial, sans-serif;

font-weight:bold;
text-decoration:none;
text-align:center;
margin:20px;

background-image:url(Balken.gif);
}
a:hover {
display:block;

background-image:url(Balken_over.gif);
}
-->
</style>
<p style="margin-left: 120">
<a href="file1.html"><font color="#000000">menu this</font></a>
<a href="file2.html"><font color="#000000">menu that</font></a>

</p>

<a href="index.html"><font style="FONT-SIZE:12pt" font face="Trebuchet
MS,Arial,Helvetica" color="#cc0000">back</font></a>

 

[Els]

Hello Els,

Hi Martin - please don't toppost? Most of us read from top to bottom
instead from the bottom up

thank you very much for the quick answer!!

The p.navigation did the job

Thus I had to keep the <p>-tag to work with p.navigation instead
of changing it to the (maybe more logical) <ul>

No, just change p.navigation in the styles to ul.navigation.

 

[Martin Möller]

Hello Els,

thank you very much for the quick answer!!

The p.navigation did the job

Thus I had to keep the <p>-tag to work with p.navigation instead
of changing it to the (maybe more logical) <ul>

Martin

 

[Martin Möller]

Hi Martin - please don't toppost? Most of us read from top to bottom
instead from the bottom up


No, just change p.navigation in the styles to ul.navigation.

Hi Els,

okay, this way round.

Right, ul.navigation also works.
Still I had problems with the display of the block background-images, which
were
differently displayed in Mozilla and IE (cut off edges if the padding was
too little, duplication of the background-image
if the padding was too large, esp. in Mozilla, no compromise-padding to be
found).
My workaround was to give the background-images a nice transparent
extra-edge, so it looks good now in Mozilla and IE...

Thanks again
Martin