Variabel vertikal zentrieren

sniffles

Hi,

Ich habe zwei Probleme und hoffe jemand kann mir weiterhelfen.

Mein HTML Dokument besteht aus 3 DIV's. Das erste lädt ein Hintergrundbild, dann kommt das mittlere (hier soll ein Flashfilm abgespielt werden) und ganz unten die zweite Hintergrundgrafik.
Hier mal der Code:

HTML

<body>


        <div id="bg_top">
            <img id="alu_bg_top" src="images/alu_bg_top.jpg" border="0" alt="ImageTop" />
        </div>


           <div id="content"></div>

        <div id="bg_bottom"> 
               <img id="alu_bg_bottom" src="images/alu_bg_bottom.jpg" border="0" alt="ImageBottom" />
        </div>

    </body>

Alles anzeigen

Die CSS Attribute werden von dieser externen Datei geladen:

Code

*
{
    margin: 0;
    padding: 0;
}


html, body
{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
}


#bg_top 
{
    width: 100%;
    height: 200px;
}


#bg_bottom
{
    width: 100%;
    height: 300px;
    bottom: 0;
    position: absolute;
}


#alu_bg_top
{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}


#alu_bg_bottom
{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}


#content {
    z-index: 2;
    overflow: hidden;
    width: 600px;
    margin: 0 auto;
    min-height: 400px;
    position: relative;
    clear: left;
    border: 1px solid white;
}

Alles anzeigen

Mein Ziel ist es eine Seite zu erstellen, welche sich den Bildschirmgrössen anpasst.

Die Grafiken unten und oben sind absolut positioniert und nur die Höhe der mittleren DIV verändert sich beim betrachten auf verschieden grossen Bildschirmen.
Hier ist auch schon das erste Problem, die mittlere DIV soll zwar flexibel in der Höhe sein, aber nicht kleiner als 400px werden (weil der Flashfilm 400px hoch ist). Stattdessen soll sich die Grafik in der untersten DIV verkleinern.

Bei der zweiten Sache geht es darum, dass sich die mittlere DIV variabel, vertikal anpassen soll. Also die mittlere DIV soll vertikal zentriert sein und genau mittig zwischen den beiden Hintergrundgrafiken sein. Wenn ich also den Browser auf einem grossen Screen öffne, soll der Flashfilm im Zentrum sein und oben und unten gleich viel Abstand zu den beiden Hintergrundbildern.

Ich hoffe jemand kann mit weiterhelfen und warte gespannt auf Lösungsvorschlge.
Danke schon mal im Vorraus.

Snifflles

threadi

Zitat von sniffles

Mein Ziel ist es eine Seite zu erstellen, welche sich den Bildschirmgrössen anpasst.

Webseiten passt man nicht an Bildschirmgrößen sondern an Viewports an. Die wenigstens Internetnutzer surfen nämlich mit einem Browser im Vollbild-Modus. Daher kannst Du auch nicht von Auflösungen ausgehen sondern musst immer von diesen einige Pixel abziehen um die Viewport-Maße zu wissen. Da es davon viele gibt, kann man nicht von festen Maßen ausgehen.

Zitat

Hier ist auch schon das erste Problem, die mittlere DIV soll zwar flexibel in der Höhe sein, aber nicht kleiner als 400px werden (weil der Flashfilm 400px hoch ist). Stattdessen soll sich die Grafik in der untersten DIV verkleinern.

Verzichte auf absolut positionierte Elemente. Denn dadurch entsteht hier das Problem, dass der untere Bereich immer über dem Contentbereich liegt. Positioniere alle 3 Bereiche überhaupt nicht und gibt dem mittleren eine Mindesthöhe von 400px.

sniffles

Hallo,

Erstmal vielen Dank für die schnelle Rückantwort und die Erläuterung bezüglich Viewport.

Eigentlich möchte ich gerne, dass die untere Grafik fix bleibt (aktuell 300px höhe), deswegen auch die absolute Positionierung.
Die mittlere DIV soll variabel sein, resp. soll sich immer im Zentrum des Bildschirmes befinden und den zwischenraum zu den Hintergrundgrafiken oben und unten ausgleichen. als erstes kommt mir das margin: auto; oder eine prozentuale Angabe in den Sinn.

Das margin: auto; habe ich aber schon drin und bewirkt die horizontale zentrierung. Wie soll ich hier die vertikale hinbekommen?

Ich bedanke mich im Vorraus.

sniffles

Eine Lösung, die ich mit Berücksichtigung deines Input's, die positions zu löschen gebastelt habe wäre:

Code

*
{
    margin: 0;
    padding: 0;
}


html, body
{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
}


#bg_top 
{
    width: 100%;
[COLOR=#ff0000]     height: auto;[/COLOR]
}


#bg_bottom
{
    width: 100%;
   [COLOR=#ff0000] height: auto;[/COLOR]
    bottom: 0;
}


#alu_bg_top
{
    width: 100%;
    height: 100%;
    z-index: 1;
}


#alu_bg_bottom
{
    width: 100%;
    height: 100%;
    z-index: 1;
}


#content {
    z-index: 2;
    overflow: hidden;
    width: 600px;
    [COLOR=#ff0000]margin: 2% auto;[/COLOR]
    min-height: 400px;
    clear: left;
    border: 1px solid white;
}

Alles anzeigen

Ich habe noch etwas weitergestöbert im Forum und gelesen, dass es am besten und zeigemässten wäre wenn man als Hintergrundgrafik ein grosses Bild per CSS zuweist und dann die DIV's ausrichtet.
Was denkst du?

Danke und Gruss

threadi

Zitat von sniffles

Wie soll ich hier die vertikale hinbekommen?

Siehe:
http://www.ich-lerne-css.de/Style/Examples/007/center.html
http://www.ohne-css.gehts-gar.net/0002.php

sniffles

Danke für die Links.
Ich weiss dass ich mit margin: auto; die Ausrichtung machen kann und die Lösung in meniem letzten Post funktioniert gut.

Grene würde ich noch deine Meinung zu

Zitat

Ich habe noch etwas weitergestöbert im Forum und gelesen, dass es am besten und zeigemässten wäre wenn man als Hintergrundgrafik ein grosses Bild per CSS zuweist und dann die DIV's ausrichtet.

Vielen Dank
Gruss

Variabel vertikal zentrieren

Tags

Benutzer online in diesem Thema