annasilie: CSS-Bild anzeigen bei einem Link (hover)

Hallo,

da ich mein Problem mit google und Co. nicht lösen konnte, hoffe ich hier Hilfe zu finden. Ich möchte gern, dass wenn ich mit der Maus über einen Link fahre, dieser unterstrichen wird (ist es vorher nicht) und dass links von dem Wort ein Bild (Pfeil) angezeigt wird. Also das mit dem unterstreichen bekomme ich ja hin, aber wie mache ich das mit dem Bild?

Anna

  1. Tachchen!

    Genauso wie du das mit dem Unterstrich gemacht hast, bindest du jetzt
    für :hover das gewünschte Hintergrundbild ein. Eventuell musst du per
    padding-left erst noch ein wenig Platz dafür schaffen auf der linken Seite.

    Gruß

    Die schwarze Piste

    --
    ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
    http://www.smartbytes.de
    1. Genauso wie du das mit dem Unterstrich gemacht hast, bindest du jetzt
      für :hover das gewünschte Hintergrundbild ein.

      Ja, das dachte ich mir schon, aber wie lautet der Befehl :-). Da find ich irgendwie nix :-(.

      Anna

      1. Hi!

        Ja, das dachte ich mir schon, aber wie lautet der Befehl :-). Da find ich irgendwie nix :-(.

        background-image:url("xyz.de/xyz.png") ist dein Freund.

        Grüße,
        Fabian St.

        --
        Endlich online: http://fabis-site.net
        --> XHTML, CSS, PHP-Formmailer, Linux
        Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
        1. Hallo Fabian,

          Ja, das dachte ich mir schon, aber wie lautet der Befehl :-). Da find ich irgendwie nix :-(.

          background-image:url("xyz.de/xyz.png") ist dein Freund.

          Zusätzlich empfehle ich die Lektüre von https://forum.selfhtml.org/?t=89422&m=534447, danach ggf. eine Recherche im </archiv/>, was das Problem beim IE, Version < 6, angeht.

          Ich habe auf die Schnelle </archiv/2004/1/70096/#m403488> gefunden.

          Freundliche Grüsse,

          Vinzenz

          1. Hallo Fabian,

            Ja, das dachte ich mir schon, aber wie lautet der Befehl :-). Da find ich irgendwie nix :-(.

            background-image:url("xyz.de/xyz.png") ist dein Freund.

            Zusätzlich empfehle ich die Lektüre von https://forum.selfhtml.org/?t=89422&m=534447, danach ggf. eine Recherche im </archiv/>, was das Problem beim IE, Version < 6, angeht.

            Ich habe auf die Schnelle </archiv/2004/1/70096/#m403488> gefunden.

            Freundliche Grüsse,

            Vinzenz

            Hm, also es will irgendwie noch nicht. So hatte ich das auch schon probiert gehabt und es funktioniert nicht, deshalb dachte ich, es gibt noch nen anderen Befehl. Ich hab mal hier den Code:

            //css:
            a:hover {
             color: #FFFFFF;
             text-decoration: underline;
             background-image:url("Pfeil-weiss.gif");
            }
            .normalfettabstand30 {
             font-family: Verdana, Arial, Helvetica, sans-serif;
             font-size: 12px;
             color: #FFFFFF;
             font-weight: bold;
             padding-left:30px;
            }

            //Aufruf in Datei:
              <tr>
                <td height="21" style="background-image:url(Webdesign/button.gif); background-repeat:no-repeat;"><a href="home_neu.php" target="main" class="normalfettabstand30">Home</a></td>
              </tr>

            //habs auch so probiert:
              <tr>
                <td height="21" class="normalfettabstand30" style="background-image:url(Webdesign/button.gif); background-repeat:no-repeat;"><a href="home_neu.php" target="main">Home</a></td>
              </tr>

            Was mach ich falsch?

            Anna

            1. Hi,

              background-image:url("Pfeil-weiss.gif");

              probier mal, die Quotes wegzulassen - und no-repeat könnte auch nötig sein.

              .normalfettabstand30 {

              Und was, wenn Du Dich mal entscheidest, den Abstand auf 25px festzusetzen? Ich würde mir allgemeingültige Klassennamen ausdenken, z.B. menuelink.

              <td height="21" style="background-image:url(Webdesign/button.gif); background-repeat:no-repeat;">

              warum nutzt Du nicht auch hier CSS und lagerst auch den inline-Style aus?

              freundliche Grüße
              Ingo

              1. background-image:url("Pfeil-weiss.gif");
                probier mal, die Quotes wegzulassen - und no-repeat könnte auch nötig sein.

                Nein, das hat auch nicht geholfen.

                .normalfettabstand30 {
                Und was, wenn Du Dich mal entscheidest, den Abstand auf 25px festzusetzen? Ich würde mir allgemeingültige Klassennamen ausdenken, z.B. menuelink.

                Ja, da hst Du recht :)

                <td height="21" style="background-image:url(Webdesign/button.gif); background-repeat:no-repeat;">
                warum nutzt Du nicht auch hier CSS und lagerst auch den inline-Style aus?

                Das will ich gern machen, aber das hab ich auch nicht hinbekommen. Wenn ich in meiner css schreibe:

                .buttonhintergrund{
                 background-image:url(img/button_mitte.gif);
                 background-repeat:repeat-x;
                }

                und so einbinde:
                <td width="100" class="buttonhintergrund"><a href="content.php" target="main" class="normalfett" >Text</a></td>

                Da wird mein geünschter Hintergrund nicht angezeigt, aber wenn ichs per Hand wie oben reinschreibe dann gehts. Keine Ahnung wieso :(

                1. Hi,

                  <td height="21" style="background-image:url(Webdesign/button.gif); background-repeat:no-repeat;">

                  Wenn ich in meiner css schreibe:

                  .buttonhintergrund{
                   background-image:url(img/button_mitte.gif);
                   background-repeat:repeat-x;
                  }

                  und so einbinde:
                  <td width="100" class="buttonhintergrund"><a href="content.php" target="main" class="normalfett" >Text</a></td>

                  Da wird mein geünschter Hintergrund nicht angezeigt, aber wenn ichs per Hand wie oben reinschreibe dann gehts. Keine Ahnung wieso :(

                  vielleicht, weil Du hier eine ganz andere Grafik angibst?
                  Außerdem hast Du schon wieder ein HTML-Attribut verwendet, das Du im CSS angeben könntest;-)

                  Beides kombiniert wäre dann:
                  <td class="buttonhintergrund">
                  .buttonhintergrund {
                    background: white url(Webdesign/button.gif) no-repeat; */ für white eine passende Farbe nehmen */
                    width:100px; height:21px;
                  }

                  freundliche Grüße
                  Ingo