Tooltips (3)

Antworten
Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Tooltips (3)

Beitrag von Admin » Do 21. Aug 2014, 16:31

Nun wie versprochen der dritte Teil der Tooltips. Hier geht es um die absolute Positionierung der Anzeige.

Absolut heißt hier, dass die Anzeige unabhängig von der Position der Elternelemente immer an der gleiche Stelle beginnt (hier unterhalb des Menüs) unabhängig von der Größe des Tooltips.

Hier eine Vorschau.

Zuerst bauen wir uns ein Menü. Dazu übernimmst du den unten stehenden Code (CSS + HTML). Nähere Info's zum Menü-Aufbau findest du hier -> http://www.kompozer-web.de/forum/viewto ... ?f=18&t=43
CSS-Code

Code: Alles auswählen

#menu {
    width: 150px;
    height: 250px;
    }

#menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

#menu li {
    text-align: center;
    }

#menu li a {
    background-image: url(button.gif);
    background-repeat: no-repeat;
    background-position: left center;
    display: block;
    height: 30px;
    text-decoration: none;
    font-size: 1em;
    color: black;
    font-family: Arial,Helvetica,sans-serif;
    line-height: 1.8em;
    }

#menu li a:hover {
    background-image: url(button.gif);
    background-position: left bottom;
    background-repeat: no-repeat;
    }
HTML-Code

Code: Alles auswählen

 <body>
    <div id="menu">
      <ul>
        <li>
          <a href="#nogo">Home</a>
        </li>
        <li>
          <a href="#nogo">Kontakt</a>
        </li>
        <li>
          <a href="#nogo">Anfahrt</a>
        </li>
        <li>
          <a href="#nogo">Impressum</a>
        </li>
      </ul>
    </div>
  </body>
So sieht die Seite aus.

Als nächstes fügst du den Text für die Tooltips mit span-Bereich hinzu. Dafür erweiterst du obigen HTML-Code wie folgt:
<body>
<div id="menu">
<ul>
<li>
<a href="#nogo">Home<span>Das ist meine Startseite</span></a>
</li>
<li>
<a href="#nogo">Kontakt<span>Hier findest du alle Infos zur Kontaktaufnahme</span></a>
</li>
<li>
<a href="#nogo">Anfahrt<span>Der Weg zu meiner Firma</span></a>
</li>
<li>
<a href="#nogo">Impressum<span>Und nun noch das notwendige Rechtliche</span></a>
</li>
</ul>
</div>
</body>

Die Seite sieht danach so aus. Nicht besonders schön da sich der Text überlagert. Also „verstecken“ wir den span-Bereich. Dies geschieht mit folgender Regel:

Code: Alles auswählen

#menu a span {
    display: none;
    } 
Jetzt sieht die Seite so aus. Aber vom Tooltip ist noch nichts zu sehen. Die folgende Regel dient zur Sichtbarmachung der Tooltips und zur Platzierung am Ende des Menüs.

Code: Alles auswählen

#menu a:hover span {
  border: 1px dashed black;
  display: block;
  position: absolute;
  z-index: 20;
  color: black;
  background-color: #ffffcc;
  text-align: left;
  width: 142px;
  top: 140px;
  left: 10px;
  padding-left: 5px;
}
So sollte jetzt deine Seite aussehen.

Viel Spaß beim Nachbauen und Experimentieren.
Dieses Tutorial wurde am 28. Feb 2008 von gimp-michel auf KompoZer-Web veröffentlicht.

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast