Problem mit grid bearbeitet von Yadgar 26.06.2017 14:17 Hi(gh)! Bei dem Versuch, ein Inhaltsverzeichnis (effektiv zweispaltig) mit grid zu layouten, ist etwas schief gegangen - Zellen in derselben Zeile werden vertikal versetzt statt auf gleicher Höhe dargestellt (siehe Link). Ferner erscheint die über die ganze Breite des Grids gehende Doppelzelle der Klasse "line" ohne unteren schwarzen Rand. Das CSS-Stylesheet sieht so aus: ~~~CSS .c { text-align:center } .i { font-style:italic } .b { font-weight:bold } .ic { font-style:italic; text-align:center } .small { font-size:16px } .large { font-size:24px } h1 { font-size:30px } h2 { font-size:24px } div.page { margin-left:20%; width:60%; margin-right:20% } div.container { display:grid; grid-template-columns:75% 25%; grid-template-rows:auto } div.chapters { grid-column-start:1; grid-column-end:2; padding-right:5px; text-align:center } div.pagenumbers { grid-column-start:2; grid-column-end:3; padding-right:5px; text-align:right } div.line { grid-column-start:1; grid-column-end:3; padding-right:5px; border-bottom:black 2px } ~~~ das HTML-Skript: ~~~HTML <html> <head> <title>Rüdiger MOBEL: Heimteilchenbeschleuniger mit und ohne Zillertalbahn - Seite 8</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="heimteilchenbeschleuniger.css" type="text/css"> </head> <body> <div class="page"> <div class="container"> <div class="chapters"> <h1>Inhalt</h1> </div> <div class="pagenumbers"> Seite </div> <div class="chapters"> <h2>Einführung</h2> </div> <div class="pagenumbers"> 11 </div> <div class="line"> </div> <div class="chapters"> Die Welt vor der Erfindung<br> des Heimteilchenbeschleunigers </div> </div> <p class="c"> <a href="heimteilchenbeschleuniger_007.html">[ Vorherige Seite ]</a> <a href="heimteilchenbeschleuniger_009.html">[ Nächste Seite ]</a> </p> </div> </body> </html> ~~~ Was habe ich falsch gemacht? Bis bald im Khyberspace! Yadgar
Problem mit grid bearbeitet von Yadgar 26.06.2017 14:20 Hi(gh)! Bei dem Versuch, ein Inhaltsverzeichnis (effektiv zweispaltig) mit grid zu layouten, ist etwas schief gegangen - Zellen in derselben Zeile werden vertikal versetzt statt auf gleicher Höhe dargestellt (siehe Link). Das CSS-Stylesheet sieht so aus: ~~~CSS .c { text-align:center } .i { font-style:italic } .b { font-weight:bold } .ic { font-style:italic; text-align:center } .small { font-size:16px } .large { font-size:24px } h1 { font-size:30px } h2 { font-size:24px } div.page { margin-left:20%; width:60%; margin-right:20% } div.container { display:grid; grid-template-columns:75% 25%; grid-template-rows:auto } div.chapters { grid-column-start:1; grid-column-end:2; padding-right:5px; text-align:center } div.pagenumbers { grid-column-start:2; grid-column-end:3; padding-right:5px; text-align:right } div.line { grid-column-start:1; grid-column-end:3; padding-right:5px; border-bottom:black 2px } ~~~ das HTML-Skript: ~~~HTML <html> <head> <title>Rüdiger MOBEL: Heimteilchenbeschleuniger mit und ohne Zillertalbahn - Seite 8</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="heimteilchenbeschleuniger.css" type="text/css"> </head> <body> <div class="page"> <div class="container"> <div class="chapters"> <h1>Inhalt</h1> </div> <div class="pagenumbers"> Seite </div> <div class="chapters"> <h2>Einführung</h2> </div> <div class="pagenumbers"> 11 </div> <div class="line"> </div> <div class="chapters"> Die Welt vor der Erfindung<br> des Heimteilchenbeschleunigers </div> </div> <p class="c"> <a href="heimteilchenbeschleuniger_007.html">[ Vorherige Seite ]</a> <a href="heimteilchenbeschleuniger_009.html">[ Nächste Seite ]</a> </p> </div> </body> </html> ~~~ Was habe ich falsch gemacht? Bis bald im Khyberspace! Yadgar
nicht angemeldet nicht angemeldet
