 |
Die letzten 5 Postings in diesem Thema » Alle anzeigen
| von c3o |
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>
|
|
| von Tobi W. |
Hallo zusammen,
ich möchte gerne das Logo in die Mitte bekommen (mitte von oben und unten, nicht von links und rechts) und das copyright nach ganz unten. Das ganze mit div in einer css. Ich hoffe ihr versteht was ich meine.
Hier die aktuelle (test)site:
http://www.weinhorst.de/instance/
Bitte nix mit tabellen, will das ordenlich machen.
Danke
Tobi W, |
|
|
|
