HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - Popups per CSS

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Popups per CSS

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
Ein Verwirrter
Gast





BeitragVerfasst am: 25.08.2005 07:30:55    Titel: Popups per CSS Antworten mit Zitat

Ich möchte, wenn man über einen Link geht, dem Benutzer eine Erläuterung geben, was er da anklickt. Vorbild ist das Menü von http://www.xn--gssner-bua.de

Dies funktioniert bei mir im Firefox und im IE6. Also habe ich mich im Quelltext der Seite schlau gemacht und für mein Projekt folgendes Stylesheet erstellt:

Code:

body
{
   font-family: Tahoma, Verdana, sans-serif;
}
a
{
   text-decoration: none;
}
a span
{
   display: none;
}

a:hover span
{
         display: block;
         position: absolute;
         left: 120px;
         width: 120px;
      padding: 5px;
         margin: 3px;
         z-index: 85;
      color: white;
         background: teal;
      font: 8pt Verdana, Arial, Helvetica, sans-serif;
         text-align: center;
         border-left: 5px solid black;
}


Ist halt direkt kopiert.. Wink

Im HTML-Dokument gibt es nun folgende Zeile, um den Effekt hervorzurufen:

Code:
<a href="http://dokument2.html">Link<span>Infotext</span></a>


Im Firefox geht´s, im IE6 nicht. Große Frage ans Forum: Warum?
Nach oben
Ein Verwirrter
Gast





BeitragVerfasst am: 25.08.2005 12:40:06    Titel: Antworten mit Zitat

Klar ist mir das nicht, aber der IE möchte den a-Tag samt Pseudoklassen definiert haben:

Code:
a:link
{
   display: inline;

}
a:visited
{
   display: inline;

}
a:hover
{
   display: inline;
        background: white;
        text-decoration: none;
}
a:active
{
   display: inline;
}
a span
{
         display: none;
}
a:hover span
{
         display: block;
         position: absolute;
         width: 120px;
         left: 120px;
      padding: 5px;
         margin: 3px;
         z-index: 85;
      color: white;
         background: teal;
      font: 8pt Verdana, Arial, Helvetica, sans-serif;
         text-align: center;
         border-left: 5px solid black;
}


Und schon geht´s. Zwar sind die Positionierungen im Firefox und IE leicht unterschiedlich, aber das ist für meine Zwecke okay. Vielleicht hilft ja jemandem diese Lösung.
Nach oben
struppi
Forumsteilnehmer


Anmeldungsdatum: 03.02.2005
Beiträge: 9

BeitragVerfasst am: 11.10.2005 18:06:23    Titel: Antworten mit Zitat

Der IE hat diesbezüglich einen Bug
http://www.quirksmode.org/css/ie6_purecsspopups.html vielleicht lag's daran
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.