nicht angemeldet
Tooltip wird von div eingeschlossen
0 0 
MudGuard
Tooltip wird von div eingeschlossen
Hallo zusammen
Ich habe ein Problem und irgendwie stehe ich auf dem Schlauch, obwohl es warscheinlich gans einfach ist.
Ich habe auf meiner Seite http://www.madcv.de/newpage_test/work/index.shtml einen Tooltip angelegt: Siehe rechts - Schaltfläche "Nächster Termin".
Das funktioniert auch. Nur bekomme ich es nicht hin, dass mir der Tooltip sich in voller Größe darstellt (also über den div hinaus ragt).
CSS-Code:
#news {
width: 120px; height: 328px;
margin-top: 11px; margin-left: 624px;
padding: 10px;
border: 1px solid #333333;
background-color: #F8F8F8;
overflow-x:hidden;
overflow-y:scroll;
position: absolute;
z-index: 500;
}
/* Tooltip */
#news a.tooltip,
#news a.tooltip:link,
#news a.tooltip:visited,
#news a.tooltip:active {
position: relative;
text-decoration: none;
font-style: bold;
}
#news a.tooltip:hover {
background: transparent;
z-index: 502;
}
#news a.tooltip span {
display: none;
text-decoration: none;
}
#news a.tooltip:hover span {
display: block;
position: relative;
top: -25px;
left: 0px;
width: 100%;
height: 50px;
z-index: 503;
margin-bottom: 0px;
color: #000000;
border: 1px solid;
border-color: #000000;
padding: 2px 10px 2px 10px;
background: #CCCCCC;
font-family: Arial;
font-style: Normal;
text-align: left;
}
HTML-Code:
<div id="news">
<div style="width:100%; position:absolute;display:block;z-index:501">
<a href="#" class="tooltip"><img style="top:-8px; left:10px; border:1px solid #CCCCCC;" src="images/termin.png" alt="Nächster Termin">
<span>
<table border="1" frame="box" rules="all">
<tr><th>Datum</th><th>Tag</th><th>Was</th><th>Wo</th><th>Uhrzeit</th><th>Treffpunkt</th><th>Mit</th></tr>
<tr id="20090424"> <td>24.04.09</td><td class="center">FR</td><br><td>Freitag</td> ... <td class="center">Z</td>
</table>
</span>
</a>
</div>
...
</div>
Zur Erklärung: Die Zeile mit "id=20090424" wird von einem JavaScript geliefert.
HTML im Qelltext - Zeilen 222 bis 246.
JavaScript im <head> - Zeilen 29 bis 54.
Danke schon mal für eure bemühungen
MfG Pfid
-
Dein absolut positioniertes <div id=news> ist schon mal eine schlechte Idee.
(legt sich über die Navigation. z-index)Ein table in ein span zu stellen ist wiederum eine schlechte Idee.
Offenbar passt deine Tabelle platzmässig auch gar nicht an den Ort. (Bildschirm)Validieren würde auch nicht schaden.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo Beat
danke für deine Tipps.Ein table in ein span zu stellen ist wiederum eine schlechte Idee.
Offenbar passt deine Tabelle platzmässig auch gar nicht an den Ort. (Bildschirm)Das ist natürlich doof (hab ich noch nicht gewust). Die Tabelle muss aber sein, da ich diese von einem JavaScript bekome (automatisch aktuellsten termin anzeigen).
Dann werde ich mal das Tooltip mit JavaScript probieren. Vieleicht geht das mit einer Tabelle.Validieren würde auch nicht schaden.
Das es nicht valide ist hab ich schon gesehen - hab aber da noch nicht verstanden warum.
Habe auch gerade gesehen das ich <br> nicht in Tabellen verwenden darf und das mein JavaScript mir das, in der Liste auf die es zugreift, vorhandene </tr> irgendwie abschneidet.
Bei der Validierung habe ich auch Probleme im <div id="menu1">.
Das war eine Vorlage. Und die funktioniert mit leeren <b> und <div>.
Und das sol man ja nicht, so wie ich das gelesen habe.
Hat jemand zufällig einen Tipp für mich wie man so etwas lösen kann?Quelltext: Zeilen 78 bis 182 (ist ziemlich lang, deswegen möchte ich es nicht hier reinsetzen)
Css-Code für das Menü: (http://www.madcv.de/newpage_test/css/menu.css
.nav {padding:0; margin:0; list-style:none; height:41px; background:url(../images/menu/back.png) repeat-x; font-family:arial; font-size:14px; width:756px;} /*Gesamtbreite*/ .nav li {float:left; height:41px;} .nav li a {display:block; height:41px; width:108px; float:left; line-height:37px; color:#000; text-decoration:none; text-align:center;} .nav li a:hover {position:relative; visibility:visible; line-height:35px; z-index:50;} .nav li a:hover b {display:block; width:108px; height:41px; background:url(../images/menu/toptab_shadow.png); color: #FFFFFF} .nav li a:hover span {display:block; width:108px; height:41px; position:absolute; left:0; top:0; cursor:pointer;} .nav li ul, .nav li div {position:absolute; left:-9999px;} .nav li:hover {position:relative;} .nav li:hover > a {line-height:35px; color:#FFFFFF;} .nav li:hover > a b {display:block; width:108px; height:41px; background:url(../images/menu/toptab_shadow.png);} .nav li:hover > a span {display:block; width:108px; height:41px; position:absolute; left:0; top:0; cursor:pointer;} .nav table {border-collapse:collapse; margin:-1px;} .nav :hover div {left:0; top:40px; width:200px; height:127px; padding:10px 0;background:url(../images/menu/sub_back.png); z-index:100;} /*.left*/ .nav :hover div.left {left:-88px; top:40px; width:200px; height:127px; padding:10px 0;background:url(../images/menu/sub_back.png); z-index:100;} .nav :hover ul {padding:0; margin:0; list-style:none; left:0; top:37px; width:200px; height:100px; padding:10px 0; z-index:120;} /*.left*/ .nav :hover ul.left {left: -88px;} .nav :hover ul li {height:27px;} .nav :hover ul li a {height:27px; line-height:27px; color:#fff; width:196px; text-align:left; text-indent:20px;} .nav :hover ul li.fly a {background:url(../images/menu/arrow.gif) no-repeat 150px center;} .nav :hover ul li a:hover {background: url(../images/menu/subtab_over.png); color:#FFFFFF;} .nav :hover ul li:hover > a {background: url(../images/menu/subtab_over.png); color:#FFFFFF;} .nav :hover ul ul, .nav :hover ul div {position:absolute; left:-9999px;} .nav :hover ul :hover {z-index:200;} .nav :hover ul :hover div {left:150px; top:-4px; width:200px; height:100px; padding:10px 0; background:url(../images/menu/sub_back.png); z-index:200;} .nav :hover ul :hover ul {padding:0; margin:0; list-style:none; left:150px; top:-4px; width:200px; height:144px; padding:10px 0; z-index:250;} .nav :hover ul :hover ul li a {background:transparent;} .nav :hover ul :hover ul li a:hover {background: url(../images/menu/subtab_over.png); color:#FFFFFF;}Danke
pfid
-
-
Hi,
<tr id="20090424"> <td>24.04.09</td><td class="center">FR</td><br><td>Freitag</td> ... <td class="center">Z</td>
Zur Erklärung: Die Zeile mit "id=20090424" wird von einem JavaScript geliefert.Dann ist das Javascript grob fehlerhaft - eine HTML-ID darf nicht mit einer Ziffer beginnen.
overflow-x:hidden;
overflow-y:scroll;Hiermit legst Du fest, daß nichts nach rechts/links aus dem div news rausragen darf.
Warum erwartest Du dann, daß es dennoch geschieht?cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo MudGuard
Dann ist das Javascript grob fehlerhaft - eine HTML-ID darf nicht mit einer Ziffer beginnen.
Das Javascript ist nicht fehlerhaft - nur meine Denkweise ist es *g*.
Ich habe das Schript von "title" auf "id" umgeschrieben, weil es immer ein gelben tooltip erzeugt hat. Muss ich halt wieder ändern.overflow-x:hidden;
overflow-y:scroll;
Hiermit legst Du fest, daß nichts nach rechts/links aus dem div news rausragen darf.
Warum erwartest Du dann, daß es dennoch geschieht?Stimmt - dann kann ja nichts darüber raus ragen. Ich hatte das gemacht, um zu verhindern, dass eine horizontale Scrolbar angezeigt wird. Das kann ich aber anders machen.
Danke für deine Hinweise. Die bringen mich schon ein ganzes stück weiter.
mfg pfid
-