Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How restricting CSS-style?

Reply
Thread Tools

How restricting CSS-style?

 
 
Els
Guest
Posts: n/a
 
      09-15-2005
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
 
Reply With Quote
 
 
 
 
Martin Mller
Guest
Posts: n/a
 
      09-15-2005
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>







 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      09-15-2005
Martin Mr wrote:

> 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.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Status Quo - Let's Work Together
 
Reply With Quote
 
Martin Mller
Guest
Posts: n/a
 
      09-15-2005
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

Els wrote:

>
> 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



 
Reply With Quote
 
Martin Mller
Guest
Posts: n/a
 
      09-16-2005
Els wrote:

> 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.


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



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
home network but restricting childrens access to the web =?Utf-8?B?YW5keSBi?= Wireless Networking 4 07-26-2005 12:31 PM
Restricting Bandwidth troughput per second? Paul Cisco 2 02-06-2004 03:09 PM
Complex policies for restricting users going to Internet jmarkotic Cisco 2 01-08-2004 09:33 PM
Restricting User access to Router with TACACS Freeware Frank Beider Cisco 3 10-20-2003 04:39 AM
Restricting access for PPTP users to specific protocols Rik Bain Cisco 1 10-18-2003 11:48 AM



Advertisments