Horizontales und vertikales Zentrieren von DIV's

Crackp0t · 20.03.2010

Ich bins mal wieder.

Habe an meiner HP kräftig weitergebastelt und stehe nun vor folgendem Problem:

Da ich nicht weiß, welche Bildschirmauflösung der Betrachter genau verwendet möchte ich meine (absolut positionierten) DIV horizontal als auch vertikal zentrieren. Ersteres ist ja kein Problem in Verbindung mit einem entsprechenden Parent-Element welches relativ mit Margin:auto zentriert wird. Zweiteres bereitet aber schon ehr schwierigkeiten.

Ich habe Vertical centering in valid CSS in Google bereits gefunden und in dem Beispiel scheint es einigermaßen zu funktionieren. Aber ich brauche nur den Quelltext in meinen Editor zu kopieren, als HTML abzuspeichern und im selben Browser anzeigen lassen... und schon funktioniert es nicht mehr.

Leider bin ich auch etwas ratlos, wie ich die Lösung in meinen jetzigen Quelltext implementieren sollte. Stellt das "outer" in meinem Fall den DIV "main_box" da? Und "middle" den DIV "centering"? Oder muss ich noch mehr DIV verschachteln?

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript">
    
    function overlay() {
        if (document.getElementById("pic_overlay_box").style.display == "none") {
            document.getElementById("pic_overlay_box").style.display = "block";
        } else {
            document.getElementById("pic_overlay_box").style.display = "none";
        }
    }
    
   </script>
</head>

<body>

<div id="main_box">
    <div id="pic_overlay_box" style="display: none">
        <div id="big_pic_box">
            <p id="close" onclick="overlay()">x</p>
            <div id="image_menu" onmouseover='document.getElementById("menu_inner").style.display="block"' onmouseout='document.getElementById("menu_inner").style.display="none"' >
            <div id="menu_inner"></div>
            </div>
        </div>
    </div>

<div id="centering">
    
    <div id="thumb_box">
     <div id="thumb_box_inner">
        <div id="thumbnail" onclick="overlay()"></div>
     </div>
    </div>
    
    <div id="content_box">
    
      <div id="prev_image"></div>
      <div id="info_box"></div>
    
    </div>

</div>    
    
</div>

</body>
</html>

Code:

/*##################global stuff##################*/

body {
    background-color:#000;
    margin: 0px;
}

#main_box {
    /*border:1px solid #FFFFFF;*/
    
    position: relative;
    margin:auto;
    height: 100%;
    width: 100%;
    }

#centering {

position: relative;
margin: auto;
width: 750px;
height: 98%
}    

/*##################content##################*/

#prev_image {
background-color: #FFF;

position: relative;
margin: 40px 10px;
height: 350px;
width: 350px;
float: left;
}

#info_box {
background-color: #FFF;

position: relative;
margin: 40px 10px;
height: 350px;
width: 350px;
float: right;
}

/*##################thumbnails##################*/

#thumb_box {
    /*background-color: #515151;*/
    
    position: absolute;
    margin: auto;
    padding: 0px 0px;
    bottom: 5%;
    width: 750px;
    height: 120px;

}

#thumb_box_inner {
    background-color: #000;
    
    position: relative;
    margin: auto;
    width: 720px;
    height: 120px;
}

#thumbnail {
    background-color: #FFF;
    
    position: relative;
    margin: 10px 10px;
    height: 100px;
    width: 100px;
    float: left;
}

/*##################overlay box##################*/

#pic_overlay_box {
    /*border:1px solid #3C3;*/
    background-image: url("t_back2.png");
        
    position: absolute;
    margin: auto;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9998;
}

#big_pic_box {
    /*border: 1px solid #FFF;*/
    background-color: #000;
    
    position: relative;
    margin: auto;
    top: 1%;
    width: 420px;
    height: 550px;
    z-index: 9999;
}

/*##################overlay box menu##################*/

#image_menu {
    /*border: 1px solid #FFF;*/
            
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 50px;
}

#menu_inner {
    background-image: url("t_back2.png");
    /*border: 1px solid #FFF;*/
    /*display: none;*/
    display: none;
    
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 50px;
}

p#close {
    color: #FFF;
    font-size: 14pt;
    font-weight: bold;

    position: absolute;
    top: -25px;
    right: 2px;
        
}

p#close:hover {
    
    cursor: pointer;
    }

