nicht angemeldet
Grid korrekt einstellen
0 
Rolf B
Grid korrekt einstellen
Liebe Forengemeinde,
ich habe mich mit dem Selfhtml-Wiki befasst und studiere gerade den Bereich über die Grid-Technik. Ich habe eine einfache Seite gemäß dem Beispiel aus dem selfhtml-wiki erstellt und wollte diese an meine Bedürfnisse anpassen. Leider stoße ich, trotz intensivem probieren und Wiki lesen, auf ein für mich nicht lösbares Problem. Daher bitte ich euch um Hilfe.
Die Beispielseite ist in 4 Bereiche aufgeteilt: header, nav, article und footer. Als Grid habe ich 3 Spalten gewählt und eine feste Begrenzung der Gesamtbreite definiert. Header und footer sollen immer über alle drei Spalten gehen, egal wie groß das Anzeigefenster ist. Soweit ist auch alles in Ordnung und funktioniert auch.
Nun der Teil der nicht korrekt funktioniert: in breiten Bildschirmen soll der Bereich nav 1 Spalte in Anspruch nehmen und in der linken Spalte angeordnet sein. Der Bereich article soll den restlichen Bereich (also die mittlere und rechte Spalte) voll einnehmen. Wenn das Anzeigefenster nun verkleinert wird (sodass die Mindestbreite unterschritten wird), so soll der Bereich article eine Zeile nach unten rutschen und wieder die volle Breite nutzen, diesmal also drei Spalten breit. Der Bereich nav soll also in der zweiten Reihe im Grid stehen bleiben. Ein "nice to have" (aber kein "must have") wäre, wenn der Bereich nav dann ebenfalls die vollständige Breite einnimmt.
Laut dem selfhtml-wiki über responsive Raster ohne Media-Queries müsste man das mit der Grid-Technik auch hinbekommen.
Nachfolgend noch der Quelltext (also nur den Head) mit dem ich das realisieren wollte. Wer kann mir helfen die richtigen Parameter bei den grid-Einträgen zu setzen?
Vielen Dank schonmal im Voraus!
Peter
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body{
margin: 10px auto;
max-width: 70em;
font-family: sans-serif;
color: #333333;
display: grid;
grid-template-columns: repeat(3, minmax(10em, 1fr));
border: 1px solid;
}
header {
grid-column: span 3;
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: auto;
border-radius: 0px 0.5em 0.5em;
border: 1px solid;
padding: 10px;
margin: 10px;
background: #F1F3F4;
border-color: #d5d5d5;
background-image: url("pic/header.jpg");
text-align: center;
color: white;
}
nav {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 2;
grid-row-end: 3;
border-radius: 0px 0.5em 0.5em;
border: 1px solid;
padding: 10px;
margin: 10px;
background: #fffbf0;
border-color: #e7c157;
}
article {
grid-column-start: auto;
grid-column-end: auto;
grid-row-start: auto;
grid-row-end: auto;
border-radius: 0px 0.5em 0.5em;
border: 1px solid;
padding: 10px;
margin: 10px;
background: #F1F3F4;
border-color: #d5d5d5;
}
.justify {
text-align: justify;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
line-height: 1.5em;
}
footer {
grid-column: span 31;
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: auto;
grid-row-end: auto;
border-radius: 0px 0.5em 0.5em;
border: 1px solid;
padding: 10px;
margin: 10px;
background: #e4ebf2;
background-image: url("pic/footer.jpg");
border-color: #8a9da8;
}
</style>
<title>Lernen</title>
</head>
Optional noch der Body-Bereich…
<body>
<header>
<h1>Lernen</h1>
</header>
<nav>
<ul>
<li><a href='#'>Start</a></li>
<li><a href='#'>Menüpunkt</a>
<ul>
<li><a href='#'>noch ein Punkt</a></li>
<li><a href='#'>wieder ein Punkt</a></li>
<li><a href='#'>letzter Punkt</a></li>
</ul>
</li>
</ul>
</nav>
<article>
<h1>Der Artikel</h1>
<p class="justify">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</p>
</article>
<footer>
</footer>
</body>
-
Hallo Peter,
ich würde vorschlagen, dass du dich mal mit der CSS Eigenschaft
gridbeschäftigst, das könnte für das Leben erleichtern.Beispiele hier.
Rolf
--
sumpsi - posui - clusi