nicht angemeldet
Ganz einfaches CSS Grid Layout
oxo888oxo
Ganz einfaches CSS Grid Layout
oxo888oxo
Rolf B
Matthias Scharwies
Gunnar Bittersmann
Der Martin
HenryHallo
Ich möchte meine Website nochmal von Grund auf neu aufbauen. Das Layout möchte ich gerne per CSS Grid machen.
Das Layout möchte ich extrem einfach halten. Nur eine Spalte mit 4 Zeilen:
- Kopf
- Navigation
- Inhalt
- Fuß
Ich habe jetzt mal den folgenden Code erstellt. Und damit ich gleich von Anfang an Fehler vermeine, möchte ich Euch fragen, ob ich das erstmal richtig gemacht habe mit dem Grundaufbau.
Mir ist natürlich auch sehr wichtig, dass es responsive ist und auch auf Smartphones gut ausschaut.
Die Rahmen habe ich erstmal nur eingebaut, um mir die "Boxen" besser vorstellen zu können.
Angucken kann man es hier: https://spaceart.de/_xxx.php
Gruß Ingo
<!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;
}
body>* {
border: 1px solid grey;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header >
<p>KOPF</p>
</header>
<nav>
<p>NAVIGATION</p>
</nav>
<main>
<p>INHALT</p>
<img src="/_xxx-3.jpg">
</main>
<footer>
<p>FUSS</p>
</footer>
</body>
</html>Quelltext hier
-
Hallo oxo888oxo,
das ist bisher ja noch gar nichts. Nicht mal ein Grid. Suchst Du jemanden, der Dir die Lösung zu 100% präsentiert?
First Step: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid
Immerhin - bisher vermiedene Fehler:
- html hat lang-Attribut
- meta viewport ist gesetzt
- semantische Elemente werden verwendet.
- body ist in der Breite limitiert
- em und vh statt px (außer bei dem Debug-Rändern, aber da ist's mir egal)
Was fehlt:
- Eine H1 Überschrift 😉
- Ein Konzept, für den Seiteninhalt. Wie sollen die Elemente auf der Seite angeordnet werden. Einfach von oben nach unten? Dafür braucht's kein Grid. Das ist Default. Bei nur 4 Abstraktboxen ist mehr aber auch kaum feststellbar.
Also, es fehlt:
- Alles, was wichtig ist.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf
das ist bisher ja noch gar nichts. Nicht mal ein Grid. Suchst Du jemanden, der Dir die Lösung zu 100% präsentiert?
Nein, ich suche nicht eine Fix-und-Fertig Lösung. Ich möchte mich da gerne ganz langsam Schritt für Schritt herantasten, damit ich möglichst alles von Beginn an richtig verstehe.
Was fehlt:
- Eine H1 Überschrift 😉
- Ein Konzept, für den Seiteninhalt. Wie sollen die Elemente auf der Seite angeordnet werden. Einfach von oben nach unten? Dafür braucht's kein Grid. Das ist Default. Bei nur 4 Abstraktboxen ist mehr aber auch kaum feststellbar.
Die Struktur hatte ich doch schon erwähnt:
- Kopf
- Navigation
- Inhalt
- Fuß
Die 4 Elemente sollen tatsächlich einfach von ohne nach unten angeordnet werden. Ich hatte gedacht, dass das auch schon als Grid (mit nur einer Spalte) bezeichnet wird. Aber wenn das nicht nötig ist, umso besser.
Könnte dennoch auch ein Grid sinnvoll sein aus folgendem Grund: Auf meiner Seite sollen die Elemente ja in der oben genannten Reihenfolge von oben nach unten dargestellt werden. Und ohne Grid müsste ich die dann ja auch in der gleichen Reihenfolge im Quelltext anordnen. Mit so einem Grid, kann ich doch die Reihenfolge im Quelltext unabhängig von der dann im Browser dargestellten Reihenfolge wählen.
Also im Quelltest so:
- Inhalt
- Navigation
- Fuß
- Kopf
Und mittels eines Grids im Browser dann so:
- Kopf
- Navigation
- Inhalt
- Fuß
Ist das nicht sinnvoll, um den Inhalt der Seite als erstens im Quelltext zu haben, damit die Suchmaschinen diesen entsprechend als wichtiger ansehen als die anderen Elemente?
Gruß Ingo
-
Servus!
[…] Ich möchte mich da gerne ganz langsam Schritt für Schritt herantasten, damit ich möglichst alles von Beginn an richtig verstehe.
Was fehlt:
- Eine H1 Überschrift 😉
- Ein Konzept, für den Seiteninhalt. Wie sollen die Elemente auf der Seite angeordnet werden. Einfach von oben nach unten? Dafür braucht's kein Grid. Das ist Default. Bei nur 4 Abstraktboxen ist mehr aber auch kaum feststellbar.
Die Struktur hatte ich doch schon erwähnt:
- Kopf
- Navigation
- Inhalt
- Fuß
Die 4 Elemente sollen tatsächlich einfach von ohne nach unten angeordnet werden.
Passt also alles- bis auf die fehlende(n) Überschrift(en). Die kommen wohl noch mit dem Text.
Ich hatte gedacht, dass das auch schon als Grid (mit nur einer Spalte) bezeichnet wird. Aber wenn das nicht nötig ist, umso besser.
Ein Raster ist ja zweidimensional. Bis jetzt werden die Inhalte nach den Default-Stylesheets der Browser (die sich nach der Spec richten) über die gesamte Breite verteilt, brechen bei weiterem Inhalt in die nächste Zeile um und stellen ohne weitere Angaben alles problemlos dar.
HTML ohne CSS ist bereits responsiv!
Die
max-width: 62remist gut, abschreckendes Beispiel ist die Wikipedia.Mit dem CSS-Grid Layout kannst Du jetzt Elemente nebeneinander anordnen, aber auch hier gilt: LESS is MORE
Könnte dennoch auch ein Grid sinnvoll sein aus folgendem Grund: […] Mit so einem Grid, kann ich doch die Reihenfolge im Quelltext unabhängig von der dann im Browser dargestellten Reihenfolge wählen.
Die Suchmaschinen analysieren alles und filtern Navigation und Kopf heraus. Deshalb ist so eine Veränderung der Reihenfolge mit
ordermöglich, aber nicht zu empfehlen. Für „normale“ Nutzer würde sich bei größeren Navigationen ein Skip-Link anbieten.Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
@@Matthias Scharwies
Könnte dennoch auch ein Grid sinnvoll sein aus folgendem Grund: […] Mit so einem Grid, kann ich doch die Reihenfolge im Quelltext unabhängig von der dann im Browser dargestellten Reihenfolge wählen.
Es gibt nicht „die im Browser dargestellte Reihenfolge“, sondern Reihenfolgen je nach Ausgabemedium. Die Reihenfolgen sollten für verschiedene Ausgabemedien i.d.R. übereinstimmen.
Die Suchmaschinen analysieren alles und filtern Navigation und Kopf heraus. Deshalb ist so eine Veränderung der Reihenfolge mit
ordermöglich, aber nicht zu empfehlen.Lass da mal die Suchmaschinen aus dem Spiel. Webseiten werden für Menschen gemacht.
Sehende Screenreader-Nutzer werden ziemlich verwirrt sein, wenn die Inhalte der Seite in einer völlig anderen Reihenfolge vorgelesen werden als sie auf dem Bildschirm zu sehen sind.
Deshalb verbietet sich das Umsortieren bei der visuellen Ausgabe.
😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon-
Hallo LLAP
Sehende Screenreader-Nutzer werden ziemlich verwirrt sein, wenn die Inhalte der Seite in einer völlig anderen Reihenfolge vorgelesen werden als sie auf dem Bildschirm zu sehen sind.
Deshalb verbietet sich das Umsortieren bei der visuellen Ausgabe.
Ah ja alles klar. Das ist natürlich eine sehr gutes Argument. Geht also klar. Ich werde dann im Code und auch bei der Darstellung bei der folgenden Reihenfolge bleiben:
- Header
- Navigation
- Inhalt
- Fußzeile
Gruß Ingo
-
-
Hallo Matthias
Passt also alles- bis auf die fehlende(n) Überschrift(en). Die kommen wohl noch mit dem Text.
Ja genau, die kommen noch im Text. Ich wollte erstmal nur das Grundgerüst machen.
Ein Raster ist ja zweidimensional. Bis jetzt werden die Inhalte nach den Default-Stylesheets der Browser (die sich nach der Spec richten) über die gesamte Breite verteilt, brechen bei weiterem Inhalt in die nächste Zeile um und stellen ohne weitere Angaben alles problemlos dar.
Ah ja, jetzt wird mir das erst richtig klar.
HTML ohne CSS ist bereits responsiv!
Jo stimmt, das hatte ich mir so bisher auch noch garnicht richtig klargemacht.
Die
max-width: 62remist gut, abschreckendes Beispiel ist die Wikipedia.Meinst Du mit "abschreckendes Beispiel" die Tatsache, dass die Wikipedia die Texte über die volle Breite darstellt, was dann ja zu sehr langen und schwer lesbaren Zeilen führt? Also ist das der Grund, warum Du das bei denen abschreckend findest? Oder hattest Du da doch was anderes gemeint?
Mit dem CSS-Grid Layout kannst Du jetzt Elemente nebeneinander anordnen, aber auch hier gilt: LESS is MORE
Eine Anordnung nebeneinander habe ich ja nicht vor. Und LESS is MORE ist ja genau mein Ding :-)
Die Suchmaschinen analysieren alles und filtern Navigation und Kopf heraus. Deshalb ist so eine Veränderung der Reihenfolge mit
ordermöglich, aber nicht zu empfehlen.OK, Du meinst also, wenn ich die Elemente Header, Navigation, Main und Footer semantisch mit <header>, <nav>, <main> und <footer> mache, sind die Suchmaschienen schlau genug, dass zu erkennen. Und die Suchmaschinen erkennen dann eben auch, dass der "wichtige" Inhalt im <main> Element ist. Habe ich Dich da richtig verstanden?
Wenn ja, wäre extra für die Reihenfolge im Code ein Grid anzulegen überflüssig. Ganz abgesehen davon, dass dann alte Browser die Seite mit so einem Grid CSS wieder nicht richtig darstellen können. Korrekt?
Für „normale“ Nutzer würde sich bei größeren Navigationen ein Skip-Link anbieten.
Meine Navigation wird nicht so sehr groß werden. Evtl. bekomme ich die Naviationspunke nebeneinander hin. Ansonsten werde ich sie untereinander machen. Und in dem Fall dann für die Smartphone-Darstellung evtl. mit einen Link (Burger-Menü und "Manü öffnen") auf- und einklappbar machen. Ich habe allerdings auch schon Leute getroffen, die wussten als User damit dann nichts anzufangen. Darum bin ich eigentlich schon ein Fan von Navigationen, wo man gleich alles sieht und nicht erst noch was aufklappen oder so muss.
Gruß Ingo
-
Hallo,
Die
max-width: 62remist gut, abschreckendes Beispiel ist die Wikipedia.Meinst Du mit "abschreckendes Beispiel" die Tatsache, dass die Wikipedia die Texte über die volle Breite darstellt, was dann ja zu sehr langen und schwer lesbaren Zeilen führt? Also ist das der Grund, warum Du das bei denen abschreckend findest?
genau das. Obwohl das auch individuell sehr verschieden ist. Sehr lange Zeilen sind angeblich schwer zu lesen, weil man die Folgezeile nach dem Umbruch erst wieder "finden" muss. Aber das stört mich im allgemeinen weniger als extrem kurze Zeilen mit sehr vielen Umbrüchen (z.B. in schmalen Textboxen oder bei einem Mehrspalten-Layout).
Aber gut, ich bin auch jemand, der um die breiten 16:9-Bildschirmformate einen Bogen macht, weil ich die für unpraktisch halte. Zuhause habe ich zwei 4:3-Bildschirme (1600x1200), da ist die Horizintale nicht mehr gar so stark betont. Und am Arbeitsplatz drehe ich meistens einen der beiden 16:9-Bildschirme in die Vertikale.
Die Suchmaschinen analysieren alles und filtern Navigation und Kopf heraus. Deshalb ist so eine Veränderung der Reihenfolge mit
ordermöglich, aber nicht zu empfehlen.OK, Du meinst also, wenn ich die Elemente Header, Navigation, Main und Footer semantisch mit <header>, <nav>, <main> und <footer> mache, sind die Suchmaschienen schlau genug, dass zu erkennen. Und die Suchmaschinen erkennen dann eben auch, dass der "wichtige" Inhalt im <main> Element ist. Habe ich Dich da richtig verstanden?
Ja, aber beherzige auch Gunnars Rat und betrachte die Sache mehr aus der Perspektive von Menschen. Denn für die machst du die Website schließlich.
Und in dem Fall dann für die Smartphone-Darstellung evtl. mit einen Link (Burger-Menü und "Manü öffnen") auf- und einklappbar machen.
Ich habe allerdings auch schon Leute getroffen, die wussten als User damit dann nichts anzufangen. Darum bin ich eigentlich schon ein Fan von Navigationen, wo man gleich alles sieht und nicht erst noch was aufklappen oder so muss.Wohl wahr. Als ich dieses komische Icon, in dem ich immer noch keinen Hamburger erkennen kann, zum ersten Mal bewusst gesehen habe, wusste ich damit auch nichts anzufangen.
Live long and
proshealthy,
Martin--
Als Kind habe ich gelernt, dass die Vorsilbe un die Aussage eines deutschen Wortes ins Gegenteil verkehrt.
Stimmt aber nicht: Unkosten sind auch Kosten! -
Servus!
Hallo Matthias
Passt also alles- bis auf die fehlende(n) Überschrift(en). Die kommen wohl noch mit dem Text.
Ja genau, die kommen noch im Text. Ich wollte erstmal nur das Grundgerüst machen.
Ein Raster ist ja zweidimensional. Bis jetzt werden die Inhalte nach den Default-Stylesheets der Browser (die sich nach der Spec richten) über die gesamte Breite verteilt, brechen bei weiterem Inhalt in die nächste Zeile um und stellen ohne weitere Angaben alles problemlos dar.
Ah ja, jetzt wird mir das erst richtig klar.
HTML ohne CSS ist bereits responsiv!
Jo stimmt, das hatte ich mir so bisher auch noch garnicht richtig klargemacht.
Ja. Das kommt einem erst, wenn man mal die ganzen CSS-Regeln weglässt. Manchmal sieht's da besser aus als mit Styling. 😀
Die
max-width: 62remist gut, abschreckendes Beispiel ist die Wikipedia.Meinst Du mit "abschreckendes Beispiel" die Tatsache, dass die Wikipedia die Texte über die volle Breite darstellt, was dann ja zu sehr langen und schwer lesbaren Zeilen führt? Also ist das der Grund, warum Du das bei denen abschreckend findest? Oder hattest Du da doch was anderes gemeint?
Genau, das fehlt nur ein
body { max-width: 62rem;}und es wäre gleich viel besser. Leute wie @Der Martin würden es gar nicht bemekren; Nutzern auf größeren Viewports hätten was davon.Mit dem CSS-Grid Layout kannst Du jetzt Elemente nebeneinander anordnen, aber auch hier gilt: LESS is MORE
Eine Anordnung nebeneinander habe ich ja nicht vor. Und LESS is MORE ist ja genau mein Ding :-)
Die Suchmaschinen analysieren alles und filtern Navigation und Kopf heraus. Deshalb ist so eine Veränderung der Reihenfolge mit
ordermöglich, aber nicht zu empfehlen.OK, Du meinst also, wenn ich die Elemente Header, Navigation, Main und Footer semantisch mit <header>, <nav>, <main> und <footer> mache, sind die Suchmaschienen schlau genug, dass zu erkennen. Und die Suchmaschinen erkennen dann eben auch, dass der "wichtige" Inhalt im <main> Element ist. Habe ich Dich da richtig verstanden?
Ja!
Wenn ja, wäre extra für die Reihenfolge im Code ein Grid anzulegen überflüssig. Ganz abgesehen davon, dass dann alte Browser die Seite mit so einem Grid CSS wieder nicht richtig darstellen können. Korrekt?
Ja
Für „normale“ Nutzer würde sich bei größeren Navigationen ein Skip-Link anbieten.
Meine Navigation wird nicht so sehr groß werden. Evtl. bekomme ich die Naviationspunke nebeneinander hin. Ansonsten werde ich sie untereinander machen. Und in dem Fall dann für die Smartphone-Darstellung evtl. mit einen Link (Burger-Menü und "Manü öffnen") auf- und einklappbar machen. Ich habe allerdings auch schon Leute getroffen, die wussten als User damit dann nichts anzufangen. Darum bin ich eigentlich schon ein Fan von Navigationen, wo man gleich alles sieht und nicht erst noch was aufklappen oder so muss.
4- oder 5 Links würde ich nicht verstecken, mehr schon. Ja, das Hamburger-Icon ist neu, es wird aber immer bekannter.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo Matthias
4- oder 5 Links würde ich nicht verstecken, mehr schon. Ja, das Hamburger-Icon ist neu, es wird aber immer bekannter.
Wenn man sich doch für eine Aufklapp-Navi auf keinen Displays (Handy) entscheidet, kann man ja z.B. auch einen schönen Button machen in dem links der Burger und rechts daneben ein Text ist "Navigation" oder "Menü aufklappen".
Dann holt man auch die neuen User, die sich noch nicht so gut im Netz zurechtfinden, vielleicht besser ab.
Oder?
Gruß Ingo
-
-
-
Hallo Rolf,
Was fehlt:
- Eine H1 Überschrift 😉
Ist doch keine Pflicht. Oder hat sich da was geändert?
Gruss
Henry--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
-
Hallo
Ich habe jetzt nochmal einen Versuch gemacht. Da habe ich die 4 Bereiche <header>, <nav>, <main> und <footer> mit unterschiedlichen Hintergrundfarben einfärben. Der Zweck ist, dass ich damit das Layout-Gerüst für mich erstmal leichter sichtbar und verstehbar mache.
Jetzt kleben die Elemente ja alle oben. Wenn ich die Elemente jetzt mit Inhalten füllen, werden die ja jeweils nach unten länger.
Wenn ich aber nun z.B. im <main> nur recht wenig Inhalt habe, wird der Bereich ja immer noch recht kürz. Und das schaut dann ja schon nicht schön aus. Wie mache ich es denn, dass in meinem Beispiel der <main> Bereich mindestens den restlichen Platz in der Höhe (nach Abzug von header, nav und footer einnimmt? Und wenn das geht, ist es denn überhaupt sinnvoll, dass so zu machen? Oder fängt man sich da dann wieder andere Folge-Probleme ein?
Hier nun mein neuer Versuch-Code:
<!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; } 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>Und hier noch ein Link, um sich das anzugucken: https://spaceart.de/_xxx2.php
Gruß Ingo
-
Servus!
Hallo
Ich habe jetzt nochmal einen Versuch gemacht. Da habe ich die 4 Bereiche <header>, <nav>, <main> und <footer> mit unterschiedlichen Hintergrundfarben einfärben. Der Zweck ist, dass ich damit das Layout-Gerüst für mich erstmal leichter sichtbar und verstehbar mache.
Jetzt kleben die Elemente ja alle oben. Wenn ich die Elemente jetzt mit Inhalten füllen, werden die ja jeweils nach unten länger.
Wenn ich aber nun z.B. im <main> nur recht wenig Inhalt habe, wird der Bereich ja immer noch recht kürz. Und das schaut dann ja schon nicht schön aus.
Wie mache ich es denn, dass in meinem Beispiel der <main> Bereich mindestens den restlichen Platz in der Höhe (nach Abzug von header, nav und footer einnimmt?
Das ist ein Use case für Grid Layout: CSS/Tutorials/Grid/Grid-Items#Anwendungsbeispiele
body { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: 150px 1fr 1fr 100px; min-height: 100vh; }Du lässt den Body mit min-height: 100vh über die ganze Viewporthöhe gehen. Dieser Platz wird mit grid-template-rows auf header (1.Wert), footer (letzter Wert) und je 1fr aufgeteilt. Das sind Bruchteile des noch verfügbaren Platzes. Früher wurde sowas mit JS berechnet, heute ist das in CSS drin.
Und wenn das geht, ist es denn überhaupt sinnvoll, dass so zu machen? Oder fängt man sich da dann wieder andere Folge-Probleme ein?
Normal nicht, falls ja, müsste man gucken, was mn nicht bedacht hat oder wie man das umgeht.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo Matthias
Das ist ein Use Case für Grid Layout
Jo alles klar. Das mit den CSS Grid Layouts ist ja schon echt großartig. Ich bin davon ganz begeistert.
Anderseits soll meine Seite ja wirklich so simpel wie möglich mit den einfachsten Bordmitteln gebaut sein. Vor Allem eben auch, damit sie auch auf echt alten Kisten und Handys funktioniert. Und da wäre so ein Grid ja eher ein gewisses Risiko, denke ich.
Für meine geplante sehr einfache Seitenstruktur (nur 4 Elemente untereinander), gibt es ja bisher nur einen Grund, der evtl. für ein Grid sprechen würde. Und zwar die Sache mit der Höhe des Main-Elements.
Und das wird ja nur dann zum "Problem", wenn ich später Unterseiten mit sehr wenig Inhalt habe.
Und das wiederum kann ich doch vermeiden, indem ich eben doch genug Inhalt in alle Unterseiten packe und auch eine nicht zu dünne Header Grafik verwende. Und den Footer kann ich ja auch etwas fetter machen. Damit müsste sich das "Problem" der Main-Element-Höhe doch auch gut in den Griff kriegen lassen. Und ich könnte weiterhin auf ein Grid verzichten.
Stimmst Du mir da soweit zu? Oder habe ich was vergessen bei meinen Überlegungen?
Gruß Ingo
-
Hallo Ingo,
Anderseits soll meine Seite ja wirklich so simpel wie möglich mit den einfachsten Bordmitteln gebaut sein. Vor Allem eben auch, damit sie auch auf echt alten Kisten und Handys funktioniert. Und da wäre so ein Grid ja eher ein gewisses Risiko, denke ich.
das hängt von der Komplexität des Layouts ab. In deinem Fall, bzw. mit dem von Matthias vorgeschlagenen grid-Ansatz, würden bei alten Geräten oder Browsern, die grid nicht kennen, einfach die Information fehlen, wie hoch die Elemente sein sollen. Ergebnis: Jede der vier Boxen ist so hoch wie nötig, so hoch es ihr Inhalt erfordert. Unter den Umständen nicht weiter schlimm, denn alle Inhalte bleiben erreichbar und die Seite bleibt bedienbar.
Für meine geplante sehr einfache Seitenstruktur (nur 4 Elemente untereinander), gibt es ja bisher nur einen Grund, der evtl. für ein Grid sprechen würde. Und zwar die Sache mit der Höhe des Main-Elements.
Und das wird ja nur dann zum "Problem", wenn ich später Unterseiten mit sehr wenig Inhalt habe.
Auch dann ist es kein Problem, sondern nur ein kleiner kosmetischer Makel - das main-Element bzw. die gesamte Seite füllt das Browserfenster nicht komplett aus. So what?
Und das wiederum kann ich doch vermeiden, indem ich eben doch genug Inhalt in alle Unterseiten packe und auch eine nicht zu dünne Header Grafik verwende. Und den Footer kann ich ja auch etwas fetter machen. Damit müsste sich das "Problem" der Main-Element-Höhe doch auch gut in den Griff kriegen lassen. Und ich könnte weiterhin auf ein Grid verzichten.
Vorsicht: Die Spanne der Größe (Auflösung, Pixelanzahl) von Anzeigegeräten ist riesig. Machst du header und/oder footer entsprechend groß, bleibt nur noch wenig oder gar kein Platz, wenn man die Seite auf einem Browser mit grid-Unterstützung, aber sehr kleinem Bildschirm anschaut.
Umgekehrt bräuchtest du für einen Besucher mit einem 40"-Bildschirm und 4k-Auflösung schon sehr viel Füllmaterial, das die Elemente bei anderen Besuchern wieder unerwünscht groß macht.Ich würde deshalb lieber das einfache grid-Layout verwenden und in Kauf nehmen, dass es bei Besuchern mit älterem Equipment eben nicht ganz so aussieht wie gewünscht.
Live long and
proshealthy,
Martin--
Als Kind habe ich gelernt, dass die Vorsilbe un die Aussage eines deutschen Wortes ins Gegenteil verkehrt.
Stimmt aber nicht: Unkosten sind auch Kosten!-
Hallo Martin
das hängt von der Komplexität des Layouts ab. In deinem Fall, bzw. mit dem von Matthias vorgeschlagenen grid-Ansatz, würden bei alten Geräten oder Browsern, die grid nicht kennen, einfach die Information fehlen, wie hoch die Elemente sein sollen. Ergebnis: Jede der vier Boxen ist so hoch wie nötig, so hoch es ihr Inhalt erfordert. Unter den Umständen nicht weiter schlimm, denn alle Inhalte bleiben erreichbar und die Seite bleibt bedienbar.
Verstehe ich das folgendermaßen richtig? Mit dem von Matthias vorgeschlagenen Grid-Ansatz kann ich die die Höhe des Main-Elements so einstellen, dass es eben zuzusagen den Bildschirm füllt, wenn nicht genug Inhalt drin ist. Und wenn dann ein Gerät auf meine Seite zugreift, das Grid noch nicht kann, ergibt sich quasi sowas wie ein FallBack auf den jetzigen Zustand ohne Grid.
Gruß Ingo
-
Hallo,
Mit dem von Matthias vorgeschlagenen Grid-Ansatz kann ich die die Höhe des Main-Elements so einstellen, dass es eben zuzusagen den Bildschirm füllt, wenn nicht genug Inhalt drin ist. Und wenn dann ein Gerät auf meine Seite zugreift, das Grid noch nicht kann, ergibt sich quasi sowas wie ein FallBack auf den jetzigen Zustand ohne Grid.
genau - und zwar deshalb, weil die CSS-Spezifikation von Anfang an verlangt hat, dass die Browser unbekannte CSS-Eigenschaften oder fehlerhafte Werte komplett ignorieren sollen.
Live long and
proshealthy,
Martin--
Als Kind habe ich gelernt, dass die Vorsilbe un die Aussage eines deutschen Wortes ins Gegenteil verkehrt.
Stimmt aber nicht: Unkosten sind auch Kosten!
-
-
-
-
@@Matthias Scharwies
Das ist ein Use case für Grid Layout: CSS/Tutorials/Grid/Grid-Items#Anwendungsbeispiele
Wobei das mit Flexbox auch machbar ist.
body { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: 150px 1fr 1fr 100px; min-height: 100vh; }Du lässt den Body mit min-height: 100vh über die ganze Viewporthöhe gehen. Dieser Platz wird mit grid-template-rows auf header (1.Wert), footer (letzter Wert) und je 1fr aufgeteilt.
Aber bitte nicht so!
Es ist eine sehr schlechte Idee, den Inhalt des Headers in 150px zwängen zu wollen – ohne jegliche Kenntnis, wieviel Platz der Inhalt beim $Nutzer tatsächlich beansprucht.
grid-template-rows: auto 1fr 1fr autoscheint mir da deutlich sinnvoller.BTW:
body { min-height: 100vh }erzwingt vertikales Scrollen – wenn man sich nicht um den default margin kümmert.😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon-
Hallo,
Es ist eine sehr schlechte Idee, den Inhalt des Headers in 150px zwängen zu wollen – ohne jegliche Kenntnis, wieviel Platz der Inhalt beim $Nutzer tatsächlich beansprucht.
mit der Kritik gehe ich prinzipiell mit. Aber dann denke bitte auch zu Ende und setze die Höhe für nav (zweiter Wert) auch noch auf auto. Du möchstest doch nicht festlegen, dass Navigation und main-Element unbedingt dieselbe Höhe haben.
BTW:
body { min-height: 100vh }erzwingt vertikales Scrollen – wenn man sich nicht um den default margin kümmert.Auch ein guter Punkt.
Live long and
proshealthy,
Martin--
Als Kind habe ich gelernt, dass die Vorsilbe un die Aussage eines deutschen Wortes ins Gegenteil verkehrt.
Stimmt aber nicht: Unkosten sind auch Kosten! -
Hallo LLAP
grid-template-rows: auto 1fr 1fr autoscheint 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
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]]
-
Hallo Ingo,
grid-template-rows: auto 1fr 1fr autoscheint mir da deutlich sinnvoller.Ich habe das jetzt mal so eingebaut. Code siehe unten.
Das ist ein Use case für Grid Layout: CSS/Tutorials/Grid/Grid-Items#Anwendungsbeispiele
ich hatte dir das Anwendungsbeispiel (bitte hier klicken) 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
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.
Ja! Probier's doch mal aus.
Oder verstehe ich das falsch?
Müsste die Zeile nicht wie folgt aussehen? grid-template-columns: 1fr;
Untersuche Deine Webseite mit dem Seiteninspektor. Und probiere aus!
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo Matthias
Ja! Probier's doch mal aus.
Ja stimmt natürlich :-) Ich habe jetzt mal weiter gebaut. Code siehe unten. Ich habe da aber noch ein echtes Brett vor dem Kopf. Und zwar bei der Höhe der Zeilen. Im Grunde möchte ich es ja so haben:
-
Header Soll automatisch so hoch sein, wie dessen Inhalt (z.B. eine Header Grafik).
-
Nav Soll automatisch so hoch sein, wie dessen Inhalt.
-
Main Wenn alle 4 Bereiche zusammen die Höhe des Browerfensters nicht füllen, soll dieser Bereich einfach den fehlenden Platz auffüllen.
-
Footer Soll automatisch so hoch sein, wie dessen Inhalt.
Müsste das nicht mit folgendem Code gehen? grid-template-rows: auto auto 1fr auto
Tut es aber leider nicht. Schaut hier: https://spaceart.de/_xxx4.php
Wenn alle 4 Bereiche zusammen die Höhe des Browserfensters nicht vollbekommen, wachsen alle 4 Bereiche in der Höhe. Dabei sollte doch nur der Main-Bereich wachsen.
Ich kapiere das leider nicht. Was ist denn da falsch?
Gruß Ingo
<!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; min-height: 100vh; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto grid-template-areas: "header" "nav" "main" "footer"; grid-gap:1em; } 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> <ul> <li><a href="#">NAVIGATION 1</a></li> <li><a href="#">NAVIGATION 2</a></li> <li><a href="#">NAVIGATION 3</a></li> <li><a href="#">NAVIGATION 4</a></li> <li><a href="#">NAVIGATION 5</a></li> </ul> </p> </nav> <main> <h1>INHALT</h1> <h2>Feine Sachen</h2> <p> Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen. Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen. Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen. Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen. Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen. Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen. Hier soll dann der [bla bla bla] <p> </main> <footer> <p> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </p> </footer> </body> </html>-
Hallo oxo888oxo,
erste Aktion bei unerklärlichem Verhalten einer Seite: Entwicklerwerkzeuge. Erreichbar im Browser Ihres geringsten Misstrauens mit der Taste F12 oder der Tastenkombination
Strg+Umschalt+I(bzw.Ctrl+Shift+Ifür die Kids der 1980er).Inspiziere damit die CSS Eigenschaften des body-Elements.
Bei mir ist da was fett rot. Und warum? Ich sehe was nicht, was Du zu sehen glaubst 😉
body { max-width: 62rem; margin: 0rem auto 0rem auto; min-height: 100vh; display: grid; grid-template-columns: 1fr;grid-template-rows: auto auto 1fr auto grid-template-areas: "header" "nav" "main" "footer";grid-gap:1em; }Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf B
Ich sehe was nicht, was Du zu sehen glaubst 😉
Ach Mensch, sowas peinliches. Dieses kleine Biest hat sich doch echt einfach weggeschlichen. Unfassbar. Ich habs sofort wieder zu seinem Plätzchen gebeten. Und nun funxt es. Ich danke Dir sehr.
Gruß Ingo
-
-
-
-
-
-
-