HTML und CSS redux

Hier mal eine typische HTML Datei mit CSS-style-block:

<html lang="en">
<head>
<title>Mein Titel</title>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<style>
body {
font-family: Helvetica;
margin: 20px;
background: rgb(255,255,255);
}


#container{
position: absolute;
width: 100%;
height: 100%;
}

#square{
position: fixed;
bottom: 5px;
right: 5px;
width: 50px;
height: 50px;
}

#header {
font-size: 24px;
position: absolute;
height: 100px;
border: solid 1px;
}
#menu{
position: absolute;
top: 100px;
width: 200px;
border: solid 1px;
}
#content{
position: absolute;
top: 100px;
left: 200px;
border: solid 1px;
}
#pictures{
position: absolute;
width: 500px;
height: 500px;
border: solid 1px;
}
#caption{
position: absolute;
top: 500px;
height: 50px;
width: 250px;
border: solid 1px;
}
#prevnext{
position: absolute;
top: 500px;
left: 250px;
height: 50px;
width: 250px;
border: solid 1px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Beate Konopke - Fotografie
</div>
<div id="menu">
Eins<br>
Zwei<br>
Dreu<br>
Vier<br>
Fünf<br>
</div>
<div id="content">
<div id="pictures">Hier ein Bild
</div>
<div id="caption">Unterschrift
</div>
<div id="prevnext">Bedienung
</div>
</div>
</div>
<div id="square">o
</div>
</body>
</html>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.