• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Horizontal Mittig, oben und unten anstoßen

T

T!P-TOP

Mitglied
Ist es möglich einen Container Horizontal mittig zu positionieren, also das links und rechts der selbe Abstand ist, der obere Rand des Containers soll ganz oben anstoßen und der untere Rand soll unten anstoßen.
Am unteren Rand im Container befindet sich ein Footer (mit Background-Image) und am Oberen Rand ein Header (ebenfalls mit grafik). Zwischen den beiden Grafiken ist Freiraum, der aber bei mehr Textinhalt größer (in die Höhe gezogen) wird.

Einmal hab ich das aus Zufall hinbekommen, aber jetzt funzt das nicht mehr :/


Ne Idee wie ich das hinbiegen kann?
 
Nur der Bereich zwischen Und Header und Footer soll gescrollet werden, also der Content-Teil. Will aber keinen I-Frame benützen - auch net Div-Overflow
 
Ich glaube so. Dem IE musst du in manchen (offenbar nur IE6) Version allerdings per JavaScript beibringen, wie position: fixed; geht. Suche nach "ie position fixed" oder so.

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <style type="text/css">
body { padding: 0; margin: 0; }
#header { height: 20px; position: fixed; top: 0; left: 0; right: 0; background: red; }
#footer { height: 20px; position: fixed; bottom: 0; left: 0; right: 0; background: blue; }
#content { margin: 20px 0; padding: 10px; border: 5px solid green; }
        </style>
    </head>

    <body>
        <div id="header">#header</div>

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

        <div id="footer">#footer</div>
    </body>

</html>
 
Hey klasse. Nur ich hab für alle 3 Bereich eine größe von 1000px.

body { padding: 0; margin: 0; }
#header { height: 20px; width: 1000px; position: fixed; top: 0; left: 0; right: 0; background: red; }
#footer { height: 20px; width: 1000px; position: fixed; bottom: 0; left: 0; right: 0; background: blue; }
#content { margin: 20px 0; width: 1000px; padding: 10px; border: 5px solid green; }

Und sobald ich die breits reinsetz - verkleinert sich das zwar auf 1000px, ist dann aber nicht mittig :/

ie sieht das mit Browsertauglichkeit aus? Wird das von den meisten richtig umgesetzt?



//EDIT: Problem gelöst
 
Zuletzt bearbeitet:
Im Firefox, Chromium und IE8 geht es, der IE7 "ignoriert" das margin-top von #content, IE6 habe ich oben beschrieben.

Ein halber Fix für das IE7-Problem wäre es, noch ein Element um #content zu legen und statt margin für #content dort padding zu setzen. (Das ist sicher irgendein standard Box-Model-Bug im IE, der nichts mit dieser Technik zu tun hat. Ich habe nicht weiter nachgeforscht.)

Auch wenn du für die andere Sache bereits eine Lösung gefunden hast, hier noch eine Idee:

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <style type="text/css">
body { padding: 0; margin: 0; }

#header { height: 20px; position: fixed; top: 0; left: 0; right: 0; }
#footer { height: 20px; position: fixed; bottom: 0; left: 0; right: 0; }
#content { margin: 0 auto; width: 970px; padding: 10px; border: 5px solid green; }

#header .wrapper { width: 1000px; margin: 0 auto; background: red; }
#footer .wrapper { width: 1000px; margin: 0 auto; background: blue; }

#header .wrapper,
#footer .wrapper { height: 20px; }

#content-wrapper { padding: 20px 0; }
        </style>
    </head>

    <body>
        <div id="header">
            <div class="wrapper">#header</div>
        </div>

        <div id="content-wrapper">
            <div id="content">
                <p style="height: 2000px;">Test</p>
            </div>
        </div>

        <div id="footer">
            <div class="wrapper">#footer</div>
        </div>
    </body>

</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben