2 Classes σε/στην μια/ίδια εντολή!

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

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

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

2 Classes σε/στην μια/ίδια εντολή!

Δημοσίευση από patriot » 03 Μάιος 2005 12:56

Εδώ και καιρό είχα το πρόβλημα του πως να προσθέσω 2 classes σε ένα αντικείμενο κυρίως γιατί ήθελα να βάλω δύο background-images σε ένα html document. Έψαξα λοιπόν και βρήκα το εξής κολπάκι. Ξέρατε ότι μπορείτε να προσθέσετε όσα classes θέλετε αφήνοντας μόνο ένα κενό; Προσοχή: ΚΕΝΟ είπα. ΟΧΙ κόμμα! Π.χ:

Βάλτε μέσα στο style στο head:

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


.bordered { 
	border: dotted 2px black;
	width: 200px;
	margin: 6px 3px 6px 3px;
	padding: 4px;
}
.info { background-color: #ffccff; }
.feature { background-color: #ccffcc; }
.warning { background-color: #ffffcc; }
.coolness { background-color: #ccccff; }

Και γράψτε τα δύο classes - αφήνοντας το κενό - ως εξής:

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


<div class="bordered feature">
		This is an energy-saving radio.
	</div>
	<div class="bordered warning">
		Do not operate this radio under water.
	</div>
	<div class="coolness bordered">
	   This radio has a USB port for Internet
	   connectivity.
	</div>

Μπορείτε να βάλετε όσα classes θέλετε, όχι μόνο ένα ή δύο, αφήνοντας απλά ένα κενό... Simple huh?

Σημειώστε ότι αν τα properties των δύο classes "πέφτουν" το ένα πάνω στο άλλο, θα ισχύσει αυτό που είναι γραμμένο τελευταίο μέσα στο style στο head.... (Άλλωστε αυτό δεν σημαίνει "Cascade style sheets"?)

Πηγή: CatCode.com
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

2 Classes σε/στην μια/ίδια εντολή!

Δημοσίευση από xmavidis » 03 Μάιος 2005 13:15

Δοκίμασε το έτσι

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

<div class="bordered, feature">
      This is an energy-saving radio.
   </div>
   <div class="bordered, warning">
      Do not operate this radio under water.
   </div>
   <div class="coolness, bordered">
      This radio has a USB port for Internet
      connectivity.
   </div> 
I want to know God’s thoughts; the rest are details.
Albert Einstein

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

2 Classes σε/στην μια/ίδια εντολή!

Δημοσίευση από skeftomilos » 03 Μάιος 2005 17:52

Το δοκίμασα αλλά δε δουλεύει έτσι (σε κανένα browser). Το κόμμα εμποδίζει την πρώτη κλάση να ενεργήσει στο element. :-?
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

2 Classes σε/στην μια/ίδια εντολή!

Δημοσίευση από patriot » 04 Μάιος 2005 08:17

Δοκίμασε το έτσι
Πρώτον δεν κατάλαβα ποια είναι η διαφορά σε αυτό που δίνεις....
Δεύτερον: μάλλον δεν εξηγήθηκα καλά. Λόγο του ότι είχα πρόβλημα και δεν έβρισκα την λύση, γι' αυτό όταν το βρήκα είπα να το πω και σε άλλους. Αλλά μάλλον δεν το εξήγησα καλά, σόρρυ... Πάντως είναι περισσότερο tutorial παρά ερώτηση...



Και skeftomilos ακριβώς επειδή το βρήκα και το δοκίμασα (έκανα copy/paste από την σελίδα και πέτυχε επακριβώς) γι' αυτό δεν κατάλαβα γιατί δεν λειτούργει σε σένα... Μήπως καταλάθος έσβησες κάτι;

Το δοκίμασες κατευθείαν από την πηγή (ή μήπως δεν πρόσεξες το url?) και δεν δουλεύει ούτε από κει; http://catcode.com/csstips/classes.html
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

2 Classes σε/στην μια/ίδια εντολή!

Δημοσίευση από skeftomilos » 04 Μάιος 2005 09:35

Δεν αναφερόμουνα στο δικό σου κώδικα patriot (που είναι άριστος) αλλά στην παραλλαγή που προτείνει ο xmavidis:

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

<div class="bordered, feature">
Έχει προσθέσει ένα κόμμα ανάμεσα στις κλάσεις που δημιουργεί προβλήματα.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

2 Classes σε/στην μια/ίδια εντολή!

Δημοσίευση από xmavidis » 04 Μάιος 2005 11:04

Δεν είχα δοκιμάσει ποτέ κάτι τέτοιο και είπα μήπως δουλέψει έτσι
:roll: :roll:
I want to know God’s thoughts; the rest are details.
Albert Einstein

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

2 Classes σε/στην μια/ίδια εντολή!

Δημοσίευση από skeftomilos » 06 Μάιος 2005 04:09

Μία άλλη ιδέα χρήσης των διπλών κλάσεων είναι όταν θέλουμε να εξαφανίσουμε ορισμένα στοιχεία στην περίπτωση που δεν είναι ενεργή η JavaScript. Π.χ. γιατί να είναι ορατό ένα button αν δε δουλεύει? Υπάρχουν διάφοροι τρόποι να γίνει αυτό, αλλά ο πιο κομψός είναι με CSS. Στο head βάζουμε:

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

<noscript><style type="text/css">.js &#123; display&#58;none &#125;</style></noscript>
... και μετά σε κάθε στοιχείο που χρειάζεται JavaScript του προσθέτουμε τη CSS κλάση js, π.χ.:

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

<button class="silver js" onclick="magic&#40;&#41;">Τυχερός αριθμός</button>
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

2 Classes σε/στην μια/ίδια εντολή!

Δημοσίευση από patriot » 07 Μάιος 2005 00:07

skeftomilos έγραψε:Δεν αναφερόμουνα στο δικό σου κώδικα patriot (που είναι άριστος) ....
Ουφ.. Νόμιζα ότι έκανα καμιά γκάφα και λέω άλλα αντί άλλων! Thanks css guru!! (Καλά να σκεφτείς ότι την στιγμή που έγραφα το πρώτο ποστ σκεφτόμουν αν θα το ήξερες ή όχι.... το στοίχημα πάντως το έχασα!!)
Έχει προσθέσει ένα κόμμα ανάμεσα στις κλάσεις που δημιουργεί προβλήματα.
Στραβωμάρα.... δεν το είδα καν! Είχα μείνει με την ιδέα ότι τόνισα ΟΧΙ ΚΟΜΜΑ και δεν κοίταξα καν εκεί. Ευτυχώς που το τόνισες γιατί μιας και για μένα αυτό ήταν καινούργιο κόλπο θα μπορούσε να μου κολλήσει τίποτα λάθος...

ΥΓ: Το τελευταίο σου ποστ (μιας και δεν ξέρω javascript) ήταν απολύτα κατανοητό από μένα. Να' σαι καλά! Έψαχνα κάτι τέτοιο...

ΥΓ: Μήπως πρέπει να το κάνουμε βοήθημα; Μπορεί σε κάποιον να χρησιμεύσει...
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

2 Classes σε/στην μια/ίδια εντολή!

Δημοσίευση από patriot » 07 Μάιος 2005 09:58

Όπως είπα πριν:
patriot έγραψε:ΥΓ: Το τελευταίο σου ποστ (μιας και δεν ξέρω javascript) ήταν απολύτα κατανοητό από μένα. Να' σαι καλά! Έψαχνα κάτι τέτοιο...


Τώρα όμως σκέφτηκα το εξής: Αν έχει κάποιος απενεργοποιημένη την Javascript πώς θα κάνω αυτά τα κουμπιά να δουλεύουνε σαν κανονικά links ώστε να πηγαίνει μπρος ή πίσω ο επισκέπτης?
javascript:history.go(-1)
javascript:history.go(+1)
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

2 Classes σε/στην μια/ίδια εντολή!

Δημοσίευση από skeftomilos » 07 Μάιος 2005 18:39

Δεν υπάρχει υποκατάστατο της JavaScript για αυτού του είδους τις εντολές. Επομένως νομίζω ότι καλό είναι τα σχετικά links ή κουμπιά να μην είναι ορατά χωρίς JavaScript. Αν και προσωπικά θα απεφευγα τέτοιες εντολές ούτως ή άλλως, καθώς όλοι οι browsers διαθέτουν κουμπιά Back και Forward και οι χρήστες ξέρουν που βρίσκονται!
:)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

2 Classes σε/στην μια/ίδια εντολή!

Δημοσίευση από patriot » 07 Μάιος 2005 22:23

Κρίμα... Ευχαριστώ!
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

2 Classes σε/στην μια/ίδια εντολή!

Δημοσίευση από patriot » 08 Μάιος 2005 20:07

skeftomilos έγραψε:Μία άλλη ιδέα χρήσης των διπλών κλάσεων είναι όταν θέλουμε να εξαφανίσουμε ορισμένα στοιχεία στην περίπτωση που δεν είναι ενεργή η JavaScript. Π.χ. γιατί να είναι ορατό ένα button αν δε δουλεύει? Υπάρχουν διάφοροι τρόποι να γίνει αυτό, αλλά ο πιο κομψός είναι με CSS. Στο head βάζουμε:

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

<noscript><style type="text/css">.js &#123; display&#58;none &#125;</style></noscript>
... και μετά σε κάθε στοιχείο που χρειάζεται JavaScript του προσθέτουμε τη CSS κλάση js, π.χ.:

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

<button class="silver js" onclick="magic&#40;&#41;">Τυχερός αριθμός</button>
Θυμάσαι που είπα ότι ψάχνω κάτι τέτοιο; Ε, ήρθε η ώρα να το χρησιμοποιήσω. Πάω λοιπόν το κάνω copy/paste και παρόλο που πέτυχε έχω ένα μικρό πρόβλημα. Όταν βάζω την κλάση "πιάνει" μόνο το display:block όχι η εντολή Noscripting. Δηλ είτε έχω noscript είτε όχι το button χάνεται έτσι και αλλιώς.... Γιατί; Πρέπει να γίνεται οπωσδήποτε όταν έχουμε 2 classes; (Μιας και κάτι τέτοιο ανέφερες πριν... αν και το βρίσκω παράλογο...)
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

2 Classes σε/στην μια/ίδια εντολή!

Δημοσίευση από skeftomilos » 09 Μάιος 2005 18:31

Ο HTML ή CSS κώδικας μέσα στο tag noscript αγνοείται όταν η JavaScript είναι ενεργή, επομένως δε δημιουργήται κλάση js. Όταν λοιπόν έρθει ή ώρα να γίνει το parsing του στοιχείου <button class="silver js">, η λέξη js δεν αναγνωρίζεται ως υπαρκτή κλάση και ο css parser την αγνοεί. Άρα το κουμπί παραμένει ορατό, εκτός βέβαια αν το κρύψει η άλλη κλάση "silver" που έχω προσθέσει μόνο για να εμπλουτίσω το παράδειγμα.

Για να κάνεις τις σχετικές δοκιμές πρέπει να ενεργοποιείς και να απενεργοποιείς τη JavaScript συχνά, και ο Internet Explorer δε βοηθάει πολύ σε αυτό. Ο Opera είναι προτιμότερος, και ακόμα προτιμότερος ο Firefox, ιδίως όταν έχει το extension WebDeveloper.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

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

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

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