nicht angemeldet
html-Seite in CSS Grid Container laden
0 0 0 
Rolf B
html-Seite in CSS Grid Container laden
Matthias ScharwiesHi zusammen,
als ich zuletzt HTML genutzt habe um eine Website zu bauen dürfte das so um die Jahrtausendwende gewesen sein. Jetzt möchte ich für ein kleines Projekt wieder damit starten und habe mir viele Neuerungen hier angelesen.
Ich möchte die Seite über CSS Grid formatieren, allerdings scheitere ich schon an Kleinigkeiten.
Mein Problem ist konkret, dass ich gerne eine Hauptseite hätte und formatiere und dann über die Navigation die einzelnen Unterseiten in einem Grid-Container aufrufen möchte.
Als Workaround kam mir nur in den Sinn die Struktur der Webseite in jeder Unterseite komplett mit abzubilden, was natürlich unsinn ist, da man dann ja jede einzelne Seite bei Änderungen an der Hauptseite anpassen müsste und es zudem das Projekt noch unnötig aufbläht.
-
Mein Problem ist konkret, dass ich gerne eine Hauptseite hätte und formatiere und dann über die Navigation die einzelnen Unterseiten in einem Grid-Container aufrufen möchte.
Oh. Offenbar bist Du bei Frames stehen geblieben. Das passt zu ...
als ich zuletzt HTML genutzt habe um eine Website zu bauen dürfte das so um die Jahrtausendwende gewesen sein.
Naja. Damals hatte England noch ein Königin, die selbst mit dem Schwert auf Männer einschlug. Anno 2023 arbeitet man eher mit serverseitiger Logik. Das heißt, die Webseiten werden auf dem Server (oft, aber ńicht immer mit PHP) aus Daten und Templates gebaut und sodann im Browser via CSS formatiert. Ich weiß, dass das zugleich eine gute und schlechte Nachricht ist. Vor allem wird Dir Vieles erst mal neu vorkommen - bis Du merkst, dass etliche alte Prinzipien weiter gelten...
Ich versuche Dich mal mit einem einfachem Beispiel zu „fangen“ - statt mit „Hallo Welt" damit und natürlich PHP.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Alles neu lernen</title> </head> <body> <header> <?=file_get_contents( '/site-parts/site-header.part' );?> <link rel="stylesheet" href="/style.css"> </header> <nav> <?=file_get_contents( '/site-parts/nav.part' );?> </nav> <main> <?=file_get_contents( '/site-parts/start.part' );?> </main> <footer> <?=file_get_contents( '/site-parts/footer.part' );?> </footer> </body> </html>Speichere das als /index.php,
dazu die /style.css mit den Formatierungen (eben auch dem Grid…) und einen Ordner /site-parts mit den Dateien
- header.part (Website Überschrift und Geraffel)
- nav.part (Navigation als Linkliste)
- start.part (Überschrift und Inhalt der ersten Seite)
- footer.part (Enthält oftmals Links zu Impressum, Datenschutzerklärung ...)
(Die muss der Webserserver lesen können.)
Wenn das klappt kannst Du weiter machen und lernen, wie man mit dem selben Skript eine Webseite mit anderem Inhalt (also etwas anderes als die /site-parts/start.part inkludiert) ausliefert...
-
Danke für die ausführliche Antwort! Tatsächlich bin ich ein bisschen an den Frames hängen geblieben und vermisse scheinbar deshalb diese Funktion... 😉
Ich weiß leider nicht ob ich mit PHP zu dem Ergebnis komme das ich brauche.
Für mein Projekt ist die Website (bzw. eher das Webinterface) eher die Spitze des Eisbergs und wird im Hintergrund von Python mit Django bedient. Letztendlich gibt das Interface nur Infos aus einer Datenbank aus bzw. liefert über Eingaben wieder Daten für die Datenbank. Beides wird jeweils über Python aufbereitet.
Es wird also keine "normale" Website die irgendwelche statischen Textblöcke oder ähnliches als Information vorhält.
Django kommt sicherlich auch mit PHP zurecht, die Frage ist aber ob das für mich Zielführend ist das Frontend komplexer als das Backend zu machen. Hatte gehofft mit HTML/CSS Boardmitteln da hin zu kommen wo ich möchte... 😉
Werde mir deinen Vorschlag aber auf jeden Fall genau ansehen und mal ein bisschen damit rumbasteln.
-
Ich weiß leider nicht ob ich mit PHP zu dem Ergebnis komme das ich brauche.
Die Sprache ist, wie Du sicher schon weißt, ziemlich zweitrangig.
Für mein Projekt ist die Website (bzw. eher das Webinterface) eher die Spitze des Eisbergs und wird im Hintergrund von Python mit Django bedient.
Na dann weißt Du ja eigentlich Bescheid. Einfach keine Frames mehr...
die Frage ist aber ob das für mich Zielführend ist das Frontend komplexer als das Backend zu machen.
Tja. Frontends haben eigene Gesetze. Das das Backend oft simpler erscheint als das Frontend weiß jeder, der schon mal in Python einen simplen Taschenrechner nachgebaut hat.
Und am Ende des Tages steht eh die Erkenntnis: „Das ist alles nur Text!“
-
-
Hallo Ankou,
ich finde grid im Vergleich zu CSS-Floats und Flexbox wirklich intuitiv.
Zusätzlich zu dem, was Raketenwilii sagte, gibt's im Wiki ein Tutorial:
Frohe Ostern!
-
Hallo ankou,
wie machst Du es denn bislang? Du musst doch auch jetzt deine Daten in einen HTML Rahmen einbetten.
Generierst Du den im Python-Script? Oder hast Du im Moment ein Frameset?
Rolf
--
sumpsi - posui - obstruxi-
Guten Morgen ankou,
Für mein Projekt ist die Website (bzw. eher das Webinterface) eher die Spitze des Eisbergs und wird im Hintergrund von Python mit Django bedient. Letztendlich gibt das Interface nur Infos aus einer Datenbank aus bzw. liefert über Eingaben wieder Daten für die Datenbank. Beides wird jeweils über Python aufbereitet.
wie machst Du es denn bislang? Du musst doch auch jetzt deine Daten in einen HTML Rahmen einbetten.
Kurz recherchiert:
https://docs.djangoproject.com/en/4.2/ref/templates/language/#template-inheritance
Dieses HTML-Template ist von ca. 2004.
- Entwirf dir ein modernes Templates in HTML5 mit den „neuen“ HTML-Elementen wie header, nav und footer.
→ HTML/Tutorials/Seitenstrukturierung
- Bau Dir ein ansprechendes CSS, das responsiv ist.
- Bau Dein template in Django entsprechend um; einige Sachen, die im PHP-Templates-Tutorial erwähnt werden, wie die Markierung der aktuellen Seite, sind heute eben Konvention.
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
-