Ankündigung

**Sempervivum** · 14.05.2022, 10:22

Auch w3schools ist mit Vorsicht zu genießen: Ebenso wie in anderen Quellen im Netz findet man veraltete Anleitungen. In diesem Fall ist das Problem, dass mit Floatlayout gearbeitet wird und sich das für dein Vorhaben nicht eignet.
Informiere dich statt dessen über Gridlayout, dann wird alles einfacher und Du kannst die Container so anordnen wie Du es wünschst.
https://css-tricks.com/snippets/css/...te-guide-grid/

**Gast** · 14.05.2022, 12:30

Vielen Dank

**Localfu** · 14.05.2022, 16:21

Moin eisbär,
ich kann die nur empfehlen ein Buch über HTML und CSS holen. Das kostet heutzutage fast nichts mehr und man bekommt auch digitale Bücher als PDF oder eBook. Ich kann dir empfehlen das Buch zu holen, da es ein guter Einstieg ist in die Erstellung von Webseiten mit HTML und CSS. https://www.rheinwerk-verlag.de/eins...-html-und-css/

Natürlich gibt es noch viele weitere gute Bücher von anderen Verlagen, aber bevor du die Übersicht verlierst, ist das ein guter Einstieg. Ich wünsche dir viel Erfolg und wenn du Fragen hast, dann einfach ins Forum schreiben.

Viele Grüße Localfu

**Gast** · 14.05.2022, 17:54

Dank Dir, sehr guter Vorschlag. Denn nach 2 Stunden rum probieren bekomme ich mein "einfaches Template" mit grid nicht hin. Bin zu blöd dafür.
Das Zusammenspiel Html und css miteinander habe ich halbwegs schon kapiert. Für meine Ansprüche sollte es reichen. Aber den Aufbau mit grid, pfffffffffff
Trotzdem Danke

**Sempervivum** · 14.05.2022, 18:01

Für dein Template brauchst Du nur wenig von Grid:

Zwei Spalten anlegen:

Code:

#grid-container {
    grid-template-columns: 2fr 1fr;
}

Header und Footer müssen beide Spalten überspannen:

Code:

header {
    grid-column: 1 / 3;
}

**Gast** · 14.05.2022, 19:25

ja vielen Dank. Ein Ansatzpunkt. Das versuche ich mal.

Ich bin momentan auf der Seite https://wiki.selfhtml.org/wiki/CSS/T...rid/Grid-Items
Vielleicht zum üben net schlecht.....?

**Sempervivum** · 14.05.2022, 20:04

Ja, Selfhtml ist auch zu empfehlen.

**Gast** · 22.05.2022, 18:54

Hallo,
ich komme nicht klar mit oben genannten Code. Irgendwie steig ich nicht dahinter.
Ich habe jetzt mal mit "item" versucht um wenigstens irgendwas hinzubekommen. Da geht mir aber die Luft aus, wenn ich dann mehrere Content (Themen) erzeugen möchte. Auch der Menu-Bereich ist viel zu hoch. Außer ich mache die Schrift größer.
Wahrscheinlich bin ich mit allem auf dem falschen Dampfer.
Header, Menu, Footer sollen über die ganze Breite.
Die Verschiebung von img-logo und Schrift geht auch über "padding" ??
Abgesehen von den schrecklichen Farben, "Logofehler" fehlt ein e

, und nichts sagendem Text, habe ich meinen Code im Anhang und ein Foto der Einteilung. Wenn ihr meint, schade um die Zeit, dann lasse ichs bleiben. Jeder hat so seine Begabung......

HTML-Code:

<!DOCTYPE html>
<html>
<head>
<title>Das Bullshit-Web</title>
<link rel="stylesheet" href="css/formate.css">
<link rel="shortcut icon" type="image/x-icon" href="Bilder/favicon.png">
<meta charset="utf-8">
<meta font-family= "Roboto">
<meta name="refferer" content="no-refferer">
<meta http-equiv="Content-Security-Policy" content="script-src 'none'">
</head>
<body>

