Matthias Scharwies: CSS: Objekt dynamisch positionieren

Beitrag lesen

SELF-Forum

CSS: Objekt dynamisch positionieren

Matthias Scharwies (Versionen)
– 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> <!--end popup --->

Ich habe überlegt, was &#10003;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