Gegen Bilderklau - Das Original | Druckvorschau: Für Freundin: Seite zentriert darstellen

Geschrieben von empty.threat am 30.06.2009 um 18:05:

Für Freundin: Seite zentriert darstellen

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?

Geschrieben von Felixx am 30.06.2009 um 21:24:

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

Geschrieben von empty.threat am 01.07.2009 um 14:13:

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?

Geschrieben von Felixx am 01.07.2009 um 15:44:

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

Geschrieben von empty.threat am 01.07.2009 um 16:22:

Es ändert sich einfach gar nichts.... unglücklich

Geschrieben von empty.threat am 01.07.2009 um 20:55:

Ne, da tut sich auch nichts unglücklich

Geschrieben von Kruemelletto am 02.07.2009 um 22:49:

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

Geschrieben von Lauri am 04.07.2009 um 04:40:

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.