So ein... Grid :)

TBone73 · 8. Februar 2022

Hallo Zusammen,

bin "altNeu" in html unterwegs. In den 90ern habe ich damit schon einiges realisiert (privat - nichts, was man kennen müsste) und hab nun neu angefangen (auch weil ich gerade eine Umschulung zum Fachinformatiker mache).

Früher habe ich mit "i-frames" hantiert.......

Kurz um: Webseite (Grob) erstellt und mit Grid versehen - echt eine tolle Sache, aber nun zu einem Verständnisproblem.

ich habe: "header header header"
"nav main aside"
"footer footer footer"

Soweit so gut - klappt alles - CSS Atribute und, und, und

Nun möchte ich aber, wenn man einen Link im Nav-Bereich auswählt (Bsp. impressum.html), dass diese Seite im Main-Frame angezeigt wird. Finde aber nirgends etwas darüber. Habe schon mit (<li><a href="impressum.html" target="main">Impressum</a></li>) und ähnlichem versucht, aber gescheitert. Nachdem ich seit mehr als 20 Jahren nichts mehr gemacht habe - auch nichts gelesen usw. bin ich als Anfänger echt aufgeschmissen und brauche eure Hilfe.

Vielen lieben Dank und bitte nicht so laut lachen.

Code (html):

HTML:

<!DOCTYPE html>

<html lang="de">

        <meta charset="UTF-8">

        <meta name="author" content="Mike, Andreas Wolf">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="style.css">

 

            <title>Bewerbungspage</title>

<head>

</head>



<body>

    <div class="container">

        <header>

            <h1>Bewerbung</h1>

        </header>

        <nav>

            <ul>

                <li><a href="index.html" target="main">Home</a></li>

                <li><a href="lebenslauf.html" target="main">Lebenslauf</a></li>

                <li><a href="zeugnis.html" target="main">Zeugnisse</a></li>

                <li><a href="impressum.html" target="main">impressum</a></li>

            </ul>   

        </nav>

        <main></main>

        <aside></aside>

        <footer></footer>

    </div>

</body>

</html>

Nixdorf · 8. Februar 2022

Es gibt inzwischen in CSS native Grids. Frames werden heutzutage eigentlich nur noch für Cross-Domain-Integration genutzt.

BeBur · 8. Februar 2022

Meine bescheidene Meinung: Heutzutage händisch ohne Framework was bauen ist gut zum Lernen. Wenn du es nur für dich nutzen willst auch ok. Falls auch andere darauf zugreifen sollen sollte man irgendeiner Frontend-Framework hernehmen (Frontend = HTML/CSS/JS, also das was dann im Browser passiert und angezeigt wird).
Alleine schon wegen responsiv design (= soll auch auf einem Smartphone gut aussehen bzw. auf der Vielzahl der Bildschirme und Auflösungen die existieren).

netzgestaltung · 8. Februar 2022

Ich benutze eigentlich immer Flexbox statt Grids. Grids würde ich nur bei "echten" Rastern nutzen, nicht für Layout.

Beispiel: https://flexbox.ninja/demos/holy-grail-layout/

Zu deiner zweiten Frage:
Statt Frames wird immer das ganze HTML mit Menüs(zb dynamisch mit PHP) etc ausgeliefert. Wenn du sowas wie Frames/Frameset suchst schau ev mal zur App-Entwicklung mit JS, da sieht das wieder ähnlich aus, tw riecht es sogar sehr streng nach table-layout/slices usw vor allem wenn Bootstrap CSS genutzt wird.

TBone73 · 8. Februar 2022

Um dieses geht es:

netzgestaltung · 8. Februar 2022

Ja wie gesagt, das macht man nicht mehr so, außer in manchen JS Apps, je nach Aufbau.

Stattdessen hast du die ganze Struktur in jeder Datei drin.
Das was du global verwalten magst fügst du per PHP oder einer anderen Scriptsprache hinzu.

PHP:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Mike, Andreas Wolf">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Bewerbungspage</title>
</head>
<body>
  <div class="container">
    <header>
      <h1>Bewerbung</h1>
    </header>
    <!-- Inhalt templates/menu.php
    <nav>
      <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="lebenslauf.php">Lebenslauf</a></li>
        <li><a href="zeugnis.php">Zeugnisse</a></li>
        <li><a href="impressum.php">impressum</a></li>
      </ul> 
    </nav>
    -->
    <?php include(templates/menu.php); ?>
    <main></main>
    <aside></aside>
    <footer></footer>
  </div>
</body>
</html>

Das ist btw so ziemlich die ursprünglichste Aufgabe von PHP ;-)

TBone73 · 8. Februar 2022

Ach ich verstehe. Du meinst das Menü in PHP (z.b.) in einen Array einlesen und diesen dann in dem "main" ausgeben? Oder?

netzgestaltung · 8. Februar 2022

nein, es gibt keine main.html mehr.

/root/
-> index.php
-> lebenslauf.php
-> zeugnis.php
-> impressum.php
-> templates/menu.php

in jede datei fügst du den gleichen HTML Strukturbaum ein wie gepostet und schreibst dann unten ins <main> Element den jeweiligen Inhalt + der menu.php wo du zentral das Menü HTML bearbeiten kannst.

TBone73 · 8. Februar 2022

es gibt ja auch keine "main.html" --> sondern ein Grid auf einer index.html

in dem Grid ist (als "style.css") definiert: header (Bereich), nav (Navigations-Bereich), footer (Fusszeile => für copyright usw.).

ich wollte Teile des Grid ansprechen. Das heißt: klickt man im nav - Bereich auf Lebenslauf, soll dieser im main-Bereich angezeigt werden.

sorry, alles noch ziemlich neu für mich

sandreas · 8. Februar 2022

TBone73 schrieb:
ich wollte Teile des Grid ansprechen. Das heißt: klickt man im nav - Bereich auf Lebenslauf, soll dieser im main-Bereich angezeigt werden.

Das mit dem "target" geht meines Wissens nach so nicht mit Grids / ohne Frames, JavaScript oder extremes CSS Kung Fu.

Möglichkeiten:

Du arbeitest mit einzel-HTML-Seiten (<a href="bewerbung.html">) und kopierst das HTML Grundgerüst mit in die Zieldateien (lästig, da bei änderungen alle Dateien angepasst werden müssen)
Du arbeitest mit einem via CSS fixierten Menü und "springst" immer zu einem <a name="menuitem1"></a> bzw. blendest die inaktiven aus (erfordert gutes CSS Know-How)
Du arbeitest mit JavaScript und versteckst inaktive menüpunkte oder lädst den angeklickten content via AJAX nach (erfordert JS Know-How)
Du arbeitest mit PHP serverseitig und machst es wie im Fall 1, nur statt den duplizierten HTML-Teilen mit include... (erfordert einen Server mit PHP - auch zum Entwickeln und lernen + PHP Know-How)
Du arbeitest mit einem static site generator wie hugo (siehe https://pilabor.com/blog/2021/05/building-a-blog-with-hugo/) - erfordert hugo know how + längere Einarbeitungszeit + du lernst pures html nicht wirklich

Ich hab mich für letzteres entschieden, aber zum Änfänger-Lernen ist das nix, da würde ich mit 1. anfangen und mich dann langsam bis zu 5 vorarbeiten ;-)

netzgestaltung · 8. Februar 2022

Ahso was meinst du.. wie 2. ja das geht auch xD hab ich schon mal gebaut...2011: https://www.netzgestaltung.at/2011/ ist auch interessant für Slider oder Tabs ohne Javascript

alles auf einer seite, da kann man anhand des Quelltexts und dem CSS sehen wie es geht

ger.ruler · 8. Februar 2022

Gerade in Bezug auf deine Umschulung solltest du dir vlt „modernere“ Technologien und Frameworks anschauen, es lohnt sich

Rockhound · 24. Februar 2022

Und wenn Du PHP nur nutzt um Dateien in andere Dateien zu inkludieren und das bei jedem Seitenaufruf neu gerendert werden muss, ist das denke ich nicht zielführend.

Schau dir mal sogenannte Static-Site-Generator (SSG). Ich nutze z.B. goHugo.io um meine Seiten zu basteln.

Suche

So ein... Grid :)

TBone73

Newbie

Anhänge

Nixdorf

Vice Admiral

BeBur

Commodore

netzgestaltung

Captain

TBone73

Newbie

netzgestaltung

Captain

TBone73

Newbie

netzgestaltung

Captain

TBone73

Newbie

sandreas

Lieutenant

netzgestaltung

Captain

ger.ruler

Lt. Junior Grade

Rockhound

Lt. Commander Pro

Ähnliche Themen