Grid Positionierung von Elementen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
Hallo,

bekomme nicht hin, das copyright Feld unter kastanie Feld zu bekommen. Copyright zieht sich immer in die erste Reihe neben der Navigation. Ausserdem wird zu copyright mit H1der Border-Befehl nicht ausgeführt. Weiß vielleicht jemand, was ich falsch mache? Benutze Chrome, Danke

<!DOCTYPE html>


<html lang="de">


<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initinal-scale=1">
<title>grid2</title>

<style>


* {
box-sizing: border-box;
}

navigation,
logo {
border: 1px solid #000;
}
kastanie,
copyright,
sidebar {
border: 1px solid #000;
}
bild1,
liste,
bild2,
text2



navigation {
grid-area: navigation;
}
kastanie {
grid-area: kastanie;
}
copyright {
grid-area: copyright:
}
text1 {
grid-area: text1;
}
Bild1 {
grid-area: bild1;
}
liste {
grid-area: liste;
}
bild2 {
grid-area: bild2;
}
text2 {
grid-area: text2;
}
taube {
grid-area: taube;
}
logo {
grid-area: logo;
}
sidebar {
grid-area: sidebar;
}






body {
min-height: 98vh;
display: grid;
grid-template-columns: 4em 4m 4em 4em;
grid-template-rows: 4em 3em 5em 1fr 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
"navigation navigation navigation logo"
"kastanie kastanie kastanie logo"
"copyright copyright copyright sidebar"
"text1 text1 text1 sidebar"
"bild1 liste bild2 sidebar"
"text2 text2 text2 sidebar"
"...taube...sidebar"
}

h1{
color: gray;
text-align: center;
font-size: 2,0em;
font-family: Verdana; Lucida Sans Unicode"; sans-serif; Papyrus;

border-style: solid;
border-width: 5pt;
border-color: grey;
border-radius: 10px;
}


@media all and (max-width: 50em) {
body {
grid-template-columns: 5fr 1fr;
grid-template-rows: 1fr 2fr 1fr 3fr 2fr 3fr 3fr;
grid-template-areas:
"navigation logo"
"kastanie kastanie"
"copyright sidebar"
"text1 sidebar"
"bild1 liste bild2"
"text2 text2"
"taube..."
}
}

@media all and (max-width: 30em) {
body {
display: block;
}

}


</style>


</head>


<body>

<navigation>
<h2>navigation</h2>
</navigation>
<logo>
<h2>logo</h2>
</logo>
<kastanie>
<h2>kastanie</h2>
</kastanie>
<sidebar>
<h2>sidebar</h2>
</sidebar>
<copyright>
<h1>copyright</h1>
</copyright>
<text1>
<h2>text1</h2>
</text1>
<bild1>
<h2>bild1</h2>
</bild1>
<liste>
<h2>liste</h2>
</liste>
<bild2>
<h2>bild2</h2>
</bild2>
<text2>
<h2>text2</h2>
</text2>
<taube>
<h2>taube</h2>
</taube>



</body>

</html>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
Ein guter Editor bringt es an den Tag:
1. Syntaxfehler bei Zuweisung der Grid-Area bei copyright:
Code:
        copyright {
            /* grid-area: copyright: */
            grid-area: copyright;
        }
2. Syntaxfehler bei Definition der font-family:
Code:
        h1 {
            color: gray;
            text-align: center;
            font-size: 2, 0em;
            font-family: Verdana;
            /* Lucida Sans Unicode"; sans-serif; Papyrus; */

            border-style: solid;
            border-width: 5pt;
            border-color: grey;
            border-radius: 10px;
        }
 

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
Super, danke, funktioniert perfekt.

Bin Anfänger. Wie heißt der Befehl denn /* */, damit ich das mal lesen kann?

Danke
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
Das sind in CSS die Kommentarzeichen, was dazwischen steht, ist nicht wirksam. Man benutzt sie i. allg. um Erkärungen zum Code unterzubringen, aber in dem Fall habe ich sie benutzt, um den fehlerhaften Code unwirksam zu machen.

Selber benutze ich Visual Studio Code, sehr zu empfehlen.
 

JanMe

Neues Mitglied
5 Januar 2020
2
0
1
40
Danke, super. Das entspricht also dem <!--- ---->. Dann weiß ich Bescheid. Komme gut weiter mit meiner Seite. Vielen Dank nochmal. Morgen mache ich weiter
 

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
Habe die Seite mit Inhalt fast vollständig gehabt und das meiste war ok, aber die ganze Struktur vom Grid war auf meiner url weg. Habe dann etliche Vervollständigungen wieder rausgenommen um zu prüfen, ob ich den Fehler finde. Dann habe ich die oben genommenen Daten von meinem ersten Beitrag genommen und entsprechend des Hinweises abgeändert. Als ich das auf meine domain aufgespielt habe kam bei dem w3 validator für jeden Bereich des Grid folgende Bemerkung:

139dy> <navigation> <h1>nElement “navigation” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)a
142vigation> <logo> <h2>lElement “logo” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)a
145> </logo> <kastanie> <h2>kElement “kastanie” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)a
148kastanie> <sidebar> <h2>sElement “sidebar” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)a
151/sidebar> <copyright> <h2>cElement “copyright” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)a
154opyright> <text1> <h2>tElement “text1” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)a
157</text1> <bild1> <h2>bElement “bild1” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)a
160</bild1> <liste> <h2>lElement “liste” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)a
163</liste> <bild2> <h2>bElement “bild2” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)a
166</bild2> <text2> <h2>tElement “text2” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)a
169</text2> <taube> <h2>tElement “taube” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
Das Gerüst von grid wird in der Breite auch nur mit vielleicht 20% des Bildschirms angezeigt

<!DOCTYPE html>


<html lang="de">


<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initinal-scale=1">
<title>grid2</title>

<style>


* {
box-sizing: border-box;
}

navigation,
logo {
border: 1px solid #000;
}
kastanie,
copyright,
sidebar {
border: 1px solid #000;
}
bild1,
liste,
bild2,
text2



navigation {
grid-area: navigation;
}
kastanie {
grid-area: kastanie;
}
copyright {
grid-area: copyright;
}
text1 {
grid-area: text1;
}
Bild1 {
grid-area: bild1;
}
liste {
grid-area: liste;
}
bild2 {
grid-area: bild2;
}
text2 {
grid-area: text2;
}
taube {
grid-area: taube;
}
logo {
grid-area: logo;
}
sidebar {
grid-area: sidebar;
}






body {
min-height: 98vh;
display: grid;
grid-template-columns: 4em 4em 4em 4em;
grid-template-rows: 4em 3em 5em 1fr 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
"navigation navigation navigation logo"
"kastanie kastanie kastanie logo"
"copyright copyright copyright lo0go"
"text1 text1 text1 sidebar"
"bild1 liste bild2 sidebar"
"text2 text2 text2 sidebar"
"...taube...sidebar"
}

h1{
color: gray;
text-align: center;
font-size: 2em;
font-family: Verdana;
/*Lucida Sans Unicode"; sans-serif; Papyrus; */

border-style: solid;
border-width: 5pt;
border-color: grey;
border-radius: 10px;
}


@media all and (max-width: 50em) {
body {
grid-template-columns: 5fr 1fr;
grid-template-rows: 1fr 2fr 1fr 3fr 2fr 3fr 3fr;
grid-template-areas:
"navigation logo"
"kastanie kastanie"
"copyright sidebar"
"text1 sidebar"
"bild1 liste bild2"
"text2 text2"
"taube..."
}
}

@media all and (max-width: 30em) {
body {
display: block;
}

}




</style>


</head>


<body>


<navigation>
<h1>navigation</h1>
</navigation>
<logo>
<h2>logo</h2>
</logo>
<kastanie>
<h2>kastanie</h2>
</kastanie>
<sidebar>
<h2>sidebar</h2>
</sidebar>
<copyright>
<h2>copyright</h2>
</copyright>
<text1>
<h2>text1</h2>
</text1>
<bild1>
<h2>bild1</h2>
</bild1>
<liste>
<h2>liste</h2>
</liste>
<bild2>
<h2>bild2</h2>
</bild2>
<text2>
<h2>text2</h2>
</text2>
<taube>
<h2>taube</h2>
</taube>

</body>

</html>

Was kann ich denn nun machen? Danke
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
Schreibfehler hier:
Code:
body {
min-height: 98vh;
display: grid;
grid-template-columns: 4em 4em 4em 4em;
grid-template-rows: 4em 3em 5em 1fr 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
"navigation navigation navigation logo"
"kastanie kastanie kastanie logo"
"copyright copyright copyright lo0go" /* <-- lo0go
"text1 text1 text1 sidebar"
"bild1 liste bild2 sidebar"
"text2 text2 text2 sidebar"
"...taube...sidebar"
}
und dieses macht auch keinen Sinn:
Code:
bild1,
liste,
bild2,
text2



navigation {
grid-area: navigation;
}
habe ich so geändert:
Code:
        /* bild1,
        liste,
        bild2,
        text2, */
        navigation {
            grid-area: navigation;
        }
Danach wird das Grid richtig angezeigt, nur sehr schmal. Das liegt dann daran, wie Du die Template-Columns definiert hast:
Code:
grid-template-columns: 4em 4em 4em 4em;
Anwenderdefinierte Tags scheinen ein wenig kritisch zu sein bei der Validierung, siehe hier:
Da steht u. a. dass ein solches Tag ein Minus-Zeichen enthalten muss, um valide zu sein. Das bestätigt sich bei einem Test: Ändern von navigation in my-navigation lässt den Fehler verschwinden.
Code:
    <my-navigation>
        <h1>navigation</h1>
    </my-navigation>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
PS: Hast Du dich schon mit den Entwicklerwerkzeugen deines Browsers vertraut gemacht?
Strg+Umsch+I oder F12 bei IE und Edge. Oder Rechtsklick auf ein Element und "Element analysieren".
Diese sind sehr nützlich bei der Fehlersuche.
 

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
Danke zunächst, super Antwort. Muss ich mir erst einmal alles ansehen. Bin jetzt noch nicht dazu gekommen. Mit den Entwicklerwerkzeugen von Chrome habe ich mich noch nicht vetraut gemacht. Wußte garnicht, daß man mit Chrome auch analysieren kann. Das werde ich morgen gleich in Angriff nehmen. Melde mich dann morgen, wie es geht.

Vielen Dank nochmals