Gerhard: Anderer Hintergrund und Text bei hover

SELF-Forum

Anderer Hintergrund und Text bei hover

Gerhard
– Informationen zu den Bewertungsregeln

Hallo,
in dem Forum habe ich ein Beispiel gefunden, das ich etwas abgewandelt habe.
Zu diesem habe ich jetzt noch einige Fragen.
Wie erreiche ich, dass der "eine Text" und der "andere Text" jeweils zentriert sind und in der oberen Zeile beginnen?
Wie erreiche ich, dass der rote und (bei hover) der graue Block gleich groß sind?
Und nice to have: Bestimmt sind einige Teile überflüssig?
Gruß
Gerhard

Hier der Quelltext:

  
<html>  
<head>  
<style type="text/css">  
#bild1 {  
    position: absolute;  
    background: #DF0000 no-repeat;  
    width:28%;  
    border:0px;  
    overflow: auto;  
    z-index: 10; visibility: inherit;  
    text-align:center;  
}  
#bild1:hover {  
    display: block;  
    padding: 5px;  
    background: #DFDFDF no-repeat;  
}  
#bild1:hover .an {  
    visibility:hidden;  
}  
#bild1 .aus {  
    visibility:hidden;  
}  
#bild1:hover .aus {  
    visibility:visible;  
}  
</style  
</head>  
<body>  
    <div id="bild1">  
    <a href="......">  
    <span class="an"> der eine Text <br> test</span>  
    <span class="aus"> der andere Text <br> test</span>  
    </a>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Anderer Hintergrund und Text bei hover

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Wie erreiche ich, dass der "eine Text" und der "andere Text" jeweils zentriert sind und in der oberen Zeile beginnen?

    Indem du display statt visibility verwendest. Letzteres reserviert immer den Platz. Im Hinblick auf usability würde ich allerdings eine andere Version noch testen. Ausblenden ist nicht immer angesagt.

    Wie erreiche ich, dass der rote und (bei hover) der graue Block gleich groß sind?

    Indem du aufhörst, die Grösse mit padding bei :hover zu manipulieren.

    Und nice to have: Bestimmt sind einige Teile überflüssig?

    Du weisst es.
    Vorallem ergänze ein fehlendes </div>

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Anderer Hintergrund und Text bei hover

      trunx
      – Informationen zu den Bewertungsregeln

      Hallo,

      z.B.

      <html>  
<head>  
<style type="text/css">  
#bild1 {  
    position: absolute;  
    top: 42%;  
    left: 36%;  
    background: #DF0000 no-repeat;  
    width:28%;  
    height: 16%;  
    border:0px;  
    overflow: auto;  
    text-align:center;  
}  
#bild1:hover {  
    background: #DFDFDF no-repeat;  
}  
#bild1:hover .an {  
    display: none;  
}  
#bild1 .aus {  
    display: none;  
}  
#bild1:hover .aus {  
    display: block;  
}  
</style>  
</head>  
<body>  
    <a href="......" id="bild1">  
    <span class="an"> der eine Text <br> test</span>  
    <span class="aus"> der andere Text <br> test</span>  
    </a>  
</body>  
</html>

      bye trunx

      --
      Die Standard-Antwort: "Bitte benutze die Forum-Suche!" macht die Forum-Suche kaputt, weil die Suche dann nämlich genau vor allem diese dämliche Standard-Antwort, also Müll liefert. Sinnvoller ist stattdessen folgende Standard-Antwort: "Dieses Thema wurde schon vielfach im Forum besprochen, siehe z.B. <a>hier</a> oder <a>hier</a> oder benutze die Forum-Suche z.B. mit den Stichworten 'Stichwort1 Stichwort2'." Danke.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Anderer Hintergrund und Text bei hover

        Gerhard
        – Informationen zu den Bewertungsregeln

        Hallo,

        zuerst allen meinen Dank.
        Das Beispiel funktioniert.
        Jetzt wollte ich aber das gleiche mit Bildern machen und siehe da, es funktioniert - ausser beim Internet Explorer.
        Was muss ich ändern, damit es auch dort funktioniert, oder schafft es der IE überhaupt nicht?
        Hier mein Beispiel:

          
<html>  
<head>  
<style type="text/css">  
div#bild1                /* Grundeigenschaften (Anzeigeart, Größe) */  
 { width:   94px;        /*  Bildgröße  */  
 }  
  
div#bild1 .normal        /* Eigenschaften des "normal"-Textes */  
 { display: block;  
 }  
div#bild1:hover .normal  /* Eigenschaften des "normal"-Textes beim Hovern */  
 { display: none;  
 }  
div#bild1 .invers        /* Eigenschaften des "invers"-Textes */  
 { display: none;  
 }  
div#bild1:hover .invers  /* Eigenschaften des "invers"-Textes beim Hovern */  
 { display: block;  
 }  
</style>  
  
</head>  
<body>  
<div id="bild1">  
<span class="normal"><img src="img1.jpg" alt=""></span>  
<span class="invers"><img src="img2.jpg" alt=""></span>  
</div>  
</body>  
</html>

        Gruß
        Gerhard

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Anderer Hintergrund und Text bei hover

          Der Martin
          – Informationen zu den Bewertungsregeln

          Hi,

          Jetzt wollte ich aber das gleiche mit Bildern machen und siehe da, es funktioniert - ausser beim Internet Explorer.
          Was muss ich ändern, damit es auch dort funktioniert, oder schafft es der IE überhaupt nicht?

          der IE kann bis einschließlich Version 6 :hover *ausschließlich* auf Links anwenden, nicht auf andere Elemente. Ab Version 7 kann er es auch bei anderen Elementen, stellt sich allerdings im Quirks-Mode ebenso dumm an wie sein(e) Vorgänger.
          Für IE6 und älter geht's also nicht ohne Javascript, wenn kein Link im Spiel ist; ab IE7 okay, aber nur im Standards Compliant Mode.

          So long,
           Martin

          --
          Die letzten Worte des Neandertalers:
          Möchte doch zu gern wissen, was in der Höhle ist ...
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Anderer Hintergrund und Text bei hover

            Gerhard
            – Informationen zu den Bewertungsregeln

            Hallo,

            danke für die (traurige) Auskunft. Ich hoffe, dass irgendwann Microsofts negative Ausnahmeposition zu Ende ist!
            Gruß
            Gerhard

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

          2. Anderer Hintergrund und Text bei hover

            Gerhard
            – Informationen zu den Bewertungsregeln

            Hallo!

            der IE kann bis einschließlich Version 6 :hover *ausschließlich* auf Links anwenden, nicht auf andere Elemente.

            ich habe jetzt das Bild innerhalb eines a-tags gestellt. Damit beim Klicken nicht verzweigt wird, hatte ich angegeben: href="". Das war leider ein Fehlschluss. Kann ich erreichen, dass beim Klick nicht verzweigt wird?
            Gruß
            Gerhard

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Anderer Hintergrund und Text bei hover

              Der Martin
              – Informationen zu den Bewertungsregeln

              Hallo Gerhard,

              »» der IE kann bis einschließlich Version 6 :hover *ausschließlich* auf Links anwenden, nicht auf andere Elemente.
              ich habe jetzt das Bild innerhalb eines a-tags gestellt. Damit beim Klicken nicht verzweigt wird, hatte ich angegeben: href="".

              das ist quasi ein relativer Link auf das Default-Dokument im aktuellen Serververzeichnis. Da weder ein führender Slash, noch eine Protokollangabe dasteht, nimmt der Browser das als Basis, was von der aktuellen URL wie das Verzeichnis aussieht, und hängt den Wert des href-Attributs an - in diesem Fall nichts. Du linkst damit beispielsweise von http://example.com/info/something.html nach http://example.com/info/, und das willst du nicht.

              Das war leider ein Fehlschluss. Kann ich erreichen, dass beim Klick nicht verzweigt wird?

              Ich wollte erst schon vorschlagen, href="#" zu notieren - das wäre aber ähnlich unsinnig (okay, man bleibt wenigstens innerhalb der aktuellen Seite). Und wenn du das href-Attribut ganz weglässt, ist der Link kein Link mehr und IE6 hovert nicht mehr. Nein, wenn du erst einmal einen Link hast, musst du auch sein Verhalten akzeptieren.

              Du kannst zwar einen onclick-Handler im Link notieren, der nichts weiter tut als false zurückzugeben und damit die Standardaktion zu unterdrücken. Aber das wäre meiner Ansicht nach wirklich blöd: Erst einen Link benutzen, den man gar nicht will, und dann dessen Verhalten mit Javascript neutralisieren. Dann kann man stattdessen auch gleich das hover-Verhalten mit Javascript realisieren - jedenfalls dann, wenn man in Kauf nehmen kann, dass der hover-Effekt bei Besuchern ohne Javascript nicht funktioniert. Egal wie, irgendeinen Nachteil muss man in Kauf nehmen.

              Oder die IE6-Nutzer mitleidig angucken, die Schultern zucken und sagen, "Kann ich auch nix für."

              So long,
               Martin

              --
              Das Gehirn ist schon eine tolle Sache: Es fängt ganz von allein an zu arbeiten, wenn man morgens aufsteht, und hört erst damit auf, wenn man in der Schule ankommt.
                (alte Schülererkenntnis)
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Anderer Hintergrund und Text bei hover

                Gerhard
                – Informationen zu den Bewertungsregeln

                Hallo Martin,

                Ich hätte Dir und mir gewünscht, dass Du mir eine positive Nachricht überbringst.
                Aber jetzt weiß ich wenigstens Bescheid!
                Danke vielmals für Deine Mühe.
                Gerhard

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Anderer Hintergrund und Text bei hover

                  Gerhard
                  – Informationen zu den Bewertungsregeln

                  Hallo,
                  in dem nachfolgenden Beispiel passiert manchmal folgendes.
                  Wenn ich mit dem Cursor über das Bild b1 fahre, kommt   n i c h t   das Bild2 (die Fläche wird weiß). Erst wenn ich das Bild verlasse und erneut darüberfahre kommt das Bild b2. Das passiert auch, wenn ich das CSS extern einbinde.
                  Wie kann ich das verhindern?
                  Gruß
                  Gerhard

                    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<style type="text/css">  
a#bild1  
 { display: block;  
   width: 94px;  height: 25px;  
   background: url(bilder/b1.jpg) no-repeat;  
 }  
a#bild1:hover  
 {  
   background: url(bilder/b2.jpg) no-repeat;  
 }  
img  
  { border: none;  
  }  
</style>  
</head>  
<body>  
<a id="bild1" href="#z"></a>  
.....  
<a name="z">  
</a>  
</body>  
</html>
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

  2. Anderer Hintergrund und Text bei hover

    Der Martin
    +1 Informationen zu den Bewertungsregeln

    Hi,

    Wie erreiche ich, dass der "eine Text" und der "andere Text" jeweils zentriert sind

    mit der Eigenschaft text-align, angewendet auf das Elternelement.

    und in der oberen Zeile beginnen?

    Das ergibt sich automatisch, wenn du mit display anstatt mit visibility arbeitest.

    Wie erreiche ich, dass der rote und (bei hover) der graue Block gleich groß sind?

    Indem du die Größe unabhängig von :hover festlegst.

    Und nice to have: Bestimmt sind einige Teile überflüssig?

    Ja, zum Beispiel das umgebende div, zu dem außerdem das End-Tag fehlt. Selektiere doch direkt das a-Element, formatiere es als display:block, und gib ihm eine konstante Größe. Auch :hover würde ich dann auf das a-Element anwenden und nicht auf das div, dann versteht's auch der IE.

    Schließlich kannst du noch die beiden spans optisch austauschen, indem du sie abhängig von a:hover jeweils auf diaplay:inline oder display:none setzt:

    <a id="bild1" href="">
    <span class="an">Text1</span>
    <span class="aus">Text2</span>
    </a>

    a#bild1           /* Grundeigenschaften (Anzeigeart, Größe, Hintergrund) */
     { display: block;
       width:   8em;
       height:  1.5em;
       background-color: #DF0000;
       text-align: center;
     }
    a#bild:hover      /* Abweichende Eigenschaften bei :hover (Hintergrund) */
     { background-color: #DFDFDF;
     }
    a#bild .an        /* Eigenschaften des "an"-Textes */
     { display: inline;
     }
    a#bild:hover .an  /* Eigenschaften des "an"-Textes beim Hovern */
     { display: none;
     }
    a#bild .aus       /* Eigenschaften des "aus"-Textes */
     { display: none;
     }
    a#bild:hover .aus /* Eigenschaften des "aus"-Textes beim Hovern */
     { display: inline;
     }

    Ob das nun kürzer ist als deine Variante, weiß ich nicht. Aber zumindest erscheint es mir logischer.

    So long,
     Martin

    --
    Was du heute kannst besorgen,
    das geht sicher auch noch morgen.
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln