10.1 Zweispalten-Layout
Die Erstellung von komplexen Layouts auf Webseiten erfordert ein tiefes Verständnis verschiedener Positionierungsmethoden und deren Kombinationen. In dieser Vorlesung schauen wir uns ein paar praktische Beispiele zur Erstellung komplexer Layouts mit verschiedenen CSS-Techniken an, wie Flexbox, Grid und traditionelle Positionierung.
Blog-Layout mit fester Navigation
Dieses Layout beinhaltet eine Kopfzeile, eine feste Navigationsleiste, den Hauptinhalt und eine Seitenleiste.
Beispiel:
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #444;
color: white;
padding: 10px;
box-sizing: border-box;
z-index: 1000;
}
.container {
display: flex;
margin-top: 60px; /* Höhe der festen Navigation */
}
.main-content {
flex: 3;
padding: 20px;
}
.sidebar {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: relative;
margin-top: auto;
}
<div class="header">My Blog</div>
<div class="navbar">Navigation</div>
<div class="container">
<div class="main-content">
<h1>Main Content</h1>
<p>Here is the main content of the blog.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>Links and other content.</p>
</div>
</div>
<div class="footer">Footer</div>
In diesem Beispiel bleibt die feste Navigationsleiste dank position: fixed beim Scrollen der Seite an Ort und Stelle. Der Hauptinhalt und die Seitenleiste sind mit Flexbox in zwei Spalten angeordnet.
10.2 Einseitige Website
Einseitige Website mit festem Header und Footer
Dieses Layout beinhaltet eine Kopfzeile, den Hauptinhalt und den Footer. Die Kopfzeile und der Footer bleiben beim Scrollen der Seite sichtbar.
Beispiel:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
}
.main {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: sticky;
bottom: 0;
z-index: 1000;
}
<div class="header">Sticky Header</div>
<div class="main">
<h1>Main Content</h1>
<p>Here is the main content of the page. Scroll to see the sticky header and footer in action.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus lectus eu tortor vehicula, et convallis lacus varius. Integer at orci in nisl faucibus placerat.</p>
</div>
<div class="footer">Sticky Footer</div>
In diesem Beispiel bleiben die Kopfzeile und der Footer dank position: sticky beim Scrollen der Seite sichtbar.
10.3 Mehrstufige Navigationsleiste
Dieses Layout beinhaltet eine mehrstufige Navigationsleiste, die verschachtelte Listen und Pseudoklassen verwendet, um Dropdown-Menüs zu erstellen.
Beispiel:
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}
.navbar li ul {
display: none;
position: absolute;
background-color: #333;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
float: none;
}
.navbar li ul li a {
padding: 14px 16px;
}
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Marketing</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
GO TO FULL VERSION