mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 26.04.2024 10:10 Benutzername: Passwort: Auto-Login

Thema: Mouseover Text vom 24.10.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Mouseover Text
Autor Nachricht
Greife
Threadersteller

Dabei seit: 24.10.2014
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 24.10.2014 16:03
Titel

Mouseover Text

 Antworten mit Zitat Zum Seitenanfang
Hallo,

ich suche eine Lösung für folgendes Problem:
Ich habe einige Anker-Elemente in der selben Zeile. Beim Mouseover erscheint ein Text, wie bei einem Tooltip. Der Text soll nur bei jedem Tooltip an der selben stelle sein. Über der Zeile, horizontal Zentriert.
Ich habe es bereits hinbekommen, dass der Text direkt beim Anker-Element erscheint, absolut zum Anker.

So soll es aussehen:


_ _ _ _ _ _ _ Hovertext _ _ _ _ _ _ _ _ <-Horizontal zentriert

Eins | Zwei | Drei | Vier | Fünf | Sechs <- Anker

Vielleicht gibt es auch eine Lösung, um den angezeigten Text im HTML-Code außerhalb des Anker-Elements zu platzieren.

Vielen Dank für die Hilfe!
  View user's profile Private Nachricht senden
DEKONSTRUKTIV

Dabei seit: 22.06.2009
Ort: bln
Alter: -
Geschlecht: -
Verfasst Fr 24.10.2014 16:07
Titel

Antworten mit Zitat Zum Seitenanfang
und was genau is dein konkretes problem?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Fr 24.10.2014 16:21
Titel

Antworten mit Zitat Zum Seitenanfang
Schenk uns ein wenig deines Codes und wir schenken dir ein wenig unserer Aufmerksamkeit.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Greife
Threadersteller

Dabei seit: 24.10.2014
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 24.10.2014 22:20
Titel

Antworten mit Zitat Zum Seitenanfang
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
<div class="container">
<p class="top">Der Text soll immer hier stehen.</p>
<p class="class">
<a href="#" class="text">Eins<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Zwei<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Drei<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Vier<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Fuenf<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Sechs<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Sieben<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Acht<span>Hier steht ein Text.</span></a>
</p>
</body>
</html>

Code:
*, html, body {margin:0; padding:0;}

html{
}

.container{
background-color: #CCC;
width: 1000px;
height: 500px;
padding: 100px 0 0 0;
}

.class{
margin: 0 auto 0 auto;
text-align: center;
}

.top{
text-align: center;
margin: 0 auto 0 auto;
padding: 50px 0 50px 0;
color: red;
}

a.text {
  position: relative;
  text-decoration: none;
}

a.text span {display: none;}

a.text:hover span {
   display: block;
   position: absolute;
   content: attr(title);
   text-align: center;
   left: 50%;
   top: -40px;
   width: 150px;
}
  View user's profile Private Nachricht senden
Greife
Threadersteller

Dabei seit: 24.10.2014
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 27.10.2014 15:03
Titel

Antworten mit Zitat Zum Seitenanfang
Bitte nochmal um Hilfe. Bin leider noch nicht weitergekommen.
  View user's profile Private Nachricht senden
tschuingum

Dabei seit: 17.06.2009
Ort: Karlsruhe
Alter: -
Geschlecht: -
Verfasst Mo 27.10.2014 16:33
Titel

Antworten mit Zitat Zum Seitenanfang
Über die Semantik würde ich nochmal nachdenken - sieht mir z.B. verdächtig nach einer Liste und nicht nach einem Textabsatz aus. Aber das nur am Rande.

Zur Positionierung: Absolut positionierte Elemente beziehen sich immer auf das nächsthöhere Vorfahrelement, welches nicht static positioniert ist. In deinem Fall also auf die a-Elemente … willst du aber nicht, also entferne die relative Positionierung bei den Links und gebe sie dem Textabsatz.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen MouseOver Text
Bei MouseOver Text vergrößern?
[CSS] Bei mouseover zusätzlich Text einblenden
Infotext bei Mouseover über Text
Mouseover erweitert Text/Links CSS(3) oder...?
Suche script für Infotext bei mouseover Bild. Der Text...
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB