Danke.
In vielen Tutorials ist das etwas unklar beschrieben oder sie sind aus einer Zeit, wo man noch viel mit Workarounds arbeiten musste.
Ich habe versucht, Workarounds so gut es geht zu vermeiden.
Momentan ist es ein Float Layout.
Es ist mit 3 Spalten und Zentrierung gemacht, dazu eine feste Kopfzeile.
Wäre es sinnvoller, auf Flexbox zu gehen?
Hier mal, was ich bis jetzt habe.
HTML:
HTML-Code:
<!doctype html>
<!-- V 0.1 -->
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="testseite">
<title>Test-Webseite</title>
<link type="text/css" rel="stylesheet" media="screen" href="layout.css" />
</head>
<body>
<div id="header">
<p>Mein erstes Test-Layout</p>
</div>
<div id="wrapper">
<div id="spacer"></div>
<div id="nav" role="navigation">
Steuerung
<ul>
<li><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
</ul>
</div>
<div id="sidebar" role="navigation">
sidebar
</div>
<div id="main" role="main">
<div class="article">
<h1>Überschrift des Artikels</h1>
<img src="blau.jpg" />
<p>
Artikel Text
</p>
</div>
<div class="article">
<h1>Überschrift des Artikels</h1>
<img src="blau.jpg" />
<p>
Artikel Text
</p>
</div>
</div>
<div id="spacer"></div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
CSS
HTML-Code:
/*
CSS Layout v 0.1
*/
* {
margin: 0px;
padding: 0px;
border: none;
}
html {
background-color: #F0F0E9;
color: #000;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: left;
font-weight: normal;
/*background-image: url("grid.png");
background-repeat: repeat;*/
height: 100%;
}
body {
min-width: 600px;
width: auto;
height: 100%;
}
html, body
{
width:100%;
height:100%;
}
#spacer {
width:100%;
height:100px;
}
/*Kopf*/
#header {
margin: 0;
background-color: #FFD700;
width:100%;
height:78px;
border-color: #DAA520;
border-bottom-style: solid;
border-width: 2px;
position: fixed;
top: 0px;
left: 0px;
z-index: 1000;
}
/*Hauptnavigation*/
#nav {
float:left;
position: fixed;*/
margin: 0;
width: 100px;
background-color: #F0E68C;
border-color: #DAA520;
border-style: solid;
border-width: 2px;
}
#nav ul li {
margin: 2px;
/* background-color:#FFFACD; */
}
/* Linkes Menue */
#sidebar {
float:right;
margin: 0;
width: 100px;
background-color: #F0E68C;
border-color: #DAA520;
border-style: solid;
border-width: 2px;
}
/* Hauptbereich */
#wrapper {
position:relative;
max-width: 1800px;
width:1200px;
min-width: 600px;
min-height: 100%;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-bottom: 0px;
}
#main {
margin-left: 155px;
margin-right: 155px;
overflow: auto;
}
/*Artikel*/
.article {
margin-bottom: 20px;
border-color: #DAA520;
border-style: solid;
border-width: 2px;
background-color: #FFF;
}
#footer {
position: absolute;
bottom: 0px;
width:100%;
height:25px;
}