Newbie in Sachen HTML, CSS und etc. - Informationsseite für Mitarbeiter

wd_diener · 9 Oktober 2024

Hallo Zusammen,

ich als absoluter Newbie in Sachen HTML, CSS und etc. versuche eine kleine Informationsseite für allgemeine Mitarbeiter-Informationen zu erstellen, die schlussendlich auf einem Viewer im Pausenraum angezeigt werden soll und bitte um Unterstützung.

Vorstellung / Anforderung an die Informationsseite:

die Struktur der Seite sollte sich dynamisch an die Größe des Bildschirms anpassen
div1 = Logo (nach links eingerückt)
div2 = Datum + Uhrzeit (nach rechts eingerückt) -> ggf. Hintergrund von Logo und Time gleich halten
div3 = hier soll eine oder mehrere pdf Dateien - A4 Hoch/Quer Format (rotierend zur Ansicht evtl. 30s pro Datei) angezeigt werden (evtl. alle pdf’s die sich in einem bestimmten Quell-Ordner befinden – Anzeigefolge nach Nummerierung der Dateien zB. 1_Name.pdf; 2_Name.pdf; …)
div4 = hier soll eine pdf Dateien (aus einem bestimmten Quell-Ordner befinden)
div5 = newsfeed (Nachrichten DE)

momentan hänge beifolgenden Punkten:

pdf1 und pdf2 werden, statt nebeneinander, schräg untereinander angezeigt
newsfeed1 und newsfeed2 lassen sich irgendwie nicht zu einem Feld „newsfeed“ verbinden

Vorab schon einmal vielen Dank für evtl. Antworten :)

HTML:

<DOCTYPE html>
<head>
    <meta charset="UTF-8">
 
<style>
.container {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.2fr 1fr 0.2fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  align-items: stretch;
}

.logo {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: start;
  grid-template-areas:
    ".";
  grid-area: 1 / 1 / 2 / 2;
}

.time {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: end;
  grid-template-areas:
    ".";
  grid-area: 1 / 2 / 2 / 3;
}

.pdf1 {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: center;
  grid-template-areas:
    ".";
  grid-area: 2 / 1 / 3 / 2;
}

.pdf2 {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  align-items: center;
  grid-template-areas:
    ".";
  grid-area: 2 / 2 / 3 / 3;
}

.newsfeed1 {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: start;
  grid-template-areas:
    ".";
  grid-area: 3 / 1 / 4 / 3;
}

.newsfeed2 {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ".";
  grid-area: 3 / 2 / 4 / 3;
}

</style>

</head>

<main>

<div class="container">
  <div class="logo"></div>
  <div class="time">
  </div>
  <div class="pdf1">
  <img src="MA_Info1.jpg"
  </div>
  <div class="pdf2">
  <img src="MA_Info2.jpg"
  </div>
  <div class="newsfeed1"></div>
  <div class="newsfeed2"></div>
</div>

</main>
</html>

Sempervivum · 9 Oktober 2024

Guten Abend @wd_diener und willkommen im Forum!
Mit einem Gridlayout bist Du bei dieser Anordnung schon auf dem richtigen Wege.
Dein HTML ist jedoch noch fehlerhaft:

Vor das DOCTYPE gehört ein Ausrufezeichen.
Bei den img-Tags fehlt die schließende spitze Klammer. (Aber ich vermute, die hast Du nur zu Demozwecken drin, denn dort sollen ja PDFs rein.)

Außerdem folgende Hinweise:

Im Falle dieses Standardlayouts sind die grid-areas überflüssig, Du verschenkst damit einen großen Vorteil von Gridlayout, nämlich dass die Items automatisch dort angeordnet werden, wo sie hin gehören.
Die Grid-Anweisungen innerhalb der Grid-Items sind zunächst überflüssig so lange dort kein Inhalt drin ist, der angeordnet werden muss.
Der Container div.container ist überflüsssig.
Damit das grid-template-columns wirksam wird, musst Du Platz schaffen, indem Du html, body und main eine Höhe von z. B. 100% zuweist.

newsfeed1 und newsfeed2 lassen sich irgendwie nicht zu einem Feld „newsfeed“ verbinden

Das erreichst Du, indem Du nur einen Container div.newsfeed anlegst und ihn mit grid-column zwei Spalten überspannen lässt.

Arbeitet man das alles ein, würde die HTML-Datei so aussehen:

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Info-Display</title>
    <style>
        html,
        body,
        main {
            height: 100%;
        }

        main {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 0.2fr 1fr 0.2fr;
            gap: 0px 0px;
            grid-auto-flow: row;
            align-items: stretch;
        }

        .logo {}

        .time {}

        .pdf1 {}

        .pdf2 {}

        .newsfeed {
            grid-column: 1/3;
        }
    </style>

</head>

<body>
    <main>
        <div class="logo">
        </div>
        <div class="time">
        </div>
        <div class="pdf1">
            <img src="MA_Info1.jpg">
        </div>
        <div class="pdf2">
            <img src="MA_Info2.jpg">
        </div>
        <div class="newsfeed">
        </div>
    </main>
</body>

</html>

Ist doch viel einfacher und übersichtlicher, nicht wahr?

Um dann zu untersuchen, warum die PDFs nicht angeordnet werden, wie sie sollen, beschreibe bitte, wie Du sie einbindest.

Newbie in Sachen HTML, CSS und etc. - Informationsseite für Mitarbeiter

wd_diener

Neues Mitglied

Sempervivum

Senior HTML'ler

Neueste Beiträge