XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Footer am unteren Seitenrand (http://xhtmlforum.de/showthread.php?t=62614)

dows 07.10.2010 15:14

Footer am unteren Seitenrand bei absoluten Content-DIV
 
Hallo,
ich sitze gerade an dieser Seite
http://i52.tinypic.com/jb2t6r_th.jpg
Die Navigation, der Content und der 'Inner'-Footer (Impressum) sind in einem mittig ausgerichteten, absolut positionierten Wrapper eingeschlossen. (siehe unten)

Nun ist mein Problem, dass der dunkelgraue Footer wenn ich ihn in den Wrapper packe nicht 100% breit ist. Wenn ich ihn außerhalb des Wrappers definiere, hängt er knapp unter dem Header.

Wie bekomme ich es hin, dass der Footer immer am unteren Seitenrand ist?

Anhang:

HTML:
HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="canonical" href="">
        <meta name="description" content="" />
        <title>Title</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="header"><a href="./" title="Zurück zur Startseite" id="logo"></a></div>
        <div id="wrapper">
            <ul id="navi">
                <li><a id="akt" href="./" title="Zurück zur Startseite">Startseite</a></li>
                <li><a href="test.html" title="">Item</a></li>
                <li><a href="./" title="">Item</a></li>
                <li><a href="./" title="">Item</a></li>
                <li style="width:163px;"><a style="width:163px;" href="./" title="">Item</a></li>
                <li style="width:100px;"><a style="width:100px;" href="./" title="">Item</a></li>
            </ul>
            <div id="content">
                    <div id="content_text">
                        Content
            </div>
            <div id="upperfooter">
                <ul id="footerNavi">
                    <li><a href="impressum.html" rel="nofollow" title="Impressum">Impressum</a></li>
                </ul>
                    <div id="upperfooter_text">
                        Text
                        </div>  <div id="footer"></div>
        </div>
    </body>
</html>

CSS:
Code:

@charset "utf-8";
/*  Tag  */
*
{
        margin:0;
        padding:0;
}

body
{
        height: 208px;
        background: url(../image/header.png) repeat-x left 0%;       
}

body,td,th
{
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
}

/*  IDs  */

#wrapper
{
        width: 808px;
        left: 50%;
        margin-left: -404px;       
        width: 600px;
        position: absolute;
        top: 90px;
}

#header
{
        height: 208px;
        width: 99%;
        background: url(../image/logo.png) 5px 5px no-repeat;
        text-align: right;
        font-size: 28px;
        font-style: italic;
        font-family: "Times New Roman", Times, serif;
        padding-right: 1%;
}

#logo
{
        display: block;
        height: 200px;
        width: 390px;
        float: left;
}
#content
{
        width: 808px;
        background-image: url(../image/content.png);
        background-position: 0px 81px;
        background-repeat: repeat;
        background-attachment: scroll;
        position: relative;
}

#content_text
{
        width: 792px;
        padding: 10px 5px 10px 5px;
}

#navi
{
        width: 808px;
        height: 81px;
        /*float: left;*/
        position: relative;
        background: url(../image/navi.png) no-repeat;
}

#navi ul,
#navi li
{
        margin: 0;
        padding: 0;
        display: inline;
        font-size: 18px;
        list-style-type: none;
        float: left;
}

#navi a:link,
#navi a:visited
{
        float: left;
        width: 133px;
        text-align: center;
        font-size: 18px;
        line-height: 75px;
        text-decoration: none;
}

#navi #akt
{
        background:url(../image/active.png) center 20px no-repeat;
}

#navi a:hover,
#navi a:hover#akt
{
        color: #000;
        height: 81px;
        background: url(../image/hover.png) center 20px no-repeat;
}

#upperfooter
{
        height: 46px;
        width: 808px;
        background: url(../image/upperfooter.png) no-repeat;
        position: relative;
        z-index: 2;
        text-align: right;
}

#footer
{
        height: 73px;
        background: url(../image/footer.png) repeat-x;
        z-index: 1;
        position: absolute;
        width: inherit;
        bottom: -25px;
        margin-left: -404px;       
}

#upperfooter_text
{
        width: 780px;
        padding: 5px 20px 5px 5px;
}

#footerNavi
{
        width: 400px;
        height: 50px;
        float: left;
        position: relative;
}

#footerNavi ul,
#footerNavi li
{
        margin: 0;
        padding: 0;
        display: inline;
        font-size: 18px;
        list-style-type: none;
        float: left;
}

#footerNavi a:link,
#footerNavi a:visited
{
        float: left;
        width: 100px;
        text-align: center;
        font-size: 15px;
        line-height: 40px;
        text-decoration: none;
}

#footerNavi #akt
{
        background:url(../image/active.png) center 3px no-repeat;
}

#footerNavi a:hover,
#footerNavi a:hover#akt
{
        color: #000;
        height: 50px;
        background: url(../image/hover.png) center 3px no-repeat;
}


dows 08.10.2010 15:08

Niemand ne Idee? :cry:

zeji 08.10.2010 15:14

das problem, ohne bilder sieht man nichts.

hubspe 08.10.2010 15:39

Zitat:

Zitat von dows (Beitrag 477036)
Niemand ne Idee? :cry:

verzichte auf position:absolute; wenn du es nicht unbedingt benötigst.
#wrapper braucht sicher kein pos. absol. um horizontal zentriert zu sein, dafür reicht neben einer Breite margin:0 auto;.

Um den footer immer unten zu haben schau dir Foot Sticker Alt an. ;)

