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 16: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 16:08

Niemand ne Idee? :cry:

zeji 08.10.2010 16:14

das problem, ohne bilder sieht man nichts.

hubspe 08.10.2010 16: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 22: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 08: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 09: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 12: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 12:33

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

fricca 11.10.2010 12: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.

dows 11.10.2010 12:40

Liste der Anhänge anzeigen (Anzahl: 1)
Eher so:
Anhang 3852
Fotomontage

dangerm 11.10.2010 14:03

Hi, also wenn ich es richtig verstehe, möchtest Du das der Footer immer am unterem Browserrand klebt.

Code:

html, body{
    margin: 0;
    padding: 0;
    }

html{
    height: 100%;
    }

* html body{
    height: 100%;
    }

body{
    background:#CCC;
    margin:0;
    position: relative;
    min-height: 100%;
    }

#div_der_immer_unten_ist{
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;
    background-color:#333;
    }

Vieleicht hilft Dir das ja weiter.

dows 11.10.2010 15:13

Zitat:

Zitat von fricca (Beitrag 477167)
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.

Den Testcase hab ich jetzt dem entsprechend angepasst.
Die Breite ist bei 100% und er klebt am unteren Rand.
Nun ist der Content nur leider nicht über Header und Footer sondern dazwischen.

Zitat:

Zitat von fricca (Beitrag 477167)
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.

Hab ich eingebaut. Vielen Dank für den Tipp. Mir gefiel die alte Variante auch nicht.

fricca 11.10.2010 15:24

Die Überlappung machst du mit negativen Margins. Unterer für den Header, oberer für den Footer, jeweils in ihrer eigenen Höhe.
Den Abstand der Navigation von oben mit Padding für die Navigation. Background-position entsprechend anpassen.

Jedoch ist für mich noch immer nicht klar, was du eigentlich willst. Das, was du "upperfooter" nennst soll doch bei wenig Inhalt auch immer unten sitzen, oder nicht?
Was mit dem unsichtbaren Logo im Header geschehen soll ist bisher auch völlig unklar.

dows 11.10.2010 15:35

Wunderbar! Klappt! Vielen Dank für die Hilfe.

Der "upperfooter" soll den Content abschließen und nicht am Ende sitzen.
Das Logo wird nur wegen dem Testcase ausgeblendet. Im Produktiveinsatz wieder drin. Wollte jetzt nur nicht für den Testcase ein eigenes Logo machen.

fricca 11.10.2010 15:42

Nein. So klappt das nicht.
Schau dir an, was bei wenig Inhalt passiert. Dann lies nochmal ganz genau, was ich oben schrieb. Du hast das Prinzip von FooterStickAlt noch nicht verstanden.

Wenn der Footer kein Footer werden soll und der Header kein Header, sondern es dir nur um diese Bildchen geht, brauchst du das ganze Theater nicht.
Nimm dem, was jetzt wrapper heißt, seine Breite weg. Gib ihm das Footer-Bild.
Fass den Inhalt mit einem weiteren Element zusammen. Zentriere dieses.

Noch immer ist nicht klar, wie sich das Logo zum Inhalt verhalten soll. Ich bezweifle, dass du es so haben willst, wie es sich vorhin verhalten hat. Teste bitte mit allen Elementen, die es gibt. Und ändere deine Fenstergröße beim testen.

dows 11.10.2010 17:50

Liste der Anhänge anzeigen (Anzahl: 2)
Wie sich das Logo zum Inhalt verhalten soll?
Meinst du das id="logo"? Wenn ja, dann nimm es als Platzhalter für eine Grafik. Damit es verständlicher wird habe ich jetzt noch ein Logo eingefügt, damit es evtl klarer wird.

Offenbar bestehen noch Missverständlisse beim Aufbau der Seite.
Das grün/graue "Monster" auf dem das Logo liegt ist der Header.
Das dunkelgraue am unteren Bildschirm der Footer.
Der Balken mit den vielen "Item"-Einträgen ist die Navi.
Darunter der Content. Unter dem Content findet sich der "upperfooter" in dem Impressum und andere Links stehen.
Navi, Content und Upperfooter sind in "wrapper" gekapselt. Dieser ist mittig zentriert und passt sich nach der Menge des Inhalts an. Er lappt gut 100px über dem Header und gut 30px über dem Footer (Anhang 3854).
Der wrapper muss nicht zwingend bis zum Footer reichen (Anhang 3853).

fricca 11.10.2010 18:03

dows, die Elemente einer Seite definieren sich nicht über graue oder bunte Streifen. Der Inhalt gibt vor, welche Elemente es auf einer Seite gibt.
Wenn du nur einen grauen Streifen am Ende willst, dann ist das kein Footer. Du brauchst kein leeres Element dafür.

Im Moment sehe ich ein merkwürdiges Konstrukt mit irgendeinem Prozentwert. Das funktioniert nicht, der graue Balken ist irgendwo.

Nochmal: Du brauchst kein aufwendiges "Footer-immer-unten"-Konstrukt. Die graue Grafik kann in ein umgebendes Element -- das kann auch body sein. Da es offenbar einen Header mit Inhalten gibt, kann deine Header-Grafik dorthinein. Überlappung mit dem Inhalt mit negativer Verschiebung.


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:12 Uhr.

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

© Dirk H. 2003 - 2023