XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Einen Div am unteren Rand des HTML ausrichten, immer über volle Breite (http://xhtmlforum.de/showthread.php?t=45408)

Dwarf 11.04.2007 16:28

Einen Div am unteren Rand des HTML ausrichten, immer über volle Breite
 
Hallo Forum,



ich versuche gerade eine eigentlich (?) simple Aufgabe. Ich möchte am unteren Browserrand etwas Gras positionieren. Der Div mit dem Gras soll also immer am unteren Ende des Fensters sitzen und sich über die volle Breite des Fensters ziehen.

An sich ok, nur sobalt der Inhalt mal größer als das Fenster ist, man also scrollen muss, gehen die Probleme los. Der Div ist dann mal nicht breit genug oder sitzt in der Höhe falsch.

Wie muss man das angehen?
Hier mein Versuch:

PHP-Code:

html{
    
position:absolute;
}

#gras{
    
position:absolute;
    
bottom:-52px;
    
left:0;
    
height:46px;
    
width:100%;
    
background:url(../images/gras.gifrepeat-x;



Das lässt sich doch irgendwie umsetzen, oder?

Vielen Dank für jede Hilfe!!



Gruß,
Sascha

RoToRa 11.04.2007 16:30

http://xhtmlforum.de/40267-faq-haeuf...d-haeufig.html

Stichwort "Footer Stick Alt"

Robin

wiseguy 12.06.2007 11:33

Hallo, hab das gleiche Problem. Hab mir diese Seite angeschaut und versucht zu verstehn...

Aber ich seh irgendwie keine Angabe, die mir diese Formatierung des footer-Divs ermöglicht, obwohl es auf der Seite ja richtig ausschaut.

Es soll ja so sein: Wenn der Text kürzer als die Höhe des Browserfensters ist, dann soll das DIV am untersten Rand des Browserfensters stehen. Ist der Text aber länger und muss folglich auf der Seite gescrollt werden, dann soll das footer-Div unter dem Text angezeigt werden (also erst muss man halt scrollen und am untersten Rand, wenn der Text zuende ist, ist dann der footer.

Die Angabe des footer Divs aus oben genannter Beispielseite lautet ja:
Code:

#footer
{
        width: 710px;
        margin-left: 25px;
        padding-bottom: 1.5em; /* ich dachte erst, dass hier ists... aber wars nicht */
        background-color: #003366;
        font-size: 85%;
        color: #A6B8CA;
        text-align: center;
        line-height: 1.5em;
}


fricca 12.06.2007 14:20

Die für das Prinzip relevanten CSS-Angaben stehen im Styleelement des von dir verlinkten Beispiels.
Die Erklärung zu FooterStickAlt ist auch in den FAQ verlinkt.

wiseguy 12.06.2007 16:54

Ich bekomms nicht hin.

Die Seite: bibelgemeinde-fulda.de

Ich hab alles mögliche ausprobiert - so wies auf der Seite stand.

Mein non-footer heißt website und der footer heißt footer.
Derzeit steht im CSS:
Code:

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

#website { position: relative; min-height: 100%; }
* html #website { height: 100%; }

#footer { position: relative; margin-top: -30px; height: 30px; }

der html-code dazu:
Code:

...
<div id="website">
    <!-- Inhalt der Webseite -->
    ...
</div>

<div id="footer">
    <!-- Die Footer Angaben -->
    ....
</div>
...

Bei mir ist der Footer genau grade nicht mehr auf der Webseite zu sehen; Man muss also erst scrollen um den sehen zu können. Wenn der Inhalt der Webseite länger ist, dann ist alles wie gewünscht.

Kann mir jemand sagen, was ich falsch mache bzw. was ich ändern muss, damits so ist, wie ichs haben will?

heiko_rs 12.06.2007 16:59

Auf der Seite hat der Footer margin-bottom ;)

wiseguy 12.06.2007 17:51

okay, jetzt scheints fast schon zu klappen.

Ein Problem hab ich aber noch: Der Footer verdeckt einen kleinen Teil des unteren Bereichs des Hauptinhalt (des "website"-DIVs).

Und zwar immer dann, wenn ich das Browserfenster in der Höhe weit genug verkleinere.

Woran liegt das? Warscheinlich kommt das ja durch das "margin-top: -??px".
Aber wenn ich das weg lasse, hab ich das Problem von vorhin...

fricca 12.06.2007 18:06

Zitat:

Zitat von themaninblue
For the case where the Web page content is larger than the browser window, the footer will be positioned naturally below the content, then brought up by the margin. For this scenario you should provide a bit of space at the bottom of your content which the footer can rise into without covering anything. This can be done with a bit of padding or margin on your content.

Nachzulesen bei der bereits bekannten Erklärung zu footerStickAlt.

heiko_rs 12.06.2007 18:09

Zitat:

Zitat von wiseguy (Beitrag 336403)
Warscheinlich kommt das ja durch das "margin-top: -??px".

So sieht's aus ;) Gib #content oder #content2 (eines von beiden ist übrigens überflüssig) passendes padding-bottom.

Und validiere auch mal.

EDIT: zu langsam ;)

wiseguy 12.06.2007 18:15

Zitat:

eines von beiden ist übrigens überflüssig
Das ist für einen anderen Skin aber notwendig ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:50 Uhr.

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

© Dirk H. 2003 - 2020