CSS: Objekt dynamisch positionieren bearbeitet von Matthias Scharwies 07.11.2017 05:40 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](https://css-tricks.com/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 ~~~CSS #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: ~~~CSS .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: ~~~HTML <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 `✓`ist, einfacher wäre eine Auszeichnung von utf-8 mit ~~~HTML <!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: ~~~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](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}
CSS: Objekt dynamisch positionieren bearbeitet von Matthias Scharwies 07.11.2017 11:11 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](https://css-tricks.com/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 ~~~CSS #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: ~~~CSS .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: ~~~HTML <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 `✓`ist, einfacher wäre eine Auszeichnung von utf-8 mit ~~~HTML <!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: ~~~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](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}
CSS: Objekt dynamisch positionieren bearbeitet von Tabellenkalk 07.11.2017 09:50 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, les' z.B. mal bei CSS-Tricks: [Making Charts with CSS](https://css-tricks.com/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 ~~~CSS #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: ~~~CSS .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: ~~~HTML <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 `✓`ist, einfacher wäre eine Auszeichnung von utf-8 mit ~~~HTML <!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: ~~~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](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}
nicht angemeldet
