Tweet
Hallo.
Wie einige von euch aus meinen letzten Beiträge vielleicht wissen, programmiere ich derzeit einen Kalender. In einer Datenbank werden Ereignisse gespeichert und vom Kalender abgerufen und anschließend angezeigt.
Im Kalender selbst wird das Datum an dem etwas vorliegt fett gedruckt, wenn man das Datum hovert wird der Name der Veranstaltung angezeigt. Beim Klicken auf das Datum öffnet sich die als Link angegebene Seite.
Soweit funktioniert alles prima. Leider wird der beim Hovern eingeblendete Text am rechten Rand des Kalenders abgeschnitten, da er über den Seitenrand raus geht.
Nun habe ich gelesen, dass sich <span>-Felder (und ein solches ist dies) an ihrem Mutterelement ausrichten und das ist bei mir die Zelle des jeweiligen Tages. Das Problem scheint also klar zu sein. Das <span>-Feld richtet sich an der Zelle aus, diese liegt am rechten Seitenrand und dadurch wächst das <span>-Feld darüber raus.
Wie kann ich es schaffen, dass dies nicht mehr passiert?
Das <span> soll innerhalb der Seite vollständig ausgegeben werden.
Bestenfalls immer rechts vom Mauszeiger bis es den Seitenrand berührt, und dann soll es halt immer am rechten Seitenrand bleiben, egal wo der Mauszeiger sich befindet.
Wie einige von euch aus meinen letzten Beiträge vielleicht wissen, programmiere ich derzeit einen Kalender. In einer Datenbank werden Ereignisse gespeichert und vom Kalender abgerufen und anschließend angezeigt.
Im Kalender selbst wird das Datum an dem etwas vorliegt fett gedruckt, wenn man das Datum hovert wird der Name der Veranstaltung angezeigt. Beim Klicken auf das Datum öffnet sich die als Link angegebene Seite.
Soweit funktioniert alles prima. Leider wird der beim Hovern eingeblendete Text am rechten Rand des Kalenders abgeschnitten, da er über den Seitenrand raus geht.
Nun habe ich gelesen, dass sich <span>-Felder (und ein solches ist dies) an ihrem Mutterelement ausrichten und das ist bei mir die Zelle des jeweiligen Tages. Das Problem scheint also klar zu sein. Das <span>-Feld richtet sich an der Zelle aus, diese liegt am rechten Seitenrand und dadurch wächst das <span>-Feld darüber raus.
Wie kann ich es schaffen, dass dies nicht mehr passiert?
Das <span> soll innerhalb der Seite vollständig ausgegeben werden.
Bestenfalls immer rechts vom Mauszeiger bis es den Seitenrand berührt, und dann soll es halt immer am rechten Seitenrand bleiben, egal wo der Mauszeiger sich befindet.
PHP-Code:
if(array_key_exists($event_date, $events)){ //Prüfen ob eine Veranstaltung am Tag $i vorliegt
$show_event = "<a href=\"".$link["$event_date"]."\" target=\"_blank\" class=\"tool\">".$i."<span>".$events["$event_date"]."</span></a>\n";
if ($i == $heute){
echo "<td class=\"today\">".$show_event."</td>\n";
}else{
echo "<td>".$show_event."</td>\n";
}
Code:
a.tool span{
z-index: 3;
background: #FFF;
color: #494f5c;
position: relative;
padding: 10px;
max-width: 100%;
text-align: center;
white-space: nowrap;
display: none;
float: left;
}
a.tool:hover span{
position: fixed;
display: block;
}