<div class="grid-container">
<div class="grid-item1"><img src="/Bilder/money.png" width="410" height="100">
<h3>Eine Seite für Unverbesserliche...</h3>
<p>kann man lesen, muss man nicht.</p>
</div>
<div class="grid-item2"><a href="index.html">Startseite</a>
<a href="bullshit.html">Bullshit</a>
<a href="blog.html">Blog koin Bock</a>
<a href="datenschutz.html">Datenschutz</a>
<a href="Espressum.html">Espressum</a>
</div>
<div class="grid-item3"><h4>Microsoft</h4>
<p>Microsoft, was , wer ist das. Ein neues Kochbuch von Bill</p></div>
<div class="grid-item4"><h4>Microsoft</h4>
<p>Microsoft, was , wer ist das. Ein neues Kochbuch von Bill</p></div>
<div class="grid-item5"><a href="index.html">Startseite</a>
<a href="bullshit.html">Bullshit</a>
<a href="blog.html">Blog koin Bock</a>
<a href="datenschutz.html">Datenschutz</a>
<a href="Espressum.html">Espressum</a><img src="/Bilder/money.png" width="410" height="100"></div>
</div>
</body>
</html>

[CODE].grid-container {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-gap: 5px;
grid-template-areas:
"area1 area1 area1 area1 area1"
"area2 area2 area2 area2 area2"
" . area3 area3 area4 . "
"area5 area5 area5 area5 area5"
}
.grid-item1 {
background: blue;
text-align: center;
grid-area: area1;
}
.grid-item2 {
background: red;
text-align: center;
padding: 35px 2px 2px 2px;
grid-area: area2;
}
.grid-item3 {
background: green;
text-align: center;
grid-area: area3;
}
.grid-item4 {
background: yellow;
text-align: center;
grid-area: area4;
}
.grid-item5 {
background: PowderBlue;
text-align: center;
grid-area: area5;
}


[/CODE]

Angehängte Dateien

**daniel5959** · 22.05.2022, 20:11

Hallo,

vielleicht mal dieses Beispiel anschauen ...

>> https://media.kulturbanause.de/2016/...-grids-01.html

... gefunden hier in diesem Beitrag ...

CSS Grid – Einführung in Gestaltungsraster mit dem Grid Layout Module

>> https://kulturbanause.de/blog/css-grid-layout-module/

... nach unten scrollen bis "Beispiel anschauen".

daniel5959

**Sempervivum** · 23.05.2022, 08:59

Abstände durch zusätzliche Container zu erzeugen ist wenig elegant und macht das Ganze unübersichtlich. Besser mit Außenabständen bzw. Margins arbeiten.
Und feste Abmessungen sind häufig eine Quelle von Problemen, in diesem Fall durch Überlaufe. Besser nur in Ausnahmefällen verwenden.
Dies müsste eigentlich in etwa das sein, was Du in deinem PDF skizziert hast:

Code:

        .grid-container {
            display: grid;
            /* grid-template-rows: 100px 100px 100px; */
            /* Die linke Spalte soll doppelt so breit sein wie die rechte: */
            grid-template-columns: 2fr 1fr;
            grid-gap: 5px;
            grid-template-areas:
                "area1 area1"
                "area2 area2"
                "area3 area4"
                "area5 area5"
        }
        .grid-item1 {
            background: blue;
            text-align: center;
            grid-area: area1;
        }
        .grid-item2 {
            background: red;
            text-align: center;
            padding: 35px 2px 2px 2px;
            grid-area: area2;
        }
        .grid-item3 {
            background: green;
            text-align: center;
            grid-area: area3;
            margin: 2em 0 2em 5em;
        }
        .grid-item4 {
            background: yellow;
            text-align: center;
            grid-area: area4;
            margin: 2em 1em 2em 2em;
        }
        .grid-item5 {
            background: PowderBlue;
            text-align: center;
            grid-area: area5;
        }

Und die Verwendung von semantischen Tags wie nav, header, section etc. wäre noch zu empfehlen.

**Gast** · 23.05.2022, 09:59

Daaaankeee

Ankündigung

html und css homepage ohne Javascript

html und css homepage ohne Javascript

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

homepage-forum.de - Hilfe für Webmaster! Statistiken

Online-Benutzer

Die neuesten Themen

Die neuesten Beiträge