Ευέλικτο πλάτος σε website
Το καλό design σε ένα website είναι καθαρά υποκειμενικό. Πολλοί προτιμούν πολύχρωμα design, ενώ άλλοι μονοχρωματικά. Σε κάποιους αρέσουν σύνθετα, ενώ σε άλλους πιο απλά design. Ένα πράγμα που σίγουρα δεν αρέσει σε κανένα είναι να εμφανίζεται η οριζόντια μπάρα στο κάτω μέρος του browser. Για αυτό τον λόγο ετοιμασα ένα πολύ απλό html template (σταθερού μήκους), με έναν header, έναν footer και 2 στήλες, ώστε να δουλέψουμε πάνω του, και να το φτιάξουμε να δουλεύει σωστά σε όποια ανάλυση και αν το δούμε.
Αρχικά ας φτιάξουμε 2 αρχεία και ας τα ονομάσουμε index.html και style.css.
Μέσα στο index ας βάλουμε τον βασικό κώδικα της σελίδας:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <div id="header"> This is a header. </div> <div id="main"> <div id="content"> <div class="post"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a, ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed, accumsan nec turpis. Nulla gravida tortor a lacus dignissim aliquet eget eget erat. Duis tincidunt leo ac metus mattis mollis. Proin magna quam, gravida vitae scelerisque sed, imperdiet at est. Vestibulum eget velit a turpis pharetra mollis a quis metus. Aliquam erat volutpat. Nam tincidunt adipiscing lobortis. </div> <!-- #post --> </div> <!-- #content --> <div id="sidebar"> <div class="side-box"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a, ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed, accumsan nec turpis. </div> <!-- sidebox --> </div> <!-- sidebar --> </div> <div id="footer"> This is a footer. </div> <!-- footer --> </div> <!-- container --> </body> </html>
και ας βάλουμε τα επόμενα rules στο style.css ωστε να του δώσουμε κάποιο στυλ:
* { margin:0; padding:0; border:0; } body { color: #535353; background: #e7e7e7; } #container { width: 970px; margin: 0 auto; } #header { color: #e8e8e8; background: #5e5e5e; } #content { width: 600px; float:left; } #sidebar { width:250px; float:right; } .post { margin: 50px 0; background: #f6f6f6; } .side-box { position: relative; margin: 50px 0; background: #f6f6f6; } #footer { clear: both; color:#e8e8e8; background: #5e5e5e; }
Αν ανοιξουμε τον αγαπημένο μας browser, κατά πάσα πιθανότητα δεν θα έχουμε αρχικά ασχημο αποτέλεσμα.
Παρότι φαίνεται όμως, υπάρχουν ένα μικρό και ένα μεφάλο πρόβλημα. Το μικρό πρόβλημα βρίσκεται στην περίπτωση που ο αναγνώστης έχει πολύ πλατιά οθόνη, τότε δεξιά και αριστερά θα υπάρχει κενό και δεν θα εκμεταλλευόμαστε την μεγάλη του οθόνη να του δείχνουμε περισσότερο περιεχόμενο. Το μεγάλο πρόβλημα είναι όμως οτι σε μικρές αναλύσεις θα εμφανιστεί οριζόντια μπάρα, και δεν θα βλέπει περιεχόμενο που μπορεί να είναι σημαντικό (π.χ. ένα μενού ή κάποια διαφήμηση).
Με την εικόνα αυτή καταλαβαίνουμε ευκολότερα οτι υπάρχει μια καλύτερη λύση. Να μιλήσουμε στο css με ποσοστά. Πρέπει να έχουμε στο μυαλό μας, ότι δίνοντας σε κάποιο στοιχείο κάποιο πλάτος επί τοις 100, θα το δίνουμε σε σχέση με το στοιχείο που το περιλαμβάνει. Έτσι, στο container div θα δώσουμε ένα ποσοστό σε σχέση με τον browser. Για παράδειγμα στην οθόνη μου βλέπω 1280px στο πλάτος (Κανονικά βλέπω λιγότερα pixel γιατί πρέπει να αφαιρέσουμε τα πλαίσια του παραθύρου και την δεξια μπάρα. Εμείς εδω δεν θα τους δώσουμε σημασία, αλλά σε κάτι πιο επαγγελματικό οφείλουμε να κοιτάμε την λεπτομέρεια). Έχουμε 970px/1280px = 0.8083. Άρα 80.83%.
Τα άλλα δύο div (content και sidebar) θα υπολογιστούν σε σχέση με το element που τα περιέχει, δηλαδή το container div. Έχουμε 600px/970px=0.6185 και 250px/970px=0.2577. Άρα 61.85% και 25.77%
Ας αλλάξουμε τις 3 γραμμές στο style.css
#container { width: 80.83%; margin: 0 auto; } #content { width: 61.85; float:left; } #sidebar { width:25.77; float:right; }
Αν δούμε την σελίδα στην ίδια οθόνη δεν θα δούμε κάποια διαφορά, αλλά αν παρατηρήσουμε προσεκτικότερα, το design μας έγινε πιο ευέλικτο. Σε οθόνες με μεγαλύτερο πλάτος τα divs θα μεγαλώσουν δείχνοντας περισσότερο περιεχόμενο, και σε μικρότερες οθόνες θα μικρύνουν σε πλάτος και θα μεγαλώσουν σε ύψος:
Αν και το παράδειγμα ήταν πολύ απλοϊκό, δεν είναι δύσκολο να εφαρμόσουμε την παραπάνω τεχνική και σε πιο σύνθετα design. Μην ξεχαστούμε όμως, πρέπει να ορίζονται όλα τα μήκη με τον ίδιο τρόπο (divs, images κ.λ.π), αλλιώς μπορεί να προκύψουν περίεργα προβλήματα.
Το αρχικό άρθρο στα αγγλικά http://www.returnsuccess.com/3-Convert-your-code-from-fixed-width
Γίνετε επεξεργασία, Παρακαλώ περιμένετε...
Απλό και κατανοητό..Ευχαριστούμε
Ευχαριστώ και εγώ. Ελπίζω να ακολουθήσουν και άλλα σύντομα
Πολύ καλό άρθρο. Thanks a lot!