Css Grid-Layout spinnt?
Hallo,
warum ist mein "todo-body" (das links neben My lists) an einer Stelle, die ich im Grid mit "......" markiert habe und nicht bei "active"?
Vielen Dank euch!
LG Leonardo
(der Code ist hier: https://pastebin.com/W6NvWcLK)
*nicht auf die Tabs gucken :D
2 Antworten
Für todo-body hast du doch gar keine grid-area explizit benannt. Das Element, auf welches der Klassenselektor todo-list zeigt, nutzt den active-Bereich.
.todo-list {
grid-area: active;
}
PS.: Die Werte deiner beiden action-Attribute (der form-Elemente) sind invalid. Entweder du trägst eine valide URL ein oder (falls du eh auf dieselbe Seite verweisen möchtest) du lässt es ganz weg.
Ich habe das erstmal weggelassen, weil ich das derzeit nicht brauche.
Dennoch danke ich dir für deine Antwort.
Erstellt man eine Website, fließt ein großer Teil der Arbeit in die Platzierung der einzelnen Elemente. Das Layout soll interessant aussehen, gleichzeitig aber auch intuitiv verständlich und übersichtlich sein. Cascading Style Sheets (CSS) liefern das Werkzeug, um Websites ansprechend zu gestalten. Während man mit HTML die Inhalte rudimentär auszeichnet, verwenden Webdesigner CSS für komplexe Gestaltungen. Die Webtechnik wird beständig weiterentwickelt. Mit CSS3 sind neue Techniken hinzugekommen, die die Auszeichnungssprache auch für mobiles Internet und responsives Design nutzbar machen.
Gib das ein, damit es nicht spinnt!
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>
<div class="grid-item4">4</div>
<div class="grid-item5">5</div>
<div class="grid-item6">6</div>
</div>
</body>
</html>