Einzelnen Beitrag anzeigen
  #1  
Alt 08.12.2015, 15:42:06
SamTh94 SamTh94 ist offline
Anfänger
 
Registriert seit: Dec 2015
Alter: 29
Beiträge: 1
<span> nicht an Elternelement ausrichten

Hallo liebe Forenmitglieger,

ich plage mich nun seit einiger Zeit mit einem lästigen Problem rum für welches ich keine passende Antwort im Netz finden kann. Ihr seid meine letzte Hoffnung.

Ich habe ein Eventkalender programmiert bei welchem die einzelnen Tage in einer Tabelle dargestellt werden. In der Datenbank werden nun Ereignisse gespeichert welche dann ebenfalls im Kalender angezeigt werden, indem der jeweilige Tag fett gedruckt erscheint.
Nun soll man beim hovern des Feldes den Namen des stattfindenden Events angezeigt bekommen. Gelöst habe ich dies so:

PHP-Code:
$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";

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;
}
Das funktioniert soweit auch prima, nur werden Ereignisse, welche sich im Kalender am rechten Rand befinden abgeschnitten, da das span-Feld über die Seitenbreite hinausragt.
Dies ist dadurch bedingt, dass sich das span-Feld an seinem Elternelement - also dem <td> - orientiert.
Kann ich es irgendwie so umprogrammieren, dass sich das span-Feld nicht am <td> orientiert, sondern an einem beliebigen anderen Element, bestenfalls dem <div>, welches den kompletten Kalender umhüllt? Dann könnte ich mit top und left in CSS ja bestimmen, wo genau das <span> angezeigt werden soll und könnte es zum Beispiel immer unter dem Kalender anzeigen lassen.

Falls dies nicht geht, ist es dann zumindest möglich dem Browser zu sagen, dass er das <span>-Feld nicht abschneiden darf, dieses also an der rechten Seite kleben bleibt, und der Text somit angezeigt wird?

Ich hoffe ich habe mein Problem halbwegs verständlich erklärt und ihr könnt mir die ein oder andere Idee geben.
Vielen Dank schon mal im Voraus,
SamTh94

Hier noch ein Beispiel:
Am 3. Januar (ein Sonntag) soll das "Testevent" stattfinden. Wenn man den Tag hovert wird dies auch angezeigt, nur leider kann man den Namen des Events nicht lesen, da er abgeschnitten wurde.
http://www.fotos-hochladen.net/thumb...m5lv_thumb.jpg
Mit Zitat antworten