CSS Grid Webseite funktioniert nicht?
Das Layout für die Webseite funktioniert nicht. Ich habe das Problem lange gesucht, aber nicht gefunden. Ich wäre über jegliche Hilfe dankbar.
CSS:
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-template-areas:
h h h h h h
c c c c c s
c c c c c s
c c c c c s
c c c c c s
f f f f f s
}
.footer {
grid-area: f;
}
.header {
grid-area: h;
}
.content {
grid-area: c;
}
.side {
grid-area: s;
}
HTML-Datei:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet">
<nav>
</head>
<body class="container">
<title>Eigene Webseite von ---</title>
<header class="header">
<h1>Hauptseite meiner Webseite</h1>
</header>
<main class="content">
<div id="abstand">
<h3>Interessen:</h3>
<ul>
<li>Technik</li>
<li>Videospiele</li>
</ul>
<u><h3>Ich bin:</h3></u>
<p>Optimistisch<br>Geduldig<br>Hilfsbereit</p>
<a id="link" href="https://www.netflix.com/at/">Mein Link</a>
<div>
<div id="bild">
<img src="bild1.jpg" width=300 height=186 alt="Bild über mich">
</div>
</div>
<div id="Motte"></div>
</div>
</main>
<aside class="side">
<p>News/Einträge</p>
</aside>
<div class="daten">
<footer class=footer>
<h4>Hier könnte ein Motto stehen</h4>
</footer>
<div id="daten">
<p>---</p>
<p>--</p>
<a href="----</a>
</div>
</div>
</div>
</nav>
</body>
</html>
2 Antworten
Zuerst solltest du dein HTML in Ordnung bringen.
1) Das nav-Element beschreibt konkreten Inhalt im Dokument und gehört daher wenn nur in den body. Wieso du damit scheinbar die kompletten Seite umspannen möchtest, ist für mich unklar. Es wäre so jedenfalls auch missdeutend. Nimm es einfach komplett raus.
2) Das title-Element beschreibt den Dokumenttitel. Insofern ist es eine Angabe, die ausschließlich für den head-Bereich bestimmt ist. Der title-Tag aus dem body kommt also raus. Wenn du eine Überschrift darstellen wolltest, verwende den h1-Tag.
3) Ein h3-Element ist ein Blockelement, welches nicht in ein u-Element passt (das erlaubt nur phrasing content, wie span, b, i, strong, ...). Entweder du schreibst es zumindest andersherum:
<h3><u>Ich bin:</u></h3>
oder wesentlich besser: Du unterstreichst den Text via CSS. Immerhin hast du ihm bereits mit dem h3 eine Bedeutung zugeordnet, die wohl kaum weiter hervorgehoben werden müsste.
<h3 class="underlined">Ich bin:</h3>
CSS:
.underlined { text-decoration: underline }
4) Es ist kein Fehler, aber dennoch verwunderlich, dass du den anschließenden Paragraph nicht zu einer Auflistung (ul) umformst. Immerhin listest du ja auch Daten auf, die zudem logisch zusammenhängen.
5) Dein öffnender a-Tag am Ende des Dokuments ist unvollständig.
<a href="some target URL ...">----</a>
6) Du schließt zuletzt ein div-Element, zu dem kein öffnender Tag existiert.
7) Abschließend würde ich zu einem einheitlichen Stil raten. Das verbessert die Lesbarkeit. Alle Attribute werden mit Anführungszeichen umklammert.
<tagname attribute="value">...</tagname>
Zu deinem Grid: Wenn du deinen Selektor .container so umformst:
.container {
display: grid;
grid-template-areas:
'h h h h h h'
'c c c c c s'
'c c c c c s'
'c c c c c s'
'c c c c c s'
'f f f f f s';
}
werden die Elemente so angeordnet, wie du es skizziert hast.
du nutz das ja komplett falsch hier mal ein beispiel
https://jsfiddle.net/sda6bqm8/
ich frag mich echt warum du da 5 mal h hast etc
irgendwie tust du im kopf was komplett anderes als wofür grid gedacht wurde .
fang mal mit einfachen beispielen an mit rahmen und dann erweiter das zu dem was du da willst.
so wird man nciht schlau draus was du überhaupt willst .
nicht das du grid nutzt und vergisst CSS zu lernen . den das meiste muss man wirklich nciht mit grid machen , das ist ja so als wärst du im 19xx jahrtausend style nur das du heute nicht tables nimmst . dafür grid aber genauso falsch.
warum machst du dann überhaupt ein grid ? blockelemente werden doch eh untereinenader in zeilen gezeigt. ich glaub du hast wirklich die basics von einembrowser und der anzeige nicht verstanden .
du brauchst gar kein grid .
lern erstmal ganz normal HTML und CSS und wenn das mit nromalen mitteln nicht geht, dann kannst du ein GRID nehmen . den das ist für spalten etc angedacht , nicht weils schick ist
Ich möchte, dass die Elemente untereinander angezeigt werden, nicht nebeneinander.