Gesamter Inhalt in die Mitte
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
code
dank
demo
folgendes code
frage
genau bestimmen
gesamten inhalt
http
inhalt
kompletter inhalt
machen
mitte
oberen rand
optischen effekt
position
problem
richtig darstellen
text
url
-
Hallo,
ich habe ein Problem, und zwar möchte ich den gesamten Inhalt einer Seite (.php) nicht nur im Verhältnis Links-Rechts mittig haben
sondern auch Oben zu Unten. Wie bekomme ich also egal ob sich die Größe des Seiteninhalts verändert (also nicht einfach Zeilenumbrücke machen :D), die Seite genau in die Mitte?
Ich danke euch im Vorhinein
euer PC ;)
Beitrag zuletzt geändert: 9.7.2009 21:41:39 von mypc -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das ist schwer, wenn der Inhalt verändern soll. Prinzipiell willst du also folgendes:
<div id="mitte">Hier steht soviel Inhalt wie du willst</div>
Üblicherweise mittels CSS:
Ich bin mir nicht sicher, aber das dürfte es nicht ganz so mittig setzen. Das Problem liegt in der dynamischen Höhe.#mitte {margin: auto;}
Wenn diese nicht dynamisch wäre könnte man den Trick mit dem absoluten positionieren machen und negative margins einsetzen: Tutorial.
Aber wie soll das ganze aussehen, wenn der Inhalt größer ist als die Fensterhöhe... -
Du stellst den gesamten Inhalt deiner Seite in einen "wrapper":
<div id="wrapper">kompletter Inhalt der Seite</div>
In deinem CSS machst du dann folgendes:
#wrapper { position: absolute; width: 800px; margin-left: -400px; left: 50%; height: 500px; margin-top: -250px; top: 50%; }
margin-left und margin-top sollten halb so groß sein wie dein content. Ich habe selbst schon mal eine Seite auf diese Weise realisiert. -
kaetzle7 schrieb:
Du stellst den gesamten Inhalt deiner Seite in einen "wrapper":
<div id="wrapper">kompletter Inhalt der Seite</div>
In deinem CSS machst du dann folgendes:
#wrapper { position: absolute; width: 800px; margin-left: -400px; left: 50%; height: 500px; margin-top: -250px; top: 50%; }
margin-left und margin-top sollten halb so groß sein wie dein content. Ich habe selbst schon mal eine Seite auf diese Weise realisiert.
ich dachte mit php will er andeuten, dass die website einen flexiblen inhalt hat. also dass sich die größe des wrapper nicht genau bestimmen lässt. (ausser man betreibt etwas mathrmatik mit php)
Gruß
Daniel -
Dann müsste er beim content eben mit overflow: auto arbeiten... Ohne eine fixe Höhe, macht doch eine vertikale Mittestellung überhaupt gar keinen Sinn...
-
Hallo,
hab' mal eben eine Demo erstellt, wo die Seite immer zentriert ist und der Inhalt sich dynamisch der Höhe anpasst... Ich weiß zwar nicht, ob es das ist, was Du als Ergebnis haben wolltest, aber anschauen kostet bekanntlich nix!
http://staymyfriend.lima-city.de/demo/index.html -
Vergesst den Käse mit Overflow und Co. Es reicht aus wenn man ca 30-40 Px Abstand oben lässt um einen ähnlichen optischen Effekt zu erziehlen. Wenn der Inhalt zu klein ist (Höhe) dann wird der Obere Abstynd einfach erhöht.
Aber via Overflow grenzt man zum Beispiel mobile Endgeräte aus, die dann schlicht die Scrolleiste nicht anzeigen und somit den Inhalt nicht richtig darstellen. -
Danke an alle, ich möchte eh nur die Enter-Page in der Mitte haben und die hat eigentlich eine feste Höhe. Das was kaetzle geschrieben hat hat auch gut funktioniert! Danke!
Aber eine Frage hätte ich noch: Was muss ich verändern an dem Code
Damit nur Links und Rechts die Seite immer Mittig ist?#wrapper { position: absolute; width: 800px; margin-left: -400px; left: 50%; height: 500px; margin-top: -250px; top: 50%; }
Euer PC
Beitrag zuletzt geändert: 9.7.2009 21:13:38 von mypc -
Wie wäre es denn hiermit?
<table width="100%" height="100%"> <tr> <td align="center" valign="middle"> ... </td> </tr> </table> -
mypc schrieb:
Aber eine Frage hätte ich noch: Was muss ich verändern an dem Code
Damit nur Links und Rechts die Seite immer Mittig ist?#wrapper { position: absolute; width: 800px; margin-left: -400px; left: 50%; height: 500px; margin-top: -250px; top: 50%; }
Lass einfach das
margin-top: -250px; top: 50%;
weg, dann ist der Inhalt am oberen Rand. -
Probiers doch mit <center> und <table>
<table width="100%" height="100%"><tr><td><center>Dein ganzer Text</center></td></tr></table>
Beitrag zuletzt geändert: 13.7.2009 19:31:35 von r2d2-aeg -
r2d2-aeg schrieb:
Probiers doch mit <center> und <table>
<table width="100%" height="100%"><tr><td><center>Dein ganzer Text</center></td></tr></table>
gnade....
bitte nicht solche tabellenspiele.
Die css- variante von der Katze (oder was auch immer..) sind doch gut. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
