Elke: Text soll bei onmouseover unterstrichen sein

Hallihallo,

ich habe jetzt diverse Theads durchgelesen und gegooglet, aber ich bekomme es nicht hin... :-(

Mein Ziel: In einer Tabelle soll jeweils die gesamte Spalte unterstrichen (oder am besten unter- und überstrichen, also quasi eingekästelt) sein, wenn man mit der Maus darüber fährt.

Mein aktueller Versuch: http://www.abo-finden.de/test.html

Wer kann mir bitte sagen, was ich falsch mache?

Danke!
Elke

  1. Hello out there!

    Mein Ziel: In einer Tabelle soll jeweils die gesamte Spalte unterstrichen (oder am besten unter- und überstrichen, also quasi eingekästelt) sein, wenn man mit der Maus darüber fährt.

    Mein aktueller Versuch: http://www.abo-finden.de/test.html

    Wer kann mir bitte sagen, was ich falsch mache?

    • Du verlinkst nicht.

    • Du erwartest von einem Browser, dass er bei ungültigem HTML ('tr' als Kind von 'body') das Gewünschte tut.

    • Du erwartest vom IE, dass er ':hover' auf etwas anderes als Links anwendet.

    • 'underline overline', oder möchtest du nicht lieber 'border' für 'tr' setzen?

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
    1. Hello out there!

      Mein Ziel: In einer Tabelle soll jeweils die gesamte Spalte unterstrichen (oder am besten unter- und überstrichen, also quasi eingekästelt) sein, wenn man mit der Maus darüber fährt.

      Mein aktueller Versuch: http://www.abo-finden.de/test.html

      Wer kann mir bitte sagen, was ich falsch mache?

      • Du verlinkst nicht.

      Ok. :-D - neuer Versuch: http://www.abo-finden.de/test.html

      • Du erwartest von einem Browser, dass er bei ungültigem HTML ('tr' als Kind von 'body') das Gewünschte tut.

      Autsch! Manchmal sieht man das Naheliegendste nicht...

      • Du erwartest vom IE, dass er ':hover' auf etwas anderes als Links anwendet.

      Hab's gerade mit dem IE getestet. Und es geht. - Meinst Du, es gibt trotzdem ein Problem?

      • 'underline overline',

      Super! :-) Das funktioniert auch!

      oder möchtest du nicht lieber 'border' für 'tr' setzen?

      Ja, eigentlich wollte ich die Unterstreichung für die ganze tr, also Zeile.
      Ich glaube aber, border, also ein Rahmen, sähe blöd aus, weil links noch eine größtenteils leere Spalte ist. - Soll eigentlich auf diese Tabelle angewendet werden, und nur der Übersichtlichkeit dienen: http://www.abo-finden.de/Zeitschriften_Hits.html#abo - Farben habe ich ja schon genug d'rin, daher die Idee mit der Unter- und Überstreichung...

      Vielen Dank schon mal!
      Elke

      1. hallo,

        • Du erwartest vom IE, dass er ':hover' auf etwas anderes als Links anwendet.
        Hab's gerade mit dem IE getestet. Und es geht. - Meinst Du, es gibt trotzdem ein Problem?

        Selbstverständlich. Weil es erst der IE7 "kann", und so sehr weit ist der immer noch nicht verbreitet. Im IE6 hast du dein "hover"-Problem immer noch - und gibs mal zu: so besonders erfreulich sieht dein Effekt auch nicht aus.

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
        1. hallo,

          • Du erwartest vom IE, dass er ':hover' auf etwas anderes als Links anwendet.
          Hab's gerade mit dem IE getestet. Und es geht. - Meinst Du, es gibt trotzdem ein Problem?

          Selbstverständlich. Weil es erst der IE7 "kann", und so sehr weit ist der immer noch nicht verbreitet. Im IE6 hast du dein "hover"-Problem immer noch

          Achso. Bin halt selber nur mit FF unterwegs. - Naja, soll ja nur ein Zusatz-Effekt sein. Wäre zwar sehr schade, wenn ihn nicht alle sehen könnten, aber irgendwann werden die Leute doch auch mal updaten...

          und gibs mal zu: so besonders erfreulich sieht dein Effekt auch nicht aus.

          Doch, mit dem Aussehen bin ich eigentlich schon zufrieden, oder hast Du eine bessere Idee? - Es soll halt wirklich nur der Übersichtlichkeit dienen, damit man sich nicht in der Zeile vertut.

          ABER was ich gerade festgestellt habe: Das scheint gar nicht auf die ganze Zeile anzuwenden sein... :-(
          Ich dachte einfach, ich schreibe dann  <tr class="fliesstext"> - aber das funktioniert nicht?

          Mist. Wer noch Ideen hat...

          Elke

          1. Update (da mir die Sache keine Ruhe lies): Ich habe jetzt mal versuchsweise die Schriftstärke , -farbe und Hintergrundfarbe mit hover verändert:

            #tr:hover {
            background: #FFFF99;
            cursor: default;
            }
            #tr:hover {
            color: #0000FF;
            }
            #tr:hover {
            font-weight: bold;
            }
            </style>

            Allerdings geht das nur im FF und Opera mit dieser Tabelle (um die es hier geht): http://www.abo-finden.de/Zeitschriften_Hits.html#abo.

            Komischerweise funktioniert der Effekt (mit dem selben Code) bei dieser Tabelle auch im IE: http://www.abo-finden.de/zeitschriften-kostenlos.html

            Wenn der Effekt in der ersten Tabelle auch im (neueren) IE ginge, wäre ich schon zufrieden! :-)

            Gruß
            Elke

            1. Hi

              Naja, das mit der Schriftstärke (bold) find ich nicht so ein hit. Ist ein Eintrag sehr lang, ändert sich beim überfahren evtl die Spaltenbreite (siehe "TV Movie + tv world (Premiere)"). Und die Farben; zu farbig ist auch nicht gut. Beim überfahren leichtgelber hintergrund; gut, aber dann evtl eger gleich über die ganze zeile...
              Und statt der Spalter "Hier bestellen" könntest du evtl. gleich "Zeitschriften Titel" verlinken.

              Manchmal ist halt einfach "je weniger desto besser" ;)

              mfg

              1. Hallihallo!

                Ja, da hast Du in vielem Recht. - Danke für die konstruktive Kritik! :-)

                Naja, das mit der Schriftstärke (bold) find ich nicht so ein hit. Ist ein Eintrag sehr lang, ändert sich beim überfahren evtl die Spaltenbreite (siehe "TV Movie + tv world (Premiere)").

                Stimmt, werde ich wieder rückgängig machen.

                Und die Farben; zu farbig ist auch nicht gut. Beim überfahren leichtgelber hintergrund; gut, aber dann evtl eger gleich über die ganze zeile...

                Hätte ich auch lieber über die ganze Zeile. - Bekomme ich aber nicht hin, weil die hellgrauen Streifen mit css gemacht sind, die Farbe der linken und rechten Spalte noch "d'rübergeklatscht" ist.

                Und statt der Spalter "Hier bestellen" könntest du evtl. gleich "Zeitschriften Titel" verlinken.

                Das ist an sich eine super Idee, die mit gut gefällt. Nur eine Sache spricht dagegen: Ich möchte gerne auf den ersten Blick die ganz besonders günstigen Angebote mit fetter ROTER Schrift hervorheben. Aber im IE habe ich es nicht geschafft, einige Links manuell in einer anderen Farbe darzustellen, als für die ganze Seite eingestellt (also blau in meinem Falle).
                Daher habe ich auch um einige "Klick"-Links noch diese Sternchen gesetzt. Im FF ist "*Klick*" insgesamt rot, im IE nur die beiden Sternchen.
                Weiß nicht, ob das überhaupt geht (einige Links in anderer Farbe darstellen im IE?

                Manchmal ist halt einfach "je weniger desto besser" ;)

                Da gebe ich Dir völlig Recht. - Ich versuche den Spagat, möglichst viele wichtige Infos möglichst übersichtlich und auf einen Blick darzustellen. - Gar nicht so einfach. Vor allem sehe ich die Seite ja nicht mit Augen der Leute, die sie zum ersten mal sehen...

                Viele Grüße
                Elke

                1. Hallo noch mal!

                  Naja, das mit der Schriftstärke (bold) find ich nicht so ein hit. Ist ein Eintrag sehr lang, ändert sich beim überfahren evtl die Spaltenbreite (siehe "TV Movie + tv world (Premiere)").

                  Stimmt, werde ich wieder rückgängig machen.

                  Habe es jetzt einfach so gelöst, dass ich die Spalte mit den Titeln 5 px breiter gemacht habe.

                  Mein einziges Problem mit dieser Lösung ist jetzt noch, dass der onmouseover-Effekt in dieser Tabelle http://www.abo-finden.de/Zeitschriften_Hits.html#abo nicht im IE funktioniert, im Gegensatz zu dieser < http://www.abo-finden.de/zeitschriften-kostenlos.html>, wo er gut funktioniert.

                  Ich habe den Code aber von der einen Tabelle einfach nur in die zweite kopiert, habe also keine Ahnung, woran das liegen könnte...

                  Vielen Dank für weitere Ideen!

                  Elke

          2. Hello out there!

            ABER was ich gerade festgestellt habe: Das scheint gar nicht auf die ganze Zeile anzuwenden sein... :-(

            „In diesem Modell [mit trennenden Rahmen] hat jede Zelle einen eigenen Rahmen. […] Zeilen, Spalten, Zeilengruppen und Spaltengruppen können keine Rahmen haben (das heißt, Benutzerprogramme müssen die Rahmeneigenschaften für diese Elemente ignorieren).“ [CSS2 §17.6.1]

            Und doch, es ist anzuwenden:

            „Im Modell mit den zusammenfallenden Rahmen ist es möglich, Rahmen anzugeben, die einen Teil oder eine gesamte Zelle, Zeile, Zeilengruppe, Spalte und Spaltengruppe umrahmen.“ [CSS2 §17.6.2]

            Benutze das deinen Wünschen entsprechende Rahmenmodell. [CSS2 §17.6]

            Ich dachte einfach, ich schreibe dann  <tr class="fliesstext"> - aber das funktioniert nicht?

            Weil in CSS 2.1 (im Gegensatz zu 2.0) das Modell mit trennenden Rahmen Default ist. [CSS21 §17.6]

            See ya up the road,
            Gunnar

            --
            „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
            1. Hallihallo!

              Und doch, es ist anzuwenden:

              „Im Modell mit den zusammenfallenden Rahmen ist es möglich, Rahmen anzugeben, die einen Teil oder eine gesamte Zelle, Zeile, Zeilengruppe, Spalte und Spaltengruppe umrahmen.“ [CSS2 §17.6.2]

              Benutze das deinen Wünschen entsprechende Rahmenmodell. [CSS2 §17.6]

              Vielen Dank für die Links!
              Da werde ich mich mal heute Abend durcharbeiten. :-)

              Viele Grüße
              Elke

              PS: Das Goethe-Zitat ist klasse!