Wettermann: CSS: Objekt dynamisch positionieren

Beitrag lesen

SELF-Forum

CSS: Objekt dynamisch positionieren

Wettermann
– Informationen zu den Bewertungsregeln

Hallo,

ich suche nach einer Lösung, mit der ich, idealerweise nur mit HTML und CSS, Boxen bei Mouseover so öffnen und platzieren kann, dass sie stets innerhalb der sie umgebenden Tabelle auftauchen.

Es handelt sich hierbei um ein aus divs bestehendes Balkendiagramm, bei dem sich bei Mouseover über die einzelnen Balken und die verschiedenfarbigen Balkenteile kleine Fenster mit Angaben öffnen. Die sollen sich am jeweiligen Balken öffnen, also nicht zentral in der Mitte o.ä., aber möglichst so, dass sie nicht über den Rand der Tabelle hinausgehen. Wenn rechts also zu wenig Platz ist, soll sich das Fenster etwas weiter links öffnen, wenn links zu wenig ist, etwas weiter rechts etc.

Kennt jemand eine CSS-Lösung für so etwas? Oder kommt man da um Javascript nicht herum?

Zur Veranschaulichung hier ein Teil des Codes:

<html>
<head>
	<style>
		.bar-green { height: 25px; margin-bottom: 12px; line-height: 1.5em; background: rgb(102,178,87); display: inline; float: left;}
		.bar-orange { height: 25px; margin-bottom: 12px; line-height: 1.5em; background: rgb(235,106,39); display: inline; float: left;}
		.bar-red   { height: 25px; margin-bottom: 12px; line-height: 1.5em; background: rgb(231,52,43); display: inline; float: left;}		
		.bar-green:hover { background: rgba(102,178,87,0.7) }
		.bar-orange:hover { background: rgba(235,106,39,0.7) }
		.bar-red:hover { background: rgba(231,52,43,0.7) } 

#diagramm div span.popup {
	display: none;
}

#diagramm div:hover span.popup {
	display: block;
	position: relative;
	transition: all 0.5s ease-in;
	top: 0;
	left: 20%;
	width: 320px;
	margin: 0px;
	padding: 16px;
	font-weight: normal;
	background: #ffffff;
	text-align: left;
	border: 0;
	-webkit-box-shadow: 3px 3px 5px -1px rgba(214,214,214,0.5);
	-moz-box-shadow: 3px 3px 5px -1px rgba(214,214,214,0.5);
	box-shadow: 3px 3px 5px -1px rgba(214,214,214,0.5);
}
	</style>


</head>
<body>
	<table style="width: 100%; border: 0;" id="diagramm">
		<tr>
			<td style="width: 160px"><a href="AAAAAAAA" style="color: #333333"><strong>Link zu AAAAAAAA</strong></a></td>
			<td>
				<div class="bar-green" style="width: 100%">
					<span class="popup">
						<strong>Diese Kriterien werden erfüllt:</strong><br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 1<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 2<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 2<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 4<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 5<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; 6<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 7<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 8<br>						
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 9<br>						
						<span class="more"><a href="AAAAAAAA">Zum Profil</a></span>
					</span>
				</div>
			</td>
		</tr>
		<tr>
			<td style="width: 160px"><a href="BBBBBBBB" style="color: #333333"><strong>Link zu AAAAAAAA</strong></a></td>
			<td>
				<div class="bar-green" style="width: 100%">
					<span class="popup">
						<strong>Diese Kriterien werden erfüllt:</strong><br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 1<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 2<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 2<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 4<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 5<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; 6<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 7<br>
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 8<br>						
						<span style="color: #66B257; font-weight: bold;">&#10003;</span>&nbsp;&nbsp; Kriterium 9<br>						
						<span class="more"><a href="BBBBBBBB">Zum Profil</a></span>
					</span>
				</div>
			</td>
		</tr>
</table>
</body>
</html>

Danke und beste Grüße!

Beitrag melden
–
Informationen zu den Bewertungsregeln