Positionierung von Container horizontal

mayhemtl · #1 (**permalink**) 03.08.2007, 11:34

Wie ich einen Container horizontal und vertikal zentriere ist kein Problem. Leider wird es ein Problem, wenn der Container größer ist, als der Browser.
Ich möchte gerne einen Container mittig zentrieren, aber wenn die Auflösung wesentlich kleiner (z. B. 800x600) ist, als der Container, dann soll der Container oben und links andocken, so dass oben uns links immer alles sichtbar ist.

Mittig zentriert:

Code:

html, body
{
	height:100%;
	max-height:100%;
	margin:0px;
	padding:0px;
	background-color:#00003a;
	overflow:auto;
}
#main
{
	position:relative;
	margin:-350px auto;
	top:50%;
	width:1000px;
	height:700px;
	background-color:#334433;
}

Die Positionierung horizontal ist kein Problem, so dass bei einem Container, der größer als der Browser ist, dieser Container links andockt. Das habe ich einfach mit margin: -350px auto; realisiert.

Die Positionierung vertikal ist wesentlich schwieriger, da man nicht mit margin:auto; arbeiten kann.
Realisiert habe ich es folgendermaßen: Man nehme die Hälfte des Browsers von oben (also top:50%;). Da der Container eine feste Größe hat (in diesem Fall 700px), muss man den Container somit um die Hälfte wieder nach oben verschieben (also margin:-350px auto; ).

Logischerweise ist bei einem zu großen Container die Hälfte wesentlich größer als 50% des Browsers. Zur Vereinfachung:

IDEAL:
Breite und Höhe des Containers: 1000x700px
Breite und Höhe des Browsers: 1024x768px
---------------------------------------------
Hälfte der Höhe des Browsers: 384px
- Hälfte der Höhe des Containers: 350px
===================================
Bleiben oben 34px Freiraum übrig!!!! SUPER, PASST!!!

PROBLEM:
Breite und Höhe des Containers: 1000x700px
Breite und Höhe des Browsers: 800x600px
---------------------------------------------
Hälfte der Höhe des Browsers: 300px
- Hälfte der Höhe des Containers: 350px
===================================
Bleiben oben -50px übrig!!! Schlecht, da jetzt 50px vom Container
nicht zu sehen sind. Der Scrollbalken ist nur zum Scrollen nach unten
nicht aber zum hochscrollen!!!

Wäre super, wenn jemand eine Idee hat, wie man es hin bekommt, dass der Container oben aneckt und nicht überläuft.

Danke für Hilfe!!!

Hier der Problemlink: Timo Home

fricca · #2 (**permalink**) 03.08.2007, 11:37

Siehe FAQ Punkt 5.

mayhemtl · #3 (**permalink**) 03.08.2007, 11:41

Dort wird das Problem leider nicht angesprochen!

fricca · #4 (**permalink**) 03.08.2007, 11:42

Doch.
Es gibt sogar einen Link zu einem fertigen Beispiel.

mayhemtl · #5 (**permalink**) 03.08.2007, 12:04

Wie kommt es, dass der Container oben andockt?

Habe den Quellcode etwas übersichtlicher editiert:

style.css:

Code:

html, body
{
	height:100%;
	margin:0;
	padding:0;
	text-align:center; /* für IE QuirksModus */
}
#distance
{ 
	width:1px;
	height:50%;
	background-color:#fc6;
	margin-bottom:-13.75em; /* die Hälfte von der Höhe des Containers */
	float:left;
}
#container
{
	margin:0 auto;
	position:relative; /* Setzt container vor distance */
	text-align:left;
	height:27.5em;
	width:45em;
	clear:left;
	background-color:#CCCCCC;
}

index.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mittig</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

	<div id="distance"></div>
	<div id="container"> 
	  <div>Test</div>
	</div>

</body>
</html>

fricca · #6 (**permalink**) 03.08.2007, 12:27

Das clear-Element wandert nicht höher, als es seine Normalposition vorsieht.

Bitte, gern geschehen.

mayhemtl · #7 (**permalink**) 03.08.2007, 13:20

Danke, habs mal verinnerlicht. Jetzt versteh ich denn Sinn dahinter.

inDigo · #8 (**permalink**) 11.08.2007, 15:18

allen hallo und einen guten tag

ich möchte deswegen keinen neuen thread eröffnen
und hänge einfach folgende frage dran:

in einem der faq-beispiele habe ich dies gefunden

body {
background-color:#fc6;
color:#630;
font:100.01%/1.4 sans-serif;
text-align:center; /* horizontal centering for IE Win quirks */
}

den hack "font:100.01%" habe ich hier schon gesehen und benutze ihn auch,
aber was bewirkt der teil "/1.4 sans-serif" ?
füge ich diesen teil dem vorhandenen hinzu, ändert sich die höhe der schrift,
aber ich verstehe nicht warum das und was da passiert.
mag mir das jemand versuchen zu erklären ?

heiko_rs · #9 (**permalink**) 11.08.2007, 15:23

Zitat:

Zitat von inDigo

/1.4

line-height (= Zeilenhöhe).

Zitat:

Zitat von inDigo

sans-serif

Die serifenlose default-Schrift des Browsers (z.B. Arial oder Verdana).

inDigo · #10 (**permalink**) 11.08.2007, 15:25

danke.
so einfach

der wald, die vielen bäume, und ich mittendrin ...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Container mit nowrap wächst nicht horizontal mit	blackcoffee2	CSS	7	17.01.2011 15:42
Fehler bei Positionierung von DIV Container	Sash	CSS	3	19.05.2009 19:28
div Container Positionierung	maggie	CSS	2	23.10.2008 15:22
container horizontal und vertikal zentrieren	forumwurm	CSS	11	30.08.2004 16:30
Problem bei Positionierung eines <div> im Container	Robse	CSS	2	12.06.2004 12:43