Das war gar nicht so einfach wie es klingt, hab mehr Markup verwenden müssen als mir lieb war (u.A. wegen einem dummen IE-Bug, bei dem eine absolut positionierte <ul> ihre Bullets verliert).
Die Bilder sind unnötig.
Schau dir an ob du alles im Code verstehst, sonst frag, sollst ja was lernen
Getestet in: Mozilla/Firefox 0.8, IE6/win, Opera7/win, Safari 1.2/OSX
Validated: XHTML 1.0 Strict, CSS
Funktioniert perfekt bei jeder Schrift- & Fenstergröße
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66: |
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>instance - Eine Beispielseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Beispielseite" />
<style type="text/css">
body {
background:#226370; color:#96CAD7;
margin:0; padding:0;
font-family:'Lucida Sans',Helvetica,Arial,sans-serif;
font-size:80%;
}
#h1container {
position:absolute; top:0;
width:100%; height:46%;
background:#96CAD7; color:#226370;
margin:0;
}
h1 {
position:absolute; bottom:-0.23em;
width:100%;
margin:0;
text-align:center;
font-size:3.5em;
font-weight:100;
letter-spacing:0.14em;
}
#beschreibung {
position:absolute; top:46%; left:40%;
margin:0; margin-top:0.2em;
letter-spacing:0.1em;
}
ul { margin-top:0; }
#copyright {
position:absolute; bottom:0;
width:100%;
text-align:center;
font-size:0.8em;
margin-bottom:2em;
}
</style>
</head>
<body>
<div id="h1container">
<h1>instance</h1>
</div>
<div id="beschreibung">
<ul>
<li>Eine Internetseite die ein</li>
<li>Beispiel für einen Webauftritt</li>
<li>sein soll.</li>
</ul>
</div>
<div id="copyright">copyright by me & myself & c3o</div>
</body>
</html>
|