Dressing · 20.03.2010

AW: Horizontales und vertikales Zentrieren von DIV's

Die 100%ige Höhe der #main_box bezieht sich auf das übergeordnete Element, in diesem Falle body. Dieser muss also erstmal auf 100% Höhe gebracht werden, dann die main_box.

Code:

html,body {
    height:100%;
}

#main_box{
    position:relative;
    margin: auto; /* Div soll zentriert werden */
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height:auto !important; /* Important Regel für moderne Browser */
    height:100%; /* Mindesthöhe für den IE */
    overflow: hidden !important; /* FF Scroll-leiste */ 
}

Crackp0t · 20.03.2010

AW: Horizontales und vertikales Zentrieren von DIV's

Tut mir Leid, ich kann deinem Gedankengang nicht ganz folgen.
Wo besteht der Zusammenhang zwischen der Höhe dieser Elemente und der vertikalen Zentrierung der DIV?

Dressing · 20.03.2010

AW: Horizontales und vertikales Zentrieren von DIV's

Sorry, dann habe ich das Problem wohl noch nicht ganz richtig verstanden, dachte du willst die komplette Seite vertikal zentriert haben. Welche divs sollen denn vertikal zentriert werden?

Crackp0t · 20.03.2010

AW: Horizontales und vertikales Zentrieren von DIV's

Alle Child-Elemente des DIV mit der ID "centering" sollen horizontal als auch vertikal zentriert werden. Also egal wie groß das Browserfenster ist, diese DIV sollen nicht auseinandergezogen werden.

Dressing · 20.03.2010

AW: Horizontales und vertikales Zentrieren von DIV's

Ich hab mit das Beispiel auf der von dir verlinkten Seite nochmal angeschaut: "outer" wäre ja in diesem Falle deine main_box mit entweder einer festen Höhe oder, wie in meinem vorherigen Post, einer Höhe von 100%. Dann brauchst du noch einen container als "middle", den du dann mit top:50% in der vertikalen Mitte der main_box positionierst. "inner" wäre dann dein div "centering", welcher dann mit top:-50% um die hälfte seines Inhaltes nach oben verschoben wird.

Code:

<div id="main_box">
  <div id="pic_overlay_box">
   .....
  </div>

  <div id="[COLOR=#ff0000]middle[/COLOR]">
    <div id="[COLOR=black]centering[/COLOR]">
      dein Inhalt
    </div>
  </div>

</div>

Folgende Ergänzungen zur css:

Code:

    #outer {height: 400px; overflow: hidden; [COLOR=#0000ff]position:       relative;[/COLOR]}
    [COLOR=#009933]#outer[id] {display: table; position: static;}[/COLOR]
    
    [COLOR=#0000ff]#middle {position: absolute; top: 50%;}[/COLOR]     [COLOR=#808080]/* for explorer only*/[/COLOR]
    [COLOR=#009933]#middle[id] {display: table-cell; vertical-align:       middle; width: 100%;}[/COLOR]
    
    [COLOR=#0000ff]#inner {position: relative; top: -50%}[/COLOR]     [COLOR=#808080]/* for explorer only */[/COLOR]
    [COLOR=#808080]/* optional: #inner[id] {position: static;} */[/COLOR]

Wird die main_box bei dir denn so schon auf 100% Höhe angezeigt?

Crackp0t · 21.03.2010

AW: Horizontales und vertikales Zentrieren von DIV's

Hab den Käse jetzt anders gelöst... Das Stylesheet etwas ungebaut und dann einfach ne Javascript Funktion geschrieben, die den Top-Wert des centering DIV nach window.innerHeight anpasst

Aber trotzdem: Danke für deine Hilfe

Dressing · 21.03.2010

AW: Horizontales und vertikales Zentrieren von DIV's

Ist vielleicht auch die bessere Lösung, bei den Höhenangaben per CSS die verschiedenen Browser zu berücksichtigen, so dass es plattformübergreifend richtig dargestellt wird macht auch keinen Spaß

Magst vielleicht den Link zu deiner Seite posten, so dass man sich das Endergebnis dann auch anschaun kann?

Crackp0t · 21.03.2010

AW: Horizontales und vertikales Zentrieren von DIV's

Wenn sie fertig ist, werde ich sie evtl hochladen. Die Seite selber ist eigentlich eine Gallerie auf einer CD.