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>
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>