CSS: Objekt dynamisch positionieren von Matthias Scharwies, 07.11.2017 05:40

CSS: Objekt dynamisch positionieren

Wettermann 06.11.2017 22:25

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

CSS: Objekt dynamisch positionieren
Matthias Scharwies 07.11.2017 05:40 (Versionen)

css
– Informationen zu den Bewertungsregeln
Servus!

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.

Balkendiagramme mit CSS sind möglich, lies z.B. mal bei CSS-Tricks: Making Charts with CSS

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.

Ich würd's doch einfach zentrieren mit
```
#diagramm div:hover .popup {
	display: block;
	margin: 0 auto;
	padding: 1em;
	background: #ffffff;
	border: 0;
	box-shadow: 3px 3px 5px -1px rgba(214,214,214,0.5);
}
```
Die vendor-prefixes -moz-, -webkit- brauchst du nicht mehr.

Zur Veranschaulichung hier ein Teil des Codes:

Grundsätzlich einige Tipps:

1. Fasse immer soviel wie möglich zusammen:
```
.bar-green,
.bar-orange,
.bar-red { height: 25px; margin-bottom: 12px; line-height: 1.5em; 
}

.bar-green { background: rgb(102,178,87); }
.bar-orange { background: rgb(235,106,39);}
.bar-red   { background: rgb(231,52,43);}		
```
Wenn dein div das einzige Kind in der Tabellenzelle ist, würde ich auf display: inline; float: left; verzichten, das braucht man gar nicht.

2. Semantisches HTML

Überlege Dir, was die einzelnen Teile eigentlich aussagen. Deine Kriterien sind imho eine Liste mit einer Überschrift und einem Absatz mit einem Link drunter:
```
					<div class="popup">
						<h2>erfüllte Kriterien:</h2>
						<ul>
              <li>Kriterium 1</li>
						  <li>Kriterium 2</li>
						  <li>Kriterium 3</li>
              <li>Kriterium 4</li>
						  <li>Kriterium 5</li>
						  <li>Kriterium 6</li>
            </ul>  				
						<p class="more"><a href="AAAAAAAA">Zum Profil</a></p>
					</div> 
```
Ich habe überlegt, was ✓ist, einfacher wäre eine Auszeichnung von utf-8 mit
```
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  ...
```
Dann kannst du den Check Mark selbst verwenden: ✓

Der ist aber kein Teil vom Markup, sondern Dekoration und gehört deshalb ins CSS:
```
.popup li {
  list-style-type: none;
}
.popup li::before  {
  content: "✓ ";    
  color: green;
  font-size: 1.5em;
}
```
Ich würde aber doch überlegen, JavaScript einzusetzen. Nicht um Elemente zu positionieren, sondern um die Balken je nach Wert passend zu dimensionieren - oder willst Du für jeden (möglichen) Prozentwert eine Klasse festlegen?

Herzliche Grüße

Matthias Scharwies

--
Es gibt viel zu tun: ToDo-Liste
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. CSS: Objekt dynamisch positionieren
  
  Gunnar Bittersmann Homepage des Autors 08.11.2017 08:03
  
  css
  
  html
  – Informationen zu den Bewertungsregeln
  @@Matthias Scharwies
  
  Balkendiagramme mit CSS sind möglich
  
  Aber kaum sinnvoll. Dafür gibt es:
  - SVG
  - das meter-Element. [Spec, SELFHTML, MDN]
    
    Damit kann man Balkenteile auch in rot, gelb und grün einfärben ☞ zum Rumspielen
    
    Die Farben kann man mit CSS auch ändern, wobei es für Edge etwas zu beachten gibt.
  LLAP 🖖
  
  --
  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
CSS: Objekt dynamisch positionieren
Rolf B 07.11.2017 15:45

css
– Informationen zu den Bewertungsregeln
Hallo Wettermann,

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

Kannst Du das mal mit Beispielen - also konkreten Breiten für den Balkenbereich, die Balken und Positionen für das Popup - ausformulieren? Vielleicht verstehe ich es dann.

Dann noch ein paar Löffel Senf zur Wurst:

Löffel 1: Versuche mal, dein Balkendiagramm auf folgenden Geräten zu verwenden:
1. Desktop ohne Maus (Tastatur)
2. Dein Smartphone, oder ein Tablet
3. In Schwarzweiß (bzw. von einem User dessen Farbsehen beeinträchtigt ist)
4. Ein Screenreader für Blinde
Danach wirst Du mir zustimmen, dass dein Konzept so nicht trägt. Um das Popup tastaturbedienbar hinzubekommen, brauchst Du JavaScript oder neuere Browser, die :focus-within unterstützen (siehe dieses, in Arbeit befindliche Beispiel). IE und Edge sind damit außen vor.

Löffel 2: Deine "Checkliste" mit Kritierien macht nach meiner Ansicht nur Sinn, wenn alle Kriterien aufgelistet werden und nur die erfüllten Kriterien den Haken haben. Oder?

Rolf

--
sumpsi - posui - clusi
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Wettermann: CSS: Objekt dynamisch positionieren

CSS: Objekt dynamisch positionieren

CSS: Objekt dynamisch positionieren

CSS: Objekt dynamisch positionieren

CSS: Objekt dynamisch positionieren

CSS: Objekt dynamisch positionieren