zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Positionierung von Container horizontal

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.08.2007, 12:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2007
Beiträge: 13
mayhemtl befindet sich auf einem aufstrebenden Ast
Standard Positionierung von Container horizontal

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.08.2007, 12:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Siehe FAQ Punkt 5.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.08.2007, 12:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2007
Beiträge: 13
mayhemtl befindet sich auf einem aufstrebenden Ast
Standard

Dort wird das Problem leider nicht angesprochen!
Mit Zitat antworten
  #4 (permalink)  
Alt 03.08.2007, 12:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Doch.
Es gibt sogar einen Link zu einem fertigen Beispiel.
Mit Zitat antworten
  #5 (permalink)  
Alt 03.08.2007, 13:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2007
Beiträge: 13
mayhemtl befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #6 (permalink)  
Alt 03.08.2007, 13:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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

Bitte, gern geschehen.
Mit Zitat antworten
  #7 (permalink)  
Alt 03.08.2007, 14:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.08.2007
Beiträge: 13
mayhemtl befindet sich auf einem aufstrebenden Ast
Standard

Danke, habs mal verinnerlicht. Jetzt versteh ich denn Sinn dahinter.
Mit Zitat antworten
  #8 (permalink)  
Alt 11.08.2007, 16:18
Benutzer
neuer user
 
Registriert seit: 10.03.2005
Beiträge: 30
inDigo befindet sich auf einem aufstrebenden Ast
Standard dazu eine andere frage ...

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 ?

Mit Zitat antworten
  #9 (permalink)  
Alt 11.08.2007, 16:23
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von inDigo Beitrag anzeigen
/1.4
line-height (= Zeilenhöhe).

Zitat:
Zitat von inDigo Beitrag anzeigen
sans-serif
Die serifenlose default-Schrift des Browsers (z.B. Arial oder Verdana).
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.08.2007, 16:25
Benutzer
neuer user
 
Registriert seit: 10.03.2005
Beiträge: 30
inDigo befindet sich auf einem aufstrebenden Ast
Standard

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

Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:07 Uhr.