Είναι μια από τις πιο κλασικές ερωτήσεις css που μου κάνουν από τη στιγμή που ξεκίνησα αυτό εδώ το blog. Πως κεντράρετε μια σελίδα οριζόντια είτε είναι fixed, δηλαδή έχει κάποιο συγκεκριμένο μέγεθος, είτε liquid, δηλαδή το μέγεθός της είναι σχετικό με το μέγεθος ενός ποσοστού (%).

Τα πράγματα είναι απλά και οι εντολές σε CSS δεν είναι δύσκολες για τη συγκεκριμένη δουλειά.
Για αρχή αυτό που κάνουμε είναι να συμπεριλάβουμε όλο τον κώδικα μετά το body σε ένα div έτσι ώστε να του δώσουμε κάποια χαρακτηριστικά.

<div id="container">
   <!--- εδώ μπαίνει όλη η σελίδα σας  --->
 </div>

Στο container τώρα θα δώσουμε τα παρακάτω χαρακτηριστικά

#container {
   width:900px;
   margin:0 auto;
 }

Η εντολή width δίνει μήκος στο div μας. Στην περίπτωσή σας δίνουμε κάποιο στατικό μέγεθος της τάξης των 900 pixels. Η επόμενη εντολή margin, αφήνει περιθώρια εξωτερικά του div. Εδώ βρίσκεται στην ουσία το κόλπο. Αν στο margin δώσεις μόνο δύο τιμές, η πρώτη θα αντιστοιχεί στο πάνω και κάτω μέρος του div και η δεύτερη στο δεξί και αριστερό. Άρα δίνοντας μηδέν στο πάνω και κάτω είναι σαν να μη μας ενδιαφέρει η τιμή αυτή. Έχοντας όμως ως auto την δεύτερη τιμή, λέμε στους browsers ότι το δεξί και αριστερό περιθώριο είναι ίσο, άρα όταν κάποιος χρήστης έχει για παράδειγμα μήκος οθόνης στα 1024 τότε αυτό που θα γίνει είναι το μέγεθος της σελίδας μας να είναι στα 900px και τα περιθώρια δεξιά και αριστερά να είναι στα 62px αντίστοιχα (1024 - 900 = 124 = 62 δεξιά + 62 αριστερά).

Αυτό ήταν! Εύκολο έτσι; Ακόμη ποιο απλή είναι η περίπτωση όπου έχουμε σχετικές τιμές στα μεγέθη μας. Ο κώδικας θα έμοιαζε με τον παρακάτω.

#container {

  width:auto;

  margin:0 5%;

}

Εδώ όπως βλέπουμε το width δε μας ενδιαφέρει διότι θέλουμε να έχει το μέγεθος της εκάστοτε οθόνης. Αυτό που αλλάζει εδώ είναι το margin όπου η δεύτερη τιμή είναι ποσοστιαία και στο παράδειγμά μας στο 5%.
Αυτά για σήμερα. cheers

Blogsphere: TechnoratiFeedsterBloglines
Bookmark: Del.icio.usSpurlFurlSimpyBlinkDigg