Απλές μονοστήλες διατάξεις ιστοτόπων σε CSS
Σε αυτό το μάθημα θα εξασκηθούμε δημιουργώντας απλές μονοστήλες διατάξεις ιστοτόπων. Ας κάνουμε, για παράδειγμα, μια διάταξη όπως αυτή:
Ας ξεκινήσουμε την υλοποίηση. Κάθε διάταξη
ως επί το πλείστον ξεκινά με ένα γενικό div με το όνομα
wrapper, που περιέχει όλο το υπόλοιπο site:
<div id="wrapper">
</div>
Στην περίπτωσή μας, ο wrapper θα ευθυγραμμιστεί στο κέντρο της οθόνης:
#wrapper {
width: 800px;
margin: 50px auto;
}
Θα έχει επίσης και περίγραμμα:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Ας φτιάξουμε τώρα τη βασική δομή της σελίδας. Θα αποτελείται από ένα μενού και το κύριο περιεχόμενο - το content:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Ας προσθέσουμε το περιεχόμενο των μπλοκ μας:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Τώρα μπορούμε να προσθέσουμε στυλ στα μπλοκ μας. Ας προσθέσουμε στυλ στο μενού:
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
Και τώρα ας προσθέσουμε στυλ στα στοιχεία περιεχομένου:
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Μπορούμε τώρα να συγκεντρώσουμε όλο τον κώδικα μαζί:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Συμβουλή 1
Πιο βολικό είναι να δίνονται περιθώρια από πάνω προς τα κάτω.
Για παράδειγμα, έχουμε ένα μενού και περιεχόμενο,
και ανάμεσά τους - κενό χώρο. Προφανώς,
αυτός ο χώρος μπορεί να γίνει με κάτω
περιθώριο του μενού, άνω περιθώριο του περιεχομένου,
ή την ταυτόχρονη επιρροή και των δύο. Σε αυτή την περίπτωση
καλύτερα να ορίσετε κάτω περιθώριο στο μενού, και στο περιεχόμενο
να αφαιρέσετε το πάνω padding και margin από προεπιλογή
για το h1.
Συμβουλή 2
Τα παιδιά δεν πρέπει να σχηματίζουν περιθώριο μεταξύ
των γονέων. Για παράδειγμα, έχουμε ένα μενού.
Το κάτω περιθώριο αυτού του μενού μπορεί να σχηματιστεί
είτε με margin του div με το μενού, είτε με margin
των συνδέσμων. Καλύτερα να επιλέξετε την πρώτη επιλογή,
καθώς οι σύνδεσμοι δεν πρέπει να δρουν πάνω από το κεφάλι
του γονέα.
Συμβουλή 3
Ας υποθέσουμε ότι μεταξύ δύο στοιχείων υπάρχει περιθώριο
και σε αυτή την περίπτωση οπτικά δεν υπάρχει διαφορά,
τι να επιλέξετε για το περιθώριο - margin ή padding.
Σε αυτή την περίπτωση επιλέξτε το margin, αφού
αυτό ακριβώς πρέπει να δημιουργεί περιθώρια μεταξύ
στοιχείων.
