H χρήση του * στο CSS

[Anastasis 48]

1) Το αστεράκι (*) σημαίνει "όλα". Δηλ αφού μπήκε η εντολή να φαίνεται παντού μια φωτογραφία, φυσικά φάνηκε και μια εικόνα στο background του container.

2) "background-repeat: repeat-x;" σημαίνει ότι το background θα επαναλαμβάνεται μόνο στον -μαθηματικό- άξονα "x" δηλ οριζόντια. Μπορείς να το αλλάξεις σε κάποια άλλη από τις εξής επιλογές:
- α) repeat-y (κάθετα)
- β) no-repeat
- γ) repeat (το συγκεκριμένο, αν δεν το βάλεις, εννοείται αυτομάτως)


Αυτά σε ότι αφορά τις ερωτήσεις σου..... Όμως έχω να σου πω και κάποια άσχετα πραγματάκια που δεν τα ρώτησες. Κάτι μικρό-λαθάκια. Να διευκρινήσω ότι τα συγκεκριμένα δεν είναι 100% λάθη, απλά συνιστάται να είναι σωστά. Είναι δηλ καλύτερα να τα διορθώσεις αν θες να έχεις "καθαρό" κώδικα...

1) Μην βάζεις από την μία σκέτο "0" ( π.χ padding:0; ) και από την άλλη "0px". Να βάζεις παντού το ίδιο. Θα σε βοηθήσει να ξεχωρίζεις διαφορές με το μάτι, όταν συνηθίσεις τον κώδικα.

2) Είναι καλύτερο να βάζεις πάντα "0px" όχι σκέτο "0". Τα τρελά των browsers (που γίνονται conflicts για το ποιο ηλίθιο θέμα) δεν τα ξέρεις, έτσι δεν θα μπορείς να καταλάβεις γιατί εδώ φαίνεται σωστά ενώ εκεί όχι. Είναι καλύτερο να διευκρινίζεις εξ' αρχής ότι το "0" που εννοείς, ΤΟ ΕΝΝΟΕΙΣ!!

3) Στο font-family, όταν βάζεις περισσότερο από 1 γραμματοσειρές, να τις βάζεις με την σειρά που είναι δημοφιλέστερες και από άποψη ομορφιάς/καλλιτεχνίας αλλά και διασημότητας της (δηλ να είναι τόσο διάσημη ώστε να την έχουν όλοι οι χρήστες). Εσύ έβαλες "Arial, Helvetica, sans-serif;". Αυτό σημαίνει ότι όλοι οι χρήστες θα δουν την σελίδα σου με Arial. Αν δεν έχουν Arial θα την δουν με Helvetica και πάει λέγοντας. Όμως πόσο ευκολοδιάβαστη είναι μια σελίδα με Arial; Συνιστώ να βάλεις και την verdana, και μάλιστα πρώτη.

4) Από την στιγμή που έβαλες μια τελεία πριν το "container" σημαίνει ότι το θες να είναι class. Και "class" σημαίνει κάτι που επαναλαμβάνεται. Το container όμως είναι αυτό που λέει το όνομα του. Αυτό που περιέχει τα πάντα. Δεν μπορούν τα πάντα να επαναλαμβάνονται. Άλλαξε το και κάνε το div, δηλ βγάλε την τελεία (.) και βάλε το καρό (#) (εκτός βέβαια αν το θες όντως έτσι!)

5) Αν το κάνεις div τελικά, τότε το "display:block" δεν χρειάζεται να μπει. Το "display:block" σημαίνει ότι το συγκεκριμένο element θα καταλαμβάνει όλον τον σχετικό χώρο. "Div" σημαίνει το ίδιο ακριβώς πράγμα. Άρα δεν χρειάζεται να τα βάλεις και τα δύο.

6) Το width μπορείς να το βάλεις όσο θες. Το height όμως απαιτεί μια διευκρίνηση. Όταν του λες ότι θες να είναι ύψος "τόσο τοις εκατό", τότε πρέπει να του δώσεις και μια μονάδα σύγκρισης. Για παράδειγμα... πες ότι θες να είναι 10% του...... του; Τίνος; Αν είναι του body π.χ, τότε πρέπει να προσθέσεις στο ίδιο το body ένα "τόσο" ύψος. Και βέβαια το "τόσο" είναι το μεγαλύτερο που θέλουμε δηλ 100%. Δηλ θα πρέπει να γράψεις:

html, body {height:100%}
.container {height:10%}

7) Όπως το height του container χρειάζεται κάτι για να συγκρίνεται μαζί του (δηλ το height του body) έτσι και το "float" (που τυχαίνει στην προκειμένη περίπτωση να είναι το left) χρειάζεται κάτι να συγκρίνεται μαζί του επίσης. Αυτό σημαίνει ότι πρέπει να βάλεις άλλο ένα class/div/κάποιο element, δίπλα του, το οποίο θα είναι οπωσδήποτε και αυτό floated. Και βέβαια αυτό θα συνεχίζεται εις άπειρον. Θες οπωσδήποτε όλο το site να είναι το ένα element δίπλα με το άλλο στα αριστερά (left); Τότε αντί να έχουμε scrollbar στα δεξιά θα έχουμε κάτω μπάρα...!!! Κάπου θα πρέπει να το σταματήσεις.... Και για να το σταματήσεις έχεις δύο επιλογές:

α) Αυτά που συνήθως είναι floated είναι τα classes τα οποία περικυκλώνονται από ένα div. Βάλε το div να έχει ορισμένο width.

β) Αυτή η λύση δεν είναι και η καλύτερη αλλά... Βάλε ένα clear στο τελευταίο class. Το πρόβλημα είναι ότι το περιεχόμενο μιας σελίδας αλλάζει κάθε τρεις και λίγο. Δεν μπορείς να κρατάς τσίλιες κάθε μέρα να βλέπεις αν αυτό είναι το τελευταίο class. Μόνο αν ξέρεις από τον αρχή ότι αυτό είναι το τελευταίο το βάζεις...

8 ) Και τέλος (ναι το ξέρω ότι σε κούρασα) έχουμε ένα πρόβλημα με το clear:both. Όπως λέει και το όνομα του, "clear" θα πει "ελευθερο". Και ειδικά στα css διευκρινίζουμε ότι αυτό που θα είναι ελεύθερο είναι τα πλαϊνα ενός element. Εσύ έχεις βάλει το container να είναι clear, ελεύθερο, από αντικείμενα μεν, αλλά όλα τα υπόλοιπα elements να είναι float:left δηλ όλα τα υπόλοιπα elements να αιωρούνται γύρω του μόνο από την αριστερή του πλευρά. Δεν νομίζεις ότι εδώ γίνεται ένα conflict; Πώς στο καλό του βάζεις να είναι και ελεύθερο το πεδίο αλλά και "γεμάτο" προς τα αριστερά; Παντρεμένος και ανύπαντρος συγχρόνως γίνεται;