✔ div-Bereich zentriert am Bildschirm

Status
Nicht offen für weitere Antworten.
W

wernerschuster

Mitglied
Hallo!

vorweg: ich weiß - RTFM

Aber ich komm nicht drauf!

Wenn ich einen Container definiere, dann ist er zentriert am Bildschirm (falls er kleiner ist als die Auflösung)

Wenn er nicht mit position positioniert ist, kann ich aber keine anderen Container darin positionieren.

Wie bringe ich also meinen "Ober-Container" dazu, mit position in der Bildschirmmitte zu erscheinen - unabhängig von der Auflösung?!

Ist sicher einfach - aber wie gesagt, ich komm nicht drauf!

Danke für die Hilfe

werner
 
Hallo wernerschuster,

also ich verstehe die Frage nicht.
Wenn ich einen Container definiere, dann ist er zentriert am Bildschirm (falls er kleiner ist als die Auflösung)
Wenn er nicht mit position positioniert ist, kann ich aber keine anderen Container darin positionieren.
Zum Vergrößern anklicken....
  • Wenn man einen DIV-Block definiert, dann ist er wie alle Blockelemente erst mal nicht zentriert, sondern liegt links oben im Fenster.
  • Wenn er nicht mit "position: ..." positioniert ist, dann kann man auch andere Container dort hineinlegen und positionieren.
Hier das Beispiel:
HTML: 
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    <!--
    html, body {
    	width: 100%;
    	height: 100%;
    	margin: 0;
    	padding: 0;
    }
    body {
    	text-align: center;	/* horizontale Zentrierung */
    }
    #obercontainer {
    	width: 400px;
    	height: 400px;
    	margin: 30px auto;
    	text-align: left;	/* löscht die horizontale Zentrierung */
    	background-color: #FFC;
    }
    #untercontainer {
    	width: 200px;
    	height: 200px;
    	background-color: #CFC;
    }
    -->
    </style>
    </head>
    <body>
    <div id="obercontainer">
      obercontainer
      <div id="untercontainer">
    	untercontainer
      </div>
    </div>
    </body>
    </html>
Der übergeordnete DIV-Block wird mit "text-align:center;" im BODY-Selektor zentriert. Wenn die untergeorneten Elemente nicht weiter zentriert werden sollen, dann musst du diese Eigenschaft mit "text-align:left;" im übergeordneten Container wieder löschen. Netscape realisiert übrigens diese Zentrierung nur, wenn dem übergeordneten DIV-Block die Eigenschaften "margin-left:auto;" und "margin-right:auto;" zugefügt wurden.

Vielleicht meinst du aber: Wenn man einen DIV-Block mit "position:absolut;" in einem übergeordneten DIV-Block positionieren will, dann muss der übergeordnete Container auch mit "position:absolute;" positioniert sein.
Suchst Du dafür die Möglichkeit zur horizontalen Zentrierung?
 
Hallo Hela!

Danke für die ausführliche Antwort!
Es trifft das "Vielleicht meintest du..." zu!
Nur wenn der Obercontainer mit absolut zentriert ist, kann ich darin Container absolut positionieren.
Wie kann ich aber mit position: absolut den obercontainer horizontal zentrieren

Danke!
werner
 
Indem du den "Obercontainer" mit
Code: 
   #obercontainer {
   ...
   position: absolute;
   left: 50%;
   ...
   }
mit der oberen linken Ecke in die horizontale Mitte legst und ihn anschließend mit "margin-left:...;" um die halbe Containerbreite nach links zurückverschiebst. Dazu braucht der Container eine definierte Breite. Mit der vertikalen Zentrierung verfährt man analog.

Ein Beispiel mit horizontaler und vertikaler Zentrierung:
Code: 
   <html>
   <head>
   <title>Test</title>
   <style type="text/css">
   <!--
   html, body {
   	width: 100%;
   	height: 100%;
   	margin: 0;
   	padding: 0;
   }
   #obercontainer {
   	position: absolute;
   	top: 50%;  /* linke obere Ecke des Containers in die vert. Mitte legen */
   	left: 50%; /* linke obere Ecke des Containers in die horiz. Mitte legen */
   	width: 500px;
   	height: 400px;
   	margin-left: -250px; /* Container um die halbe Breite nach links verschieben */
   	margin-top: -200px;  /* Container um die halbe Höhe nach oben verschieben */
   	background-color: #FFC;
   }
   #untercontainer {
   	width: 200px;
   	height: 200px;
   	background-color: #CFC;
   }
   -->
   </style>
   </head>
   <body>
   <div id="obercontainer">
     obercontainer
     <div id="untercontainer">
   	untercontainer
     </div>
   </div>
   </body>
   </html>
Wie du im Beispiel sehen kannst, hat der Unterkontainer noch keine Positionierungseigenschaft erhalten und verhält sich auch wie ein normales Blockelement. Wenn du ihn jetzt im Obercontainer auf die gleiche Weise zentrieren wolltest, müsstest du das gleiche mit ihm auch machen (oder eben deine Vorstellungen realisieren).
 
Hallo wernerschuster,

noch ein Nachtrag:
Es ist nicht unbedingt notwendig den "Obercontainer" absolut zu positionieren, wenn in ihm "Untercontainer" absolut positioniert werden sollen. Es ist auch möglich dem übergeordneten DIV-Block die Eigenschaft "position:relative;" zu geben und in ihm dann weitere Elemente mit absoluter Positionierung unterzubringen. Siehe Beitrag von Quaese in http://www.tutorials.de/forum/showthread.php?t=180059.

Wichtig ist, dass übergeordnete DIV-Blöcke mit der Eigenschaft "position:static;" (Initialwert) keine Positionsreferenz bilden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück