Ergebnis 1 bis 6 von 6

Thema: Variabel vertikal zentrieren

  1. #1
    HTML Newbie
    Registriert seit
    22.04.2012
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Variabel vertikal zentrieren

    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-Code:
        <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>
    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;
    }
    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Variabel vertikal zentrieren

    Zitat Zitat von sniffles Beitrag anzeigen
    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.

    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.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    22.04.2012
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Variabel vertikal zentrieren

    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.

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    22.04.2012
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Variabel vertikal zentrieren

    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%;
         height: auto;
    }
    
    #bg_bottom
    {
        width: 100%;
        height: auto;
        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;
        margin: 2% auto;
        min-height: 400px;
        clear: left;
        border: 1px solid white;
    }
    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

  5. #5
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Variabel vertikal zentrieren

    Zitat Zitat von sniffles Beitrag anzeigen
    Wie soll ich hier die vertikale hinbekommen?
    Siehe:
    http://www.ich-lerne-css.de/Style/Ex...07/center.html
    http://www.ohne-css.gehts-gar.net/0002.php

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    22.04.2012
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Variabel vertikal zentrieren

    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
    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

Ähnliche Themen

  1. Link im <li> vertikal zentrieren
    Von Darkxor im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 24.01.2010, 18:39
  2. Vertikal zentrieren
    Von schrepfer im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 08.04.2008, 17:21
  3. <div> Element vertikal zentrieren
    Von Tikonteroga im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 23.12.2006, 14:20
  4. Website Vertikal Zentrieren
    Von echo91 im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 12.10.2006, 17:06
  5. Tabelle vertikal zentrieren
    Von step5 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 13.09.2005, 15:54

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •