Yadgar: Problem mit grid

Beitrag lesen

SELF-Forum

Problem mit grid

Yadgar Homepage des Autors (Versionen)
– Informationen zu den Bewertungsregeln

problematische Seite

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:

.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>
  <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">
	  &nbsp;
	</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

Beitrag melden
–
Informationen zu den Bewertungsregeln