Neuer Versuch. Frage zur Höhe der Elemente. bearbeitet von oxo888oxo 13.05.2021 15:49 Hallo LLAP `grid-template-rows: auto 1fr 1fr auto` scheint mir da deutlich sinnvoller. Ich habe das jetzt mal so eingebaut. Code siehe unten. >Aber da kommt dann leider was ganz anderes heraus als gewollt. Schau hier: [https://spaceart.de/_xxx3.php](https://spaceart.de/_xxx3.php) In der Zeile grid-template-columns: 1fr 3fr 1fr; sind doch jetzt auch 3 Spalten im Grid, oder nicht? Ich brauche doch nur eine Spalte. Oder verstehe ich das falsch? Müsste die Zeile nicht wie folgt aussehen? grid-template-columns: 1fr; [[EDIT]] Sorry, ich bin mit dem Handy in Deinen Post gekommen und habe drin rumgepfuscht. Matthias Scharwies [[/EDIT]]
Neuer Versuch. Frage zur Höhe der Elemente. bearbeitet von Matthias Scharwies 13.05.2021 16:40 Hallo LLAP >> `grid-template-rows: auto 1fr 1fr auto` scheint mir da deutlich sinnvoller. > Ich habe das jetzt mal so eingebaut. Code siehe unten. Hallo Ingo, >> Das ist ein Use case für Grid Layout: [CSS/Tutorials/Grid/Grid-Items#Anwendungsbeispiele](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Grid-Items#Anwendungsbeispiele) ich hatte dir das Anwendungsbeispiel verlinkt. Das hat eine andere HTML-Struktur mit mehreren Kindelementen (neben dem main noch 2 aside). Deshalb hat das Beispiel 3 Spalten und das main ist 2 Felder hoch. >Aber da kommt dann leider was ganz anderes heraus als gewollt. Schau hier: [https://spaceart.de/_xxx3.php](https://spaceart.de/_xxx3.php) >In der Zeile >grid-template-columns: 1fr 3fr 1fr; >sind doch jetzt auch 3 Spalten im Grid, oder nicht? Ich brauche doch nur eine Spalte. Oder verstehe ich das falsch? Ja! Probier's doch mal aus: >Müsste die Zeile nicht wie folgt aussehen? >grid-template-columns: 1fr; Untersuche Deine Webseite mit dem Seiteninspektor. Und probiere aus!
Neuer Versuch. Frage zur Höhe der Elemente. bearbeitet von Matthias Scharwies 13.05.2021 16:33 Hallo LLAP > `grid-template-rows: auto 1fr 1fr auto` scheint mir da deutlich sinnvoller. Ich habe das jetzt mal so eingebaut. Code siehe unten. Aber da kommt dann leider was ganz anderes heraus als gewollt. Schau hier: [https://spaceart.de/_xxx3.php](https://spaceart.de/_xxx3.php) In der Zeile grid-template-columns: 1fr 3fr 1fr; sind doch jetzt auch 3 Spalten im Grid, oder nicht? Ich brauche doch nur eine Spalte. Oder verstehe ich das falsch? Müsste die Zeile nicht wie folgt aussehen? grid-template-columns: 1fr; ~~~ <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS-Grid-Layout</title> <style> body { max-width: 62rem; margin: 0rem auto 0rem auto; border: 1px solid grey; min-height: 100vh; display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto 1fr 1fr auto } body>* { border: 1px solid grey; } header { background:tomato; } nav { background:lightgreen; } main { background:gold; } footer { background:lightblue; } img { max-width: 100%; height: auto; } </style> </head> <body> <header > <p> KOPF<br> Hier soll später eine schöne Grafik sitzen. So in der Art wie ein Banner. </p> </header> <nav> <p> NAVIGATION<br> Hier wird die Navigation erscheinen. </p> </nav> <main> <h1>INHALT</h1> <p> Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen <p> <h2>Feine Sachen</h2> <p> Was das für feine Sachen werden, wird noch nicht verraten :-) </p> </main> <footer> <p> Fuß<br> Hier werde ich meine Füße zeigen :-) Hehe ... ne natürlich nicht. Hier kommt der klassische Krempel hin, der in so einen Footer gehört. </p> </footer> </body> </html>Quelltext hier ~~~
Neuer Versuch. Frage zur Höhe der Elemente. bearbeitet von oxo888oxo 13.05.2021 15:51 Hallo LLAP > `grid-template-rows: auto 1fr 1fr auto` scheint mir da deutlich sinnvoller. Ich habe das jetzt mal so eingebaut. Code siehe unten. Aber da kommt dann leider was ganz anderes heraus als gewollt. Schau hier: [https://spaceart.de/_xxx3.php](https://spaceart.de/_xxx3.php) In der Zeile grid-template-columns: 1fr 3fr 1fr; sind doch jetzt auch 3 Spalten im Grid, oder nicht? Ich brauche doch nur eine Spalte. Oder verstehe ich das falsch? ~~~ <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS-Grid-Layout</title> <style> body { max-width: 62rem; margin: 0rem auto 0rem auto; border: 1px solid grey; min-height: 100vh; display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto 1fr 1fr auto } body>* { border: 1px solid grey; } header { background:tomato; } nav { background:lightgreen; } main { background:gold; } footer { background:lightblue; } img { max-width: 100%; height: auto; } </style> </head> <body> <header > <p> KOPF<br> Hier soll später eine schöne Grafik sitzen. So in der Art wie ein Banner. </p> </header> <nav> <p> NAVIGATION<br> Hier wird die Navigation erscheinen. </p> </nav> <main> <h1>INHALT</h1> <p> Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen <p> <h2>Feine Sachen</h2> <p> Was das für feine Sachen werden, wird noch nicht verraten :-) </p> </main> <footer> <p> Fuß<br> Hier werde ich meine Füße zeigen :-) Hehe ... ne natürlich nicht. Hier kommt der klassische Krempel hin, der in so einen Footer gehört. </p> </footer> </body> </html>Quelltext hier ~~~
nicht angemeldet nicht angemeldet
