footer παντα κατω

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
alex_begos
Δημοσιεύσεις: 102
Εγγραφή: 07 Σεπ 2007 19:29

footer παντα κατω

Δημοσίευση από alex_begos » 08 Ιουν 2010 02:51

έχω ενα div body και μεσα στο body εχω ενα footer

Κώδικας: Επιλογή όλων

<div id="body">
<div id="footer"> </div>
</div>
to body εχει ύψος 500px

πως μπορλω να έχω το footer πάντα κολημένο στο κάτω μέρος του body?

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

footer παντα κατω

Δημοσίευση από fafos » 08 Ιουν 2010 02:59

position : relative;
top : 100%;

Άβαταρ μέλους
alex_begos
Δημοσιεύσεις: 102
Εγγραφή: 07 Σεπ 2007 19:29

footer παντα κατω

Δημοσίευση από alex_begos » 08 Ιουν 2010 09:13

ετσι κολάει στο κάτω μέρος της σελίδας και όχι του div...

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

footer παντα κατω

Δημοσίευση από manolism » 08 Ιουν 2010 09:37

alex_begos έγραψε:ετσι κολάει στο κάτω μέρος της σελίδας και όχι του div...
Είσαι σίγουρος γι' αυτό; Το δοκίμασες;

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

footer παντα κατω

Δημοσίευση από nbc » 08 Ιουν 2010 10:06

Το positioning ενός child element γίνεται πάντα με αναφορά ένα positioned parent element που μπορεί να μην είναι ο immediate ancestor. Με άλλα λόγια, αν το #body δεν είναι positioned τότε ο browser θα ψάξει τον προηγούμενο parent μέχρι να φτάσει την κορυφή του DOM, που είναι το html.

Συνεπώς, αφού επιθυμείς το #footer σε σχέση με το #body, πρέπει το #body να είναι positioned (relative ή absolute, ανάλογα τι σε βολεύει).

Όσο για το #footer: αφού επιθυμείς να πάει στον πάτο του #body, όπου και νάναι αυτός, η λογική λέει ότι χρειάζεσαι absolute positioning και όχι relative. To "relative" σημαίνει σχετικά με τη θέση την οποία το #footer θα βρισκόταν αν δεν ήταν positioned. Το "absolute" σημαίνει ότι βγαίνει από τη σειρά του και πάει εκεί ακριβώς που το θέλεις.

Κώδικας: Επιλογή όλων

#body &#123;position&#58; relative; height&#58; 500px; background&#58; yellow&#125;
#footer &#123;position&#58; absolute; height&#58; 50px; width&#58;100%; left&#58; 0; bottom&#58; 0; background&#58; red&#125;
Το absolute positioning απαιτεί την τοποθέτηση του element με βάση μια γωνία του. Στην περίπτωσή μας, bottom-left. Από τη στιγμή που χρησιμοποιείς το bottom, τότε θέλεις και ύψος. Τα χρώματα είναι για debugging.

Το CSS είναι απλό, αρκεί να μπεις στη λογική του, η οποία δεν διαφέρει και πολύ από το common sense.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες