Το "υποσέλιδο" είναι συνήθως το κάτω μέρος της διάταξης μιας ιστοσελίδας. Η πιο συνηθισμένη δυσκολία στην τοποθέτηση αυτού του υποσέλιδου είναι να το τοποθετείτε πάντα στο κάτω μέρος του παραθύρου, ανεξάρτητα από την πληρότητα της σελίδας ή τον τύπο του προγράμματος περιήγησης. Υπήρξαν αρκετές λύσεις στο πρόβλημα από την εποχή της μαζικής μετάβασης σε διάταξη μπλοκ, και μία από αυτές δίνεται παρακάτω.
Είναι απαραίτητο
Βασικές γνώσεις CSS και HTML
Οδηγίες
Βήμα 1
Ας πάρουμε ως βάση το πιο κοινό σχήμα διάταξης σελίδας - τρία μπλοκ τοποθετημένα το ένα πάνω από το άλλο. Το πάνω μέρος (κεφαλίδα) πρέπει πάντα να ευθυγραμμίζεται με το επάνω περίγραμμα του παραθύρου, το κάτω μέρος (υποσέλιδο) - προς το κάτω περίγραμμα και το κύριο (σώμα) πρέπει πάντα να γεμίζει όλο το κενό μεταξύ τους. Ο πηγαίος κώδικας πρέπει να περιέχει έναν σύνδεσμο προς το XHTML 1.0 Μεταβατική προδιαγραφή και η περιγραφή των στυλ πρέπει να τοποθετηθεί σε ένα εξωτερικό αρχείο CSS (για να αποφευχθούν προβλήματα με το Opera 9. XX). Η περιγραφή HTML της δομής πρέπει να τοποθετηθεί στην κύρια σώμα της σελίδας. Θα ξεκινήσει, φυσικά, από το επάνω μπλοκ, στην ετικέτα της οποίας πρέπει να τοποθετηθεί ένα χαρακτηριστικό αναγνωριστικού με τιμή, για παράδειγμα, divHead:
Μπλοκ κεφαλίδας.
Το κύριο μπλοκ πρέπει να αποτελείται από ένα ζεύγος ένθετων μπλοκ. Στο εξωτερικό θα δοθεί το αναγνωριστικό divOut και το εσωτερικό - divContent:
Κυρίως περιεχόμενο.
Το υποσέλιδο έχει ρυθμιστεί σε divFoot:
Υποσέλιδο σελίδας.
Βήμα 2
Ο πλήρης κώδικας HTML της σελίδας πρέπει να έχει την εξής μορφή:
Τρία τετράγωνα
@import "style.css";
Αυτό είναι ένα μπλοκ κεφαλίδας.
Κυρίως περιεχόμενο.
Αυτό είναι το υποσέλιδο της σελίδας.
Βήμα 3
Η περιγραφή στυλ εφαρμόζει τον ακόλουθο μηχανισμό διάταξης: το μεσαίο μπλοκ (divOut) έχει ρυθμιστεί σε 100% ύψος, το πάνω μπλοκ (divHead) θα έχει απόλυτη τοποθέτηση και το κάτω - σχετικό. Στο κύριο μπλοκ περιεχομένου (divContent), πρέπει να υπάρχει ελεύθερος χώρος στην κορυφή ίσος με το ύψος του μπλοκ επικεφαλίδας, ώστε να μην επικαλύπτει το κύριο περιεχόμενο της σελίδας. Και το κάτω μπλοκ (υποσέλιδο) πρέπει να έχει αρνητικό περιθώριο στην κορυφή, ίσο με το ύψος αυτού του μπλοκ. Αυτό θα ανεβεί πάνω από το κάτω όριο του παραθύρου του προγράμματος περιήγησης. Αυτός ο μηχανισμός μπορεί να εφαρμοστεί χρησιμοποιώντας ένα αρχείο css με το ακόλουθο περιεχόμενο: * {margin: 0; επένδυση: 0}
html, body {ύψος: 100%;} body {
θέση: σχετική
χρώμα: # 000;
}
#divOut {
περιθώριο: 0;
ελάχιστο ύψος: 100%;
φόντο: #FFF;
χρώμα: # 000;
}
* html #divOut {ύψος: 100%;}
#divHead {
θέση: απόλυτη;
αριστερά: 0;
κορυφή: 0;
πλάτος: 100%;
ύψος: 80px;
φόντο: # 2F5000;
υπερχείλιση: κρυφό;
text-align: center;
χρώμα: #FFF;
} #divFoot {
θέση: σχετική
σαφές: και τα δύο?
margin-top: -60 εικονοστοιχεία;
ύψος: 60px;
πλάτος: 100%;
χρώμα φόντου: # 2F5000;
text-align: center;
χρώμα: #FFF;
}
.divContent {
πλάτος: 100%;
float: αριστερά;
επένδυση: 81px;
} Το όνομα που καθορίσατε για το φύλλο στυλ στον κώδικα HTML είναι style.css.
