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

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

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

Δημοσίευση από patriot » 28 Σεπ 2009 20:44

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; Πώς στο καλό του βάζεις να είναι και ελεύθερο το πεδίο αλλά και "γεμάτο" προς τα αριστερά; Παντρεμένος και ανύπαντρος συγχρόνως γίνεται; :lol:

Λοιπόν.... αυτά για την ώρα... Μέχρι στιγμής δεν έχω κάτι άλλο να πω... παρά μονάχα καλό διάβασμα... :wink: Ελπίζω να μην σε φόρτωσα....
Τελευταία επεξεργασία από το μέλος patriot την 28 Σεπ 2009 21:34, έχει επεξεργασθεί 1 φορά συνολικά.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13308
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

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

Δημοσίευση από EneMe » 28 Σεπ 2009 21:01

patriot ήσουν κατατοπιστικότατος!!!!!!

Σ'ευχαριστώ κι εγώ προσωπικά!

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

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

Δημοσίευση από dpa » 28 Σεπ 2009 21:11

Φίλε είσαι όντως απίστευτος

ειλικρινά σε ευχαριστούμε πάρα πολύ.

Μήπως ξέρεις κανένα καλό βιβλίο για css στα ελληνικά ??

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

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

Δημοσίευση από patriot » 28 Σεπ 2009 21:31

@ eneme
Παρακαλώ... :wink: Δεν φαντάστηκα ότι θα σου ήταν και εσένα χρήσιμα.



@ dpa
Παρακαλώ επίσης. :wink:
Όχι δυστυχώς δεν ξέρω κανένα... Εγώ έμαθα από το internet, έτσι δεν χρειάστηκε να αγοράσω ποτέ μου κάποιο βιβλίο... Sorry :( :oops:
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

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

Δημοσίευση από korgr » 28 Σεπ 2009 21:41

patriot έγραψε: Εγώ έμαθα από το internet, έτσι δεν χρειάστηκε να αγοράσω ποτέ μου κάποιο βιβλίο... Sorry :( :oops:
Ποτε δεν ειναι αργα να γραψεις το ...πρωτο! :D
Ευγε κι απο μενα! :clap:

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1952
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

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

Δημοσίευση από vassilism » 28 Σεπ 2009 22:44

korgr έγραψε:Ποτε δεν ειναι αργα να γραψεις το ...πρωτο! :D
+1 :D

alexsoft

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

Δημοσίευση από alexsoft » 29 Σεπ 2009 10:06

+1 και ακόμη +1 :D

Άβαταρ μέλους
eleni_k
Δημοσιεύσεις: 94
Εγγραφή: 07 Φεβ 2006 01:45
Τοποθεσία: Λυκαβηττός
Επικοινωνία:

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

Δημοσίευση από eleni_k » 29 Σεπ 2009 11:07

Ένα ευχαριστώ και από μένα patriot :victory:

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

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

Δημοσίευση από patriot » 29 Σεπ 2009 21:27

Ειλικρινά πρώτη φορά με ευχαριστούν τόσο πολύ για κάτι που έγραψα!! Μέχρι και βοήθημα το έκανε ο boss! :oops: Ευχαριστώ για τα καλά σχόλια σας....
Ποτε δεν ειναι αργα να γραψεις το ...πρωτο!
+1 :D
+1 και ακόμη +1 :D
Παιδιά μην μου βάζετε ιδέες γιατί... μπορεί να σας πάρω στα σοβαρά... :hammer: :lol: :roll:
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1952
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

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

Δημοσίευση από vassilism » 29 Σεπ 2009 23:41

patriot έγραψε:Παιδιά μην μου βάζετε ιδέες γιατί... μπορεί να σας πάρω στα σοβαρά... :hammer: :lol: :roll:
Στα σοβαρά το λέμε.
Εξάλλου δεν θα είσαι ο πρώτος από το freestuff που θα γράψεις βιβλίο :kaloe:

Άβαταρ μέλους
parianos
Δημοσιεύσεις: 79
Εγγραφή: 17 Οκτ 2009 21:04
Επικοινωνία:

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

Δημοσίευση από parianos » 18 Δεκ 2009 20:45

καλησπέρα σας είμαι καινούργιος στο χώρο και αντιμετωπιζω το εξής πρόβλημα...
ενώ έχω φτιάξει τη σελίδα μου κανονικά θέλω να την κάνω να φάινεται όπως τη σχεδίασα σε κάθε ανάλυση...προσπαθώ να πάιξω με τα % αλλά δεν βγάζω άκρη,μπορεί καποιός να με βοηθήσει???τώρα οι εικόνες μου δεν πάνε μέχρι το όριο του cοntainer αλλά μέχρι ένα ορισμένο σημείο,δεν προσαρμόζονται δλδ με αποτέλεσμα να μένει λευκό απο ένα σημείο και έπειτα...υπάρχει τρόπος να το αλλάξω σε επι της 100 την ήδη υπάρχουσα σελίδα???,επίσης κάτι αλλο μπορώ να μαζέψω όλα τα CSS σε ένα γιατί διαβαζω απο δω και απο κει και κάθε φορά φτιάχνω και καινούργιο και έχω γεμίσει CSS.ο κώδικάς είναι ο εξής:

Κώδικας: Επιλογή όλων

body {
margin: 0px;
padding:0px;
background-image:url(backroundel.gif);
background-repeat:repeat-x;
height:100%;
width:100%;
}
html, body {height:100%}
.container {height:10%}
#container {
    border:double;
	margin:1%;
	padding:0px;
	background-color: #FFFFFF;
	background-position:center;
	height:100%;
	width:98%;
}
html, container {height:100%}
.header {height:10%}
#header {
    background-repeat:no-repeat;
    background-position:top-center;
	background-image:url(header.gif);
    height:20%;
	width:100%;
}
#navigation {
background-image:url(navigationbar.gif);
background-repeat:no-repeat;
width: 100%;
height:20%;
}
#header2 {
background-image:url(header2.gif);
width: 80%;
height: 3%;
margin: 0;
padding: 0;
}
#date{
	background-color:#FFFFFF;
	text-align:right;
	font:"Times New Roman", Times, serif;
	font-style:oblique;
	margin:auto;
	padding:0px;
}
#footer{
background-image:url(footer.gif);
width:80%;
height:2.5%;
margin:auto;
padding:0px;
}
#backkeimeno{
background-image:url(backkeimeno.gif);
width:80%;
height:40%;
margin:auto;
padding:0px;
display:block;
}
#mainmenu{ 
background-image: url(mainmenu.png);
width:195px;
height:200px;
margin:auto;
display:block;
float:left;
padding-bottom:inherit;
padding-top:inherit;
font-family:"Times New Roman", Times, serif;
text-align:center;
}
#meloi{ 
background-image: url(ereunites.png);
width:160px;
height:80px;
margin:auto;
display: block;
float:left;
padding-bottom: inherit; 
padding-top: inherit;
font-family:"Times New Roman", Times, serif;
text-align:center;
}
#keimeno1{
background:none;
width:50%;
height:40%;
margin:auto;
float:right;
padding-bottom:inherit;
padding-top:inherit;
text-align:center;
}
#papers{ 
background-image: url(papers.png);
width:160px;
height:80px;
margin:auto;
float:left;
padding-bottom: 5px; 
padding-top: 70px;
font-family:"Times New Roman", Times, serif;
text-align:center;
}  
Σας ευχαριστώ πολύ για το χρόνο σας

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης