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

Grid Positionierung von Elementen

JanHu

Neues Mitglied
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>
 
Werbung:
Super, danke, funktioniert perfekt.

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

Danke
 
Werbung:
Danke, super. Das entspricht also dem <!--- ---->. Dann weiß ich Bescheid. Komme gut weiter mit meiner Seite. Vielen Dank nochmal. Morgen mache ich weiter
 
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
 
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
 
Werbung:
Zurück
Oben