Ganz einfaches CSS Grid Layout bearbeitet von oxo888oxo 12.05.2021 13:10 Hallo 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](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 ~~~
Ganz einfaches CSS Grid Layout bearbeitet von oxo888oxo 12.05.2021 13:12 Hallo 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. 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](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 ~~~
nicht angemeldet nicht angemeldet
