Τώρα που μάθαμε μερικά ακόμα πράγματα για τα blocks, μπορούμε πλέον να διαμορφώσουμε τις σελίδες μας. Σήμερα θα δούμε μερικές ακόμα δυνατότητες που μας παρέχουν τα CSS και θα γεμίσουμε επιτέλους τα κουτιά μας!
Στο χθεσινό μάθημα είδαμε τους κανόνες του <body> και του #container, ώρα να συμπληρώσουμε τα κενά. Το παραπάνω screenshot (με την βοήθεια του Web Developer extension του Firefox) μας δείχνει όλα τα block elements της σελίδας μας — ας τα πάρουμε με τη σειρά.
<div id="header"> <h1>Πρώτα βήματα στην <abbr title="HyperText Markup Language">HTML</abbr> (και <abbr title="Cascading Style Sheets">CSS</abbr>)</h1> </div>
Το πρώτο block μέσα στο container είναι το <div id="header">. Χρησιμοποιώ ένα ακόμα <div> για να του προσθέσω τη φωτογραφία στο background. Αυτό το κάνω διότι, εφόσον η φωτογραφία μου δεν είναι σημαντικό στοιχείο για τη σελίδα μου, προτείνεται να την φορτώσω με CSS και όχι με <img> tag στον κώδικα HTML. Οι κανόνες του header είναι οι εξής:
#header { background: url(images/photo.png) no-repeat top left; height: 154px; margin-top: 10px; text-indent: 180px; }
#header h1 { color: #fff; font-size: 18px; padding-top: 24px; }
Μέχρι στιγμής δεν είχαμε χρησιμοποιήσει το height. Με αυτό ορίζω το ύψος του #header στα 154 pixels. Αν βέβαια βάλω περισσότερο περιεχόμενο μέσα στο <div>, το ύψος πιθανόν, ανάλογα με τον browser, να αυξηθεί, ωστόσο υπάρχουν τρόποι να το ελέγξω και αυτό (θα δούμε πως στους κανόνες του <pre>). Χρησιμοποιώ επίσης την σύνταξη #header h1 για να αλλάξω το χρώμα του κειμένου, το μέγεθος της γραμματοσειράς και το περιθώριο πάνω από τον τίτλο της σελίδας μου που περιέχεται στο <h1>. Αυτό το selector ενεργεί μόνο σε όσα <h1> (heading) υπάρχουν «μέσα» στο #header — ένα στην περίπτωση μας.
#content { background: #fff url(images/contentBg.gif) repeat-x top; border: 1px solid #a8743d; float: right; margin-top: -100px; padding: 4px; width: 570px; }
#content h2 { font-size: 14px; margin-bottom: 2em; }
Στο #content συμβαίνουν αρκετά πράγματα:
α) float: right — τι είναι αυτό; Όλα τα block elements εξ ορισμού εμφανίζονται το ένα κάτω από το άλλο με τη σειρά που βρίσκονται στον κώδικα, το οποίο συνήθως δεν εξυπηρετεί το design. Το float είναι ένας τρόπος για να βγάλουμε το block έξω από αυτή τη «ροή» της σελίδας και να το τοποθετήσουμε κάπου αλλού — στην περίπτωση μας, right. Έτσι λοιπόν, το #sidebar (που θα δούμε αναλυτικά στο επόμενο μάθημα διότι έχει αρκετά ζητήματα να συζητήσουμε) μπορεί να ανέβει στον χώρο που πριν έπιανε το #content και να έρθουν δίπλα-δίπλα. Αυτή είναι μια πολύ συνηθισμένη τακτική (εφαρμόζεται και στην φωτογραφία στην αρχή του άρθρου) η οποία όμως έχει μερικές «παρενέργειες» που θα δούμε στη συνέχεια.
β) margin-top: -100px — ναι, όντως έχουμε αρνητικό margin! Είναι μια δυνατότητα που επιτρέπει στα διάφορα blocks να επικαλύπτονται. Έτσι μπορώ να «τραβήξω» το #content 100 pixels πιο ψηλά, πάνω από το #header που προηγείται στον κώδικα — μια δυνατότητα που δεν υπήρχε με τα tables!
γ) border: 1px solid #a8743d, άλλη μια συντομογραφία. Περιλαμβάνει τα: border-width (1 pixel), border-style (solid) και border-color (#a8743d). Κάθε block έχει 4 borders τα οποία μπορούμε να μορφοποιήσουμε το καθένα ξεχωριστά — να θυμάστε πάντα πως σύμφωνα με το box model, τα borders μετράνε στο πλάτος (width) του block.
Κλείνοντας, να επισημάνω τις «παρενέργειες» του float. Όταν βγάζουμε ένα block έξω από την ροή του κώδικα, το κουτί που το περιέχει (το #container στην περίπτωση μας, αλλιώς το <body> που τα περιλαμβάνει όλα) δεν «γνωρίζει» πλέον το ύψος του. Αυτό μπορεί να μας οδηγήσει σε μερικές περίεργες καταστάσεις. Επιπλέον, οποιοδήποτε box έχει float πρέπει σύμφωνα με τις προδιαγραφές να έχει καθορισμένο width εκτός εάν πρόκειται για <img> tag που οι διαστάσεις του υποννοούνται (ή ακόμα καλύτερα, δηλώνονται στον κώδικα). Στην πραγματικότητα, οι περισσότεροι πλέον browsers μπορούν να υπολογίσουν τις διαστάσεις των blocks και να βάλουν τα floats στην θέση τους αλλά, μερικές φορές μπορεί να μην έρθουν εκεί που πιστεύατε… σε αρκετές περιπτώσεις ένα width:auto μπορεί να λύσει το πρόβλημα.
(Βαθμολογία: +1, ψήφοι: 1)
Loading ...