Inhalt zentriert ausrichten

[Rupp]

Hallo,

ich habe eine einfache, und zugegeben ziemlich dumme Frage:
Ich habe eine einfache Webseite, mit CSS strukturiert. Nun möchte ich den Layer für den Inhalt immer zentriert positionieren. Das habe ich mit

margin:0 auto 0 auto;

hinbekommen.

Jetzt möchte ich aber noch, dass der Layer vom oberen Bildschirmrand bis zum untern durchgeht (ohne scrollbalken). Also quasi eine Höhe von 100% hat, die jedoch ohne "Position:absolute / fixed / static" tag nicht umgesetzt wird!
wie kann ich das Problem lösen? bei der webseite:
http://www.streetsoflife.com/
ist das jedenfalls so gelöst. Habe mir die CSS dateien auch mal angesehen, aber nichts informatives finden können!

Ich hoffe ihr könnt mir helfen!

Danke,
Rupp

 

[moses_78]

....http://www.streetsoflife.com/.....

Bei mir hat die keine Höhe von 100%, siehe http://www.streetsoflife.com/index.php?s=ff

Ansonsten: Absolute Positionierung, oder einen zentrierten Hintergrund,
der nur vertikal wiederholt wird, und so den Eindruck erweckt, als hätte
die Sektion mit dem Inhalt tatsächlich eine Höhe von 100%.

 

[Galanos]

Da gibt's einige Techniken, aber wenn man Inhalte mit nicht definierten (z.B. dynamischen) Dimensionen hat, fuehrt (soweit ich recherchiert hatte) nichts an der "guten" alten seitenumfassenden Tabelle vorbei:

<table width="100%" height="100%" align="center" valign="middle">
<tr>
<td>
INHALT
</td>
</tr>
</table>

Wenn du weisst, wie hoch dein Inhalt wird, kannst du seinem Elternelement 50% Padding oben und dem Objekt selber einen negativen Margin seiner Hoehe nach oben geben.
Beispielsweise wird ein <div> mit der festen Groesse von 164 Pixeln in einem Eltern-<div> so vertikal zentriert:

Das Eltern-<div> bekommt:

padding-top: 50%;

Das Objekt selber bekommt:

margin-top: -82px;

Wenn du das Objekt auf der sichtbaren Seite zentrieren willst, muss das Eltern-<div> natuerlich seitenumfassend sein.

Wenn du durch die CSS-Artikel auf http://www.alistapart.com stoeberst, wirst du noch eine Handvoll anderer Methoden zum vertikalen Zentrieren finden.

 

[naomi_watts]

hallo rupp,

ich gehe mal davon aus, dass du liquid design css einsetzt und nicht absolut positioning css. ich habe's zwar nur mit absolut-positioning umgesetzt, aber mit liquid sollte es auch gehen. du fragst einfach über js die browserfensterhöhe ab und korrigiert anschließend über dom die höhe von der entsprechenden div-box.

grüße naomi

 

[Rupp]

hallo rupp,

ich gehe mal davon aus, dass du liquid design css einsetzt und nicht absolut positioning css. ich habe's zwar nur mit absolut-positioning umgesetzt, aber mit liquid sollte es auch gehen. du fragst einfach über js die browserfensterhöhe ab und korrigiert anschließend über dom die höhe von der entsprechenden div-box.

grüße naomi

das wär natürlich ne super idee...
aber okay, wenn das anders nicht möglich ist, dann werd ichs mit einer absoluten positionierung machen! ist nicht weiter tragisch hoffe ich... :/

 

[Little Buddha]

wie kann ich das Problem lösen?

Einfach, effizient und ohne Java Script: http://www.css4you.de/wslayout1/ex0001.html

Je nach Einsatz reicht sogar ein simples

html { 
   height: 100%; 
   margin-bottom: -50px; 
}

 

[Galanos]

Herrje, ist das peinlich. Ich habe erst jetzt geblickt, dass es gar nicht um vertikales Zentrieren geht
Tut mir Leid, vielleicht sollte man Posts nicht nur zu Ende, sondern auch sorgfaeltig lesen und nicht nur ueberfliegen.

Zum eigentlichen Thema:
Du kannst dich auch der Technik der Faux-Columns bedienen, auch wenn du nur eine Spalte hast.
Einfach dem Body eine bestimmte Breite geben, ein Hintergrundbild auf die gleich Breite anlegen und mit:

background:url(hintergrund.gif) repeat-y 50% 0;

mittig nach oben setzen und vertikal wiederholen (natuerlich in #body {…}).

Ich kann dir eine URL zu einem Beispiel im Bau schicken, falls es dich interessiert. Einfach PM schreiben.

 

[hobbyuser]

Hi Rupp

eigentlich ist das kein Problem. Du hast eine Div in die du alle Inhalte dieser gibst du eine ID (z.B. container), dann benötigst du nur noch ein wenig CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

<head>
	<title>Musterseite</title>
	<style type="text/css">
	body {
		margin:0;
		padding:0;
		text-align:center
	}
	#container {
		margin:0 auto;
		width:600px;
		min-height:100%;
		background-color:#e0e0e0;
	}
	</style>
</head>
<body>

	<div id="container">INHALT<div>

</body>
</html>

Natürlich wäre es besser die CSS Anweisungen in eine extra Datei zu schreiben, dass ist für ein Beispiel aber unnötig.

Gruß
Hobbyuser

PS: Ich hätte gerne die HTML-Codes des Boards benutzt, leider wurde damit der Quelltext falsch formatiert (Zeilenumbrüche).

 

[Rupp]

danke leute... das ist der grund warum ich dieses forum liebe