dows 10.10.2010 21:44

Leider müss ich position:absolut verwenden da der Content sowohl Header als Footer überlappt (siehe Bild [@zeji: welches auch im ersten Beitrag ist ;)])
Die Navigation, der Footer und der Content sind alle im wrapper und der muss daher absolut sein.

hubspe 11.10.2010 07:37

Zitat:

Zitat von dows (Beitrag 477147)
Leider müss ich position:absolut verwenden da der Content sowohl Header als Footer überlappt (siehe Bild [@zeji: welches auch im ersten Beitrag ist ;)])
Die Navigation, der Footer und der Content sind alle im wrapper und der muss daher absolut sein.

sorry, aber das ist leider falsch. ;)
Du kannst auch mit position:relative und ggf. z-index die Stapelreihenfolge fast immer hinreichend ändern.

Vielleicht hilft dir das ein bißchen beim Verstehen.

XHTMLvalid 11.10.2010 08:28

Ich verstehe die ganzen negativen margins nicht.

Code:

#wrapper
{
        width: 808px;
        left: 50%;
        margin-left: -404px;       
        width: 600px;
        position: absolute;
        top: 90px;
}

Was bezwecken die???
Zwei mal width angegeben ... da hebt 600px die 808px auf

dows 11.10.2010 11:00

@XHTMLvalid:
ooups die doppelten breiten sind natürlich falsch.
Die negative margin zentriert den wrapper.

@hubspe:
habe es mal mit position:relative umgesetzt.
wenn ich dann im wrapper den relativ positioniere wird wird dieser unter dem Header angezeigt.
Also verschiebe ich ihn mit top:-120px nach oben, was zur Folge hat, dass der Footer 120 Pixel über den unteren Browser-Rand schwebt.
Und eine breite von 100% konnte ich damit leider auch noch nicht realisieren. :(

Ich habe mal einen Testcase unter http://bit.ly/aGvayq eingerichtet. Wer also ein wenig mit Firebug spielen will...viel Spaß :)

XHTMLvalid 11.10.2010 11:33

Liste der Anhänge anzeigen (Anzahl: 1)
Soll es in etwa so aussehen?

fricca 11.10.2010 11:39

Du machst es dir unnötig schwer.
Arbeite bitte die von Hubspe bereits genannte Technik FooterStickAlt (die heißt nicht Foot Sticker) durch. Lass zunächst den Header weg, wenn du damit nicht klarkommst. Bei dieser Technik liegt der Footer außerhalb des Bereiches, der 100%-Mindesthöhe hat. Damit löst sich dein Footer-Breiten-Problem in Luft auf.
Positionierungen lass bitte erstmal komplett weg.

Für die Zentrierung deines Inhaltsbereiches verwende auf keinen Fall diese negative Schieberei. Die Inhalte verschwinden bei schmalem Viewport unerreichbar nach links. Zentriere mit margin:0 auto.


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:11 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019