Στο εγχειρίδιο μας προκύπτει από έναν τυπικό διαχωρισμό στη στήλη. Πριν όμως παρουσιάσω αυτό το έργο ζωντανά και με χρώμα, θέλω να σας δείξω πώς μπορείτε να εφαρμόσετε τον ίδιο χωρισμό. Το επίκεντρο θα είναι στο διαχωρισμό σε δύο και τρεις στήλες, καθώς αυτός αποτελεί τη βάση του μεγαλύτερου μέρους των ιστοσελίδων.
Ο κλασικός σχεδιασμός ιστοσελίδων που όλοι γνωρίζουμε πιθανότατα είναι ο δύο στηλών. Στην αριστερή περιοχή του παραθύρου παρουσιάζεται συνήθως η πλοήγηση, ενώ στη δεξιά στήλη εμφανίζεται το πραγματικό περιεχόμενο. Σε σχέση με τα blogs, αυτή η συμπεριφορά έχει αλλάξει ελάχιστα. Πράγματι, σε πολλά blogs εμφανίζεται δεξιά η πλοήγηση ή διαφήμιση, ενώ αριστερά παρουσιάζεται το πραγματικό περιεχόμενο.
Τέτοιες εφαρμογές είναι σχετικά εύκολο να υλοποιηθούν με CSS. Πράγματι, οι δύο στήλες είναι η απλούστερη μορφή διαχωρισμού σε στήλες.
Στο παρακάτω παράδειγμα θα δείξω ένα διαχωρισμό σε δύο στήλες που χρησιμοποιεί απόλυτες ποσοστιαίες τιμές.
Εδώ το πλήρες παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Διάταξη με απόλυτη θέση</div>
<div id="nav">Πλοήγηση</div>
<div id="main">Αυτή είναι η περιοχή περιεχομένου</div>
<div id="footer">Εδώ βρίσκονται οι πληροφορίες πνευματικής ιδιοκτησίας.</div>
</body>
</html>Και έτσι φαίνεται το σύνολο στον περιηγητή:
Μπορείτε επίσης να μετακινήσετε την αριστερή στήλη εύκολα προς τα δεξιά. Προσαρμόστε τις ακόλουθες οδηγίες:
• Στο #nav αλλάξτε την τιμή left: 0 σε right: 0.
• Στο #main απλά αλλάξτε το margin-left σε margin-right.
Αφού αποθηκευτούν οι αλλαγές, το επιθυμητό αποτέλεσμα θα είναι ορατό.
Ένα πρόβλημα που υπάρχει στη διάταξη που εμφανίζεται βασισμένη στην απόλυτη θέση είναι: αν το περιεχόμενο της αριστερής στήλης γίνει μεγαλύτερο, τότε υπερβαίνει την περιοχή του footer.
Αυτό συμβαίνει απλώς επειδή για τα απόλυτα τοποθετημένα στοιχεία δεν "διατηρείται κενό". Για να αντιμετωπιστεί το πρόβλημα, μπορείτε να εισάγετε αντίστοιχο περιεχόμενο στην κύρια περιοχή που να είναι μήκους μεγαλύτερου από αυτό στην αριστερή στήλη.
Πρέπει να χρησιμοποιήσετε αυτήν τη μορφή διάταξης μόνο αν είστε σίγουροι ότι η κύρια περιοχή είναι πράγματι υψηλότερη από την αριστερή (ή δεξιά) στήλη.
Δύο στήλες με Float
Το πρόβλημα που προέκυψε στο προηγούμενο παράδειγμα με την επικάλυψη της περιοχής του footer μπορεί να λυθεί με τη χρήση της ιδιότητας float. Η τροποποιημένη σύνταξη είναι η εξής:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Διάταξη με απόλυτη θέση</div>
<div id="nav">Η περιοχή πλοήγσης</div>
<div id="main">Αυτή είναι η περιοχή περιεχομένου</div>
<div id="footer">Εδώ βρίσκονται οι πληροφορίες πνευματικής ιδιοκτησίας.</div>
</body>
</html>Εδώ, και οι δύο στήλες έχουν εφοδιαστεί με την ιδιότητα float. Με αυτόν τον τρόπο, οι στήλες είναι πλέον τοποθετημένες δίπλα-δίπλα.
Στην αριστερή στήλη δίνεται πλάτος 20%. Να προσέξετε ειδικά ότι ένα στοιχείο που τοποθετείται με float περιμένει πάντα μια σαφή δήλωση πλάτους.
Η πραγματική περιοχή περιεχομένου παίρνει πλάτος 80%. Και αυτή η περιοχή τοποθετείται με float: left. Με αυτόν τον τρόπο, αυτή η περιοχή εμφανίζεται δίπλα από την αριστερή στήλη.
Για να εξασφαλίσετε ότι το footer θα εμφανίζεται πάντοτε στο κάτω μέρος του παραθύρου - δηλαδή κάτω από τις στήλες - χρησιμοποιείται η ακόλουθη σύνταξη:
#footer {
clear: both;
}
Έχω ήδη επισημάνει τη δυνατότητα να ορίσετε μόνο τη δική σας κλάση για αυτήν την παραλλαγή.
Τρία στήλες με float
Και η τριστηλή είναι μια πολύ δημοφιλής μορφή σχεδιασμού ιστοσελίδων. Μια τυπική διάρριψη έχει την εξής μορφή:
• Η αριστερή στήλη περιέχει την πλοήγηση.
• Στη μέση στήλη βρίσκεται το πραγματικό περιεχόμενο.
• Δεξιά προβάλλονται επιπρόσθετες πληροφορίες ή διαφήμιση.
Παρακάτω υπάρχει ένα παράδειγμα με δύο στήλες, όπου δημιουργείται ένας ευέλικτος τριστηλής. Η σύνταξη είναι - όπως θα διαπιστώσετε αμέσως - παρόμοια με την προηγούμενη διάρρηξη διψηφιού. Ωστόσο, υπάρχει τώρα με τη λέξη right μια επιπλέον περιοχή div που τελικά αντιπροσωπεύει τη δεξιά φραγματική στήλη.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Διάταξη με απόλυτη θέση</div>
<div id="nav">Η περιοχή πλοήγησης</div>
<div id="main">Αυτή είναι η περιοχή περιεχομένου</div>
<div id="right">Αυτή είναι η δεξιά στήλη</div>
<div id="footer">Εδώ βρίσκονται οι πληροφορίες πνευματικών δικαιωμάτα</div>
</body>
</html>
Στη νέα περιοχή έχει ανατεθεί πλάτος 20 τοις εκατό. Έτσι, η κατανομή είναι όπως ακολούθως:
• Η αριστερή και η δεξιά στήλη καταλαμβάνουν από κάθε το μέγεθος που είναι διαθέσιμο για εμφάνιση.
• Η μέση στήλη έχει πλάτος 60 τοις εκατό.
Με τη συγκεκριμένη σύνταξη, η περιοχή right εμφανίζεται πράγματι δεξιά.
Ωστόσο, η σύνταξη σε αυτό το σημείο είναι ευέλικτη. Θα μπορούσατε να προσαρμόσετε την περιοχή main ως εξής:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Εδώ η λέξη float έχει οριστεί ως right. Με αυτόν τον τρόπο, η περιοχή right μετακινείται αριστερά.
Σε αυτό το εγχειρίδιο είδατε πόσο εύκολα μπορείτε να ορίσετε βασικές διατάξεις με βάση το float. Αυτή η γνώση αποτελεί τώρα τη βάση για την κατασκευή μιας ιστοσελίδας. Στα επόμενα εγχειρίδια, μια ιστοσελίδα θα δημιουργηθεί βήμα προς βήμα, ξεκινώντας από τη βάση.
