How restricting CSS-style?

Discussion in 'HTML' started by Els, Sep 15, 2005.

  1. Els

    Els Guest

    Martin Míµ®í»¥r 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
     
    Els, Sep 15, 2005
    #1
    1. Advertising

  2. 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>
     
    Martin Möller, Sep 15, 2005
    #2
    1. Advertising

  3. Els

    Els Guest

    Martin Míµ®í»¥r 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
     
    Els, Sep 15, 2005
    #3
  4. 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 :)
     
    Martin Möller, Sep 15, 2005
    #4
  5. 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
     
    Martin Möller, Sep 16, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Craig Neuwirt

    Restricting Http for POSTS and SOAP

    Craig Neuwirt, Dec 10, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    434
    John Timney \(ASP.NET MVP\)
    Dec 10, 2003
  2. Andrew Banks

    Restricting access based on roles

    Andrew Banks, Feb 26, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    287
    Andrew Banks
    Feb 26, 2004
  3. Aaron Beall
    Replies:
    2
    Views:
    1,908
    Aaron Beall
    Sep 14, 2007
  4. Ken Varn
    Replies:
    0
    Views:
    532
    Ken Varn
    Apr 26, 2004
  5. Nik Coughlin
    Replies:
    2
    Views:
    198
    Nik Coughlin
    Jan 23, 2008
Loading...

Share This Page