✔ Problem bei position:absolute

P

Padde11

Grünschnabel
Hallo,
ich habe folgendes Problem:
ich bin dabei eine Website zu machen wobei der container absolut positioniert ist und die darin enthaltene Fußzeile auch...dies habe ich alles zentriert mit left:50% margin-left:-385px (width:770px)
meine Frage ist: kann ich der Fußzeile etwas mit der Wirkung wie margin-top geben damit der Inhalt nicht hinein laufen kann? Oder geht das nicht bei absoluter Positionierung?

lg Padde11
 
Moin,

die horizontale Zentrierung der Blöcke lässt sich auch mit relativer Positionierung umsetzen.

Besser noch, du verzichtest auf diese Technik, die den Nachteil hat, dass der linke Bereich der Container aus dem Fenster verschwindet, wenn der horizontale Viewport die 770px unterschreitet, und zentrierst die Elemente einfach mittels margin:0 auto.

Falls du den Footer am unteren Ende der Box absolut positioniert hast, und er mit zunehmenden Inhalt nach unten rücken soll, dürfte dich mein Webmaster-FAQ-Artikel CSS Wie richte ich eine Box am unteren Rand der Elternbox aus? interessieren, der diese Vorgabe erfüllt, indem auch hier die Elternbox relativ positioniert ist.

Vielleicht ist dir aber auch schon damit geholfen, für den Seiteninhalt einen unteren Innenabstand padding-bottom zu definieren, der sich an der Höhe des Footers orientiert, und den Inhalt nicht in den Footerbereich hineinlaufen lässt.

mfg Maik
 
Danke für die schnelle Antwort...
ich denke das mit dem padding-bottom müsste hinhauen....ich muss aber leider absolut positionieren weil bei relativer Postionierung "min-height" nicht wirkt (oder mache ich was falsch?)
 
Padde11 hat gesagt.:
ich muss aber leider absolut positionieren weil bei relativer Postionierung "min-height" nicht wirkt (oder mache ich was falsch?)
Zum Vergrößern anklicken....
Ob du was falsch machst, kann ich nicht mit Sicherheit sagen, da ich deinen detailierten Code im einzelnen nicht kenne. Normal ist es zumindest nicht.

mfg Maik
 
Hier mal der (sehr) gekürzte Code mit ein paar Farben:

HTML:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body>

<div id="container">
    <div id="header">
    </div>     <!-- header -->

    <div id="content">
         <p>Hier der ganze Inhalt</p>
    </div>    <!-- content -->

    <div id="footer">
        <address>
            Hier die Adresse
            <br />
            usw.
        </address>
    </div>     <!-- footer -->
</div>     <!-- container -->

</body>
</html>

...und CSS:

Code: 
body {
    background-color: #D6D6D6;
    color: #FFF;
}

#container {
    position: absolute;
    left: 50%;
    width: 770px;
    margin-left: -385px;
    background-color: #FFF;
    color: #000;
    min-height: 97%;
}

#header {
    background-color: red;
    height: 75px;
}


#content {
    margin-bottom: 40px;
}


#footer {
    position: absolute;
    width: 730px;
    border-top: 1px solid gray;
    bottom: 0;
    background-color: aqua;
}

wenn der container relativ eingestellt ist, wird min-height nichts bringen
 
Deinem Stylesheet fehlt lediglich eine Regel :)

CSS: 
html,body { height:100%; }

#container {
    position: relative;
    left: 50%;
    width: 770px;
    margin-left: -385px;
    background-color: #FFF;
    color: #000;
    min-height: 97%;
}

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück