[HTML] Für Freundin: Seite zentriert darstellen

empty.threat
Hallo,

eine Freundin möchte ihre Homepage zentriert darstellen.
Das ist die index.html

Ich komm irgendwie nicht dahinter.
Habs mit divs probiert, CSS, aber irgendwas mach ich auch falsch.

code:
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="http://www.favicon-generator.de/images/icons/4f0697f1-c96f-4cab-9d2c-408b864aa2e4-16.ico"></link>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenannt</title>
<style type="text/css">
<!--
body {
	background-image: url(tfghauptbild01.jpg);
	background-repeat: no-repeat;
	background-color: #3d2501;
}



-->
</style></head>

<body>

<div id="content">

<iframe src="home.html" name="window" scrolling="auto" frameborder="no"  style="Z-INDEX: 100; MARGIN-LEFT: -5px; WIDTH: 744px; POSITION: absolute; TOP: 225px; HEIGHT: 338px; left: 42px; background-color: #b69768; layer-background-color: #e1c4a2; border: 1px none #000000;">  </iframe>
</div>

<img border="0" src="leer1.jpg" style="Z-INDEX: 100; MARGIN-LEFT: 20px; POSITION: absolute; TOP: 160px; left: 7px;" >

<a href="news.html" target="window">
<img border="0" src="news2.jpg" style="Z-INDEX: 100; MARGIN-LEFT: 20px; POSITION: absolute; TOP: 160px; left: 73px;" ></a>

<a href="ich.html" target="window">
<img border="0" src="ich2.jpg" style="Z-INDEX: 100; MARGIN-LEFT: 20px; POSITION: absolute; TOP: 160px; left: 134px;" ></a>

<a href="fotografie.html" target="window">
<img border="0" src="fotografie2.jpg" style="Z-INDEX: 100; MARGIN-LEFT: 20px; POSITION: absolute; TOP: 160px; left: 180px;" ></a>

<a href="ice_Familie.html" target="window">
<img border="0" src="models.jpg" style="Z-INDEX: 100; MARGIN-LEFT: 20px; POSITION: absolute; TOP: 160px; left: 288px;" ></a>

<a href="galerie.html" target="window">
<img border="0" src="galerie2.jpg" style="Z-INDEX: 100; MARGIN-LEFT: 20px; POSITION: absolute; TOP: 160px; left: 436px;" ></a>

<a href="links.html" target="window">
<img border="0" src="links2.jpg" style="Z-INDEX: 100; MARGIN-LEFT: 20px; POSITION: absolute; TOP: 160px; left: 518px;" ></a>

<a href="gaestebuch.html" target="window">
<img border="0" src="gaestebuch2.jpg" style="Z-INDEX: 100; MARGIN-LEFT: 20px; POSITION: absolute; TOP: 160px; left: 589px;" ></a>


<img border="0" src="leer2.jpg" style="Z-INDEX: 100; MARGIN-LEFT: 20px; POSITION: absolute; TOP: 160px; left: 702px;" >



</body>
</html>


Vielleicht kann das ja jemand anderes?
Felixx
Also falls du wirklich die ganze Seite in der Mitte haben möchtest, kann man das mit einer Tabelle machen. Zuerst erstellst du eine Tabelle, die über den ganzen Bildschirm geht und die unsichtbar ist, daher boder auf Null (=kein Rand) und kein cellspacing und cellpadding, da sich der Inhalt ansonsten verschiebt. Anschließend nur noch die einzelne Zelle zentrieren, sowohl horizontal (=align) und vertikal (=valign). Und alles halt wieder ordnungsgemäß schließen fröhlich
Sieht dann so aus:

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td align="center" valign="middle">

Hier kommt der gesamte Inhalt des Bodies hin! Also alles was nach "<body> und vor </body> steht.

</td></tr></table>

Ist wahrscheinlich nicht gerade die eleganterste Lösung, aber zumindest eine, die rein über HTML läuft. Ich hoffe, es war verständlich - ansonsten einfach fragen, ich beisse (meistens) nicht Augenzwinkern

Liebe Grüße, Lisi
empty.threat
Erstmal danke.
Ja, soll die ganze Seite inkl. Design sein, die zentriert sein soll.

Das mit der Tabelle ist wirklich nicht die eleganteste Lösung... also falls jemand noch ne andere Idee hat...?

Trotzdem danke!


Edit: Das mit der Tabelle hab ich gerade versucht, das funktioniert nicht?
Felixx
Was genau funktioniert denn nicht? Wird dir gar nichts mehr angezeigt oder sind "nur" die Iframes verschoben? Das mit den I-frames ist nämlich IMMER eine doofe Geschichte. Wart mal ab, ob nicht noch bessere Vorschläge kommen Augenzwinkern

Liebe Grüße, Lisi
empty.threat
Es ändert sich einfach gar nichts....unglücklich
empty.threat
Ne, da tut sich auch nichts unglücklich
Kruemelletto
Kann man sich das mal online anschauen?
Ich würde es aber eigentlich auch mit ner Tabelle lösen... Finde das ganz und gar nicht unelegant ;D
Lauri
Ich mach sowas immer mit einer Kombiantion aus Iframes und Tabelle und eigentlich klappt es so immer bei mir:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
<table align="center" width=100% style="border: 1px; height: 100%">
<tr>
<td style="border: 0px; height: 100%" width="100%">
<p align="center">
<iframe src="index2.html" name="lay" width="1024" height="768" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
</td>
</tr>
</table>


Müsste halt das Layout, wie du es oben im Code hast, als index2.html abgespeichert werden und die Werte für die Größe angepasst werden.

Ist vielleicht nicht elegant, funktioniert aber - zumindest bei mir - immer.