Reputation: 21
The problem is that I can't get to display the unsorted list like here:
.head {
grid-area: header;
padding: 20px;
font-size: 30px;
text-align: left;
}
.content {
grid-area: content;
}
.nav {
grid-area: nav;
}
.side {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
.wrapper {
/* hier die allgemeine grid-Konfiguration einfügen */
display: grid;
grid-template-columns: 200px auto auto;
grid-template-rows: auto auto auto auto;
grid-template-areas:
"header header header"
"nav nav nav"
"sidebar content content"
"footer footer footer";
grid-gap: 10px;
}
.wrapper > div, header, nav, article, aside, footer {
background-color: gray;
border: 2px solid black;
}
@media (min-width: 500px) {
/* hier die Anpassungen für Geräte mit geringer Auflösung einfügen */
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Grid Layout</title>
<link rel="stylesheet" href="grid.css" type="text/css">
</head>
<body>
<div class="wrapper">
<header class="head">The header</header>
<nav class="nav">
<ul>
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
</ul>
</nav>
<article class="content">
<h1>Main Article</h1>
<p>
In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the
form of the content before the content itself has been produced.
</p>
<p>
The lorem ipsum text is typically a scrambled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed to make it nonsensical, improper Latin.
</p>
<p>
A variation of the ordinary lorem ipsum text has been used in typesetting since the 1960s or earlier, when it was popularized by advertisements for Letraset transfer sheets. It was introduced to the Information Age in the mid-1980s by Aldus Corporation,
which employed it in graphics and word-processing templates for its desktop publishing program PageMaker.
</p>
</article>
<aside class="side">Sidebar</aside>
<footer class="footer">The footer</footer>
</div>
</body>
</html>
Upvotes: 0
Views: 47
Reputation: 2619
Basically, you need to use a flex to show your menu and style the list elements. You just have to add:
.nav ul {
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
.nav ul li {
padding: 0.5em;
list-style-type: none;
text-align: center;
}
.head {
grid-area: header;
padding: 20px;
font-size: 30px;
text-align: left;
}
.content {
grid-area: content;
}
.nav {
grid-area: nav;
}
.nav ul {
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
.nav ul li {
padding: 0.5em;
list-style-type: none;
text-align: center;
}
.side {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
.wrapper {
/* hier die allgemeine grid-Konfiguration einfügen */
display: grid;
grid-template-columns: 200px auto auto;
grid-template-rows: auto auto auto auto;
grid-template-areas:
"header header header"
"nav nav nav"
"sidebar content content"
"footer footer footer";
grid-gap: 10px;
}
.wrapper > div, header, nav, article, aside, footer {
background-color: gray;
border: 2px solid black;
}
@media (min-width: 500px) {
/* hier die Anpassungen für Geräte mit geringer Auflösung einfügen */
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Grid Layout</title>
<link rel="stylesheet" href="grid.css" type="text/css">
</head>
<body>
<div class="wrapper">
<header class="head">The header</header>
<nav class="nav">
<ul>
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
</ul>
</nav>
<article class="content">
<h1>Main Article</h1>
<p>
In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the
form of the content before the content itself has been produced.
</p>
<p>
The lorem ipsum text is typically a scrambled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed to make it nonsensical, improper Latin.
</p>
<p>
A variation of the ordinary lorem ipsum text has been used in typesetting since the 1960s or earlier, when it was popularized by advertisements for Letraset transfer sheets. It was introduced to the Information Age in the mid-1980s by Aldus Corporation,
which employed it in graphics and word-processing templates for its desktop publishing program PageMaker.
</p>
</article>
<aside class="side">Sidebar</aside>
<footer class="footer">The footer</footer>
</div>
</body>
</html>
Upvotes: 1