Loading ...
Sorry, an error occurred while loading the content.
 

Re: [NH] Stylesheet problems again

Expand Messages
  • Don Passenger
    there is you use classes (these examples are from my HTML days -- meaning caps for tags etc. -- feel free to xhtml it :-) I quick grabbed this, but it works:
    Message 1 of 7 , Jul 21, 2003
      there is
      you use classes (these examples are from my HTML days -- meaning caps for
      tags etc. -- feel free to xhtml it :-)

      I quick grabbed this, but it works:
      <STYLE TYPE="text/css">
      <!--
      A.whitelink {color:#ffffff; font-weight:bold}
      A:visited {color:#ff0000; text-decoration:underline;}
      A:hover {color:#ff0000;}
      A.bluelink {color:#0000ff; font-weight:bold}
      A:visited {color:#ff0000; text-decoration:underline;}
      A:hover {color:#ff0000;}
      -->
      </STYLE>



      However, this is a perfect example of what not to do as bluelink if I
      decided to change color would then be misnamed everywhere. It would be
      better to call it something else. Perhaps a.menu or whatever.

      Your link then looks like this:
      <A HREF="default.asp" class="whitelink">Terminal</A>

      They must go in this order:
      a:link {color:red}
      a:visited {color:yellow}
      a:hover {color:green}
      a:active {color:blue}

      --

      Don Passenger

      If you need an html fix visit
      http://www.htmlfixit.com

      html/perl/php/xhtml/javascript presented
      in easy tutorials with live help and forums
      to fix your problems
      ----- Original Message -----
      From: "lloyd2" <lloyd2@...>
      To: <ntb-html@yahoogroups.com>
      Sent: Monday, July 21, 2003 9:30 PM
      Subject: [NH] Stylesheet problems again


      > Hi All,
      >
      > I am working with a linked stylesheet. I want to change the color of
      > "link", "visited", and "active". I can change the colors but my problem
      > comes that I want to change it on some pages and not on others.
      >
      > There must be a way.
      >
      > Lloyd
    • lloyd2
      Hi Don, Thank you BUT.......... Tried. I can use classes for link and hover but active and visited dosen t like it. I can put: a:active{ color: #66ff33; }
      Message 2 of 7 , Jul 22, 2003
        Hi Don,

        Thank you BUT..........

        Tried. I can use classes for link and hover but active and visited dosen't
        like it.

        I can put:
        a:active{ color: #66ff33; }
        a:link{ color: #00ffff; }
        a:visited{ color: #ffffcc; }
        a:hover{ color: #ff0000; }
        In my "linked" stylesheet and it works but what I am trying to get is one
        for light backgrounds and one for dark backgrounds. So far I can get one
        but not the other.

        Lloyd
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        >there is
        >you use classes (these examples are from my HTML days -- meaning caps for
        >tags etc. -- feel free to xhtml it :-)
      • loro
        ... That s not classes. That s pseudo-classes. :-) To use classes you would go: a.classname1:link a.classname2:link and so on. You have the order wrong. That s
        Message 3 of 7 , Jul 22, 2003
          >Tried. I can use classes for link and hover but active and visited dosen't
          >like it.
          >
          >I can put:
          >a:active{ color: #66ff33; }
          >a:link{ color: #00ffff; }
          >a:visited{ color: #ffffcc; }
          >a:hover{ color: #ff0000; }
          >In my "linked" stylesheet and it works but what I am trying to get is one
          >for light backgrounds and one for dark backgrounds. So far I can get one
          >but not the other.

          That's not classes. That's pseudo-classes. :-)
          To use classes you would go:

          a.classname1:link
          a.classname2:link

          and so on.

          You have the order wrong. That's why some of them don't work. See here:
          <http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes>

          'link' and 'visited' are mutually exclusive but not the others. Think about
          it like this. A link can be both a link (obviously) and hovered or active
          _at_the_same_time_. Which wins? The last declared! Same with 'visited'.

          link
          visited
          hover
          active

          Lotta
        • lloyd2
          Hi Lotta, Ok. I tried this in the stylesheet: a:link{ color: 00ffff; } a:visited{ color: #ffffcc; } a:hover{ color: #ff0000; } a:active{ color: #66ff33; } and
          Message 4 of 7 , Jul 22, 2003
            Hi Lotta,

            Ok. I tried this in the stylesheet:
            a:link{ color: 00ffff; }
            a:visited{ color: #ffffcc; }
            a:hover{ color: #ff0000; }
            a:active{ color: #66ff33; }

            and this in the HTML:

            <LI><h2 class="first"><a href="words.htm">Conversions / Glossary</a></h2>
            <LI><h2 class="first"><a HREF="fam.htm">Family</A></h2>
            <LI><h2 class="first"><A HREF="rec.htm" TARGET="_top">Recipes<IMG
            SRC="./image/new.gif" WIDTH=20 HIGHT=10 BORDER="0" ALIGN=TOP></a></h2>
            <LI><h2 class="first"><A HREF="bbq.htm">Barbecue (Smoking)</A></h2>
            <br>
            <br>
            <a href="jm.html" TARGET="WINDOW-1">In Memory of Jassmine</a>
            <br><br>

            I got the colors I wanted.

            Then I tried this in the stylesheet:
            a.external :link{ color: 00ffff; }
            a.external :visited{ color: #ffffcc; }
            a.external :hover{ color: #ff0000; }
            a.external :active{ color: #66ff33; }

            and this in the HTML:
            <LI><a class="external" href="words.htm">Conversions / Glossary</a>
            <LI><a class="external" href="fam.htm">Family</A>
            <LI><a class="external" href="rec.htm" TARGET="_top">Recipes<IMG
            SRC="./image/new.gif" WIDTH=20 HIGHT=10 BORDER="0" ALIGN=TOP></a>
            <LI><a class="external" href="bbq.htm">Barbecue (Smoking)</A>
            <br>
            <br>
            <a class="external" href="jm.html" TARGET="WINDOW-1">In Memory of Jassmine</a>
            <br><br>

            It reverts back to the colors if not mentioned in the stylesheet.

            I read what you posted and the page you listed. Why wont it work?

            Lloyd
            ~~~~~~~~~~~~~~~~~~~~~~~~~~

            >You have the order wrong. That's why some of them don't work. See here:
            ><http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes>
            >
            >'link' and 'visited' are mutually exclusive but not the others. Think about
            >it like this. A link can be both a link (obviously) and hovered or active
            >_at_the_same_time_. Which wins? The last declared! Same with 'visited'.
            >
            >link
            >visited
            >hover
            >active
            >
            >Lotta
          • loro
            ... Because of the little spaces you ve fiddled in there. Between the classes and the pseudo-classes. You have also forgotten the hash sign before the hexcolor
            Message 5 of 7 , Jul 22, 2003
              >Then I tried this in the stylesheet:
              >a.external :link{ color: 00ffff; }
              >a.external :visited{ color: #ffffcc; }
              >a.external :hover{ color: #ff0000; }
              >a.external :active{ color: #66ff33; }

              >I read what you posted and the page you listed. Why wont it work?

              Because of the little spaces you've fiddled in there. Between the classes
              and the pseudo-classes. You have also forgotten the hash sign before the
              hexcolor in the first rule. That's it! Fix that and it'll work. :-)

              a.external:link <-- No spaces anywhere

              Neither of the validators would have told you about the space because you
              actually managed to construct a pretty advanced contextual selector
              (descendant selector is the correct term I think). Only problem is that it
              doesn't match anything in your HTML.

              Just a note, watch out with case for class names and IDs. Should be the
              same in the HTML and the CSS. Keeping to lower case all over is actually a
              very good idea.
              <http://devedge.netscape.com/viewsource/2001/css-class-id/>

              Now - get those links colored!

              Lotta
            • lloyd2
              Hi Lotta, All that trouble for nothing. A blank space is nothing isn t it. Groan...................... It works now. Thank you. On my testing sheet, sometimes
              Message 6 of 7 , Jul 22, 2003
                Hi Lotta,

                All that trouble for nothing. A blank space is nothing isn't it.
                Groan......................

                It works now. Thank you. On my testing sheet, sometimes I had the problem
                and then other times it would work for a few minutes. Now it is great.

                Thanks again.

                Lloyd
                ~~~~~~~~~~~~~~~~~~~~~~~~~
                >Because of the little spaces you've fiddled in there. Between the classes
                >and the pseudo-classes. You have also forgotten the hash sign before the
                >hexcolor in the first rule. That's it! Fix that and it'll work. :-)
                >
                >Lotta
              • loro
                ... No, not for nothing! Now you know that spaces matter in selectors and you have touched on more powerful selectors - even if unknowingly. :-) Lotta
                Message 7 of 7 , Jul 22, 2003
                  lloyd2 wrote:
                  >All that trouble for nothing. A blank space is nothing isn't it.
                  >Groan......................

                  No, not for nothing! Now you know that spaces matter in selectors and you have touched on more powerful selectors - even if unknowingly. :-)

                  Lotta
                Your message has been successfully submitted and would be delivered to recipients shortly.