Αλλαγή bgcolor κελιού με "onmouseover"

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

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

Απάντηση
kosmas
Δημοσιεύσεις: 75
Εγγραφή: 16 Ιουν 2007 17:01

Αλλαγή bgcolor κελιού με "onmouseover"

Δημοσίευση από kosmas » 08 Οκτ 2007 20:48

Γεια σας !

Θέλω να μου πείτε πως μπορώ να αντικαταστήσω τα onmouseover μέσω css κώδικα και πως μπορώ να κεντράρω έναν πίνακα μέσω css.

Φυσικά προσπάθησα να τα καταφέρω και μόνος μου αλλά τζίφος... Λειτουργούν μόνο στο firefox. Ξέρετε τι πρέπει να κάνω για να λειτουργήσουν στον ie ?

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

<html>

<head>

 <link
 rel="stylesheet"
 href="stylesheet.css"
 type="text/css">

</head>

<body>

<table width="50%">
  <tr>
    <td class="kosmas" width="50%">&nbsp;</td>
    <td width="50%">&nbsp;</td>
  </tr>
  <tr>
    <td width="50%">&nbsp;</td>
    <td width="50%">&nbsp;</td>
  </tr>
</table>

</body>

</html>
css

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

table &#123;border-style&#58; solid;
       border-width&#58; 1px 1px 1px 1px;
       border-color&#58; #000000;
       border-collapse&#58; collapse;
       margin-left&#58;auto;
       margin-right&#58;auto;&#125;


td &#123;border-style&#58; solid;
    border-width&#58; 1px 1px 1px 1px;
    border-color&#58; #000000;&#125;


td.kosmas &#123;background-color&#58; #FFCCCC;&#125; 


td.kosmas&#58;hover &#123;background-color&#58; #000000;&#125;

kosmas
Δημοσιεύσεις: 75
Εγγραφή: 16 Ιουν 2007 17:01

Αλλαγή bgcolor κελιού με "onmouseover"

Δημοσίευση από kosmas » 08 Οκτ 2007 21:04

Επίσης θα ήθελα να ρωτήσω γιατί το font-size: x-small δεν δημιουργει στη css ,σε ie και firefox, γραμματοσειρά ίδιου μεγέθους σε σχέση με τη <font size=2> της html που είναι ακριβώς ίδια και για τους δύο browser.

Ευχαριστώ πολύ !!!!

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

Αλλαγή bgcolor κελιού με "onmouseover"

Δημοσίευση από patriot » 09 Οκτ 2007 01:59

1) Πρώτον. Δεν είναι τυπικά ορθό να χρησιμοποιείς λέξεις αγνώστου μνήμης. Δηλ το όποιο όνομα διαλέξεις πρέπει να πηγαίνει την μνήμη σου κατευθείαν στο αντίστοιχο αντικείμενο. Π.χ footer. Αμέσως καταλαβαίνεις ότι μιλάμε για το κάτω μέρος της σελίδας. Στα "πόδια" που λέμε.... Ενώ "kosmas"; Τι πάει να πει "kosmas". Τι σου θυμίζει αυτή η λέξη στην δημιουργία ενός layout; Την κορυφή; Το τέρμα; Τι; Άλλαξε το σε κάτι ποιο λογικό.

2) Για να πάει στο κέντρο το layout της σελίδας έχεις 2 επιλογές.
α) Βάζεις αυτό ΠΡΙΝ την λέξη <html> ΠΑΝΩ-ΠΑΝΩ!!

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

<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
β) Αν δεν θες αυτό (μπορεί να έχεις κάποιο λόγο) τότε βάζεις αυτό:
css code

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

#center &#123;text-align&#58;center;&#125; /* ΟΛΑ θα πάνε στο κέντρο */
td &#123;text-align&#58;left;&#125; /* Για οτιδήποτε θες να είναι στα αριστερά. Πρόσθεσε ότι άλλο θες εκτός από το td. Π.χ&#58; td, a, h1.... κ.τ.λ */
html code

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

<div id="center">ΣΕΛΙΔΑ</div>

3) Το "hover" στον ie δεν πιάνει σε τίποτα άλλο εκτός από το link. Αν θες βάλε στο link (a:link) ένα

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

display&#58;block
το οποίο κάνει το link να καταλαμβάνει όλο το π.χ. cell ενός table. Έτσι θα φαίνεται όλο το cell σαν δήθεν hover.


4) Σε μια σελίδα καλό είναι να βάζεις π.χ

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

* &#123;font-size&#58;100%;&#125;
ώστε όλοι οι χρήστες να βλέπουν το ίδιο αποτέλεσμα ανάλογα με την ανάλυση τους.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

kosmas
Δημοσιεύσεις: 75
Εγγραφή: 16 Ιουν 2007 17:01

Αλλαγή bgcolor κελιού με "onmouseover"

Δημοσίευση από kosmas » 09 Οκτ 2007 06:14

Γιατί όμως δεν πιάνουν τα:

margin-left: auto;
margin-right: auto;

για το κεντράρισμα του πίνακα ?

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

Αλλαγή bgcolor κελιού με "onmouseover"

Δημοσίευση από patriot » 09 Οκτ 2007 13:12

Επειδή ο ie6 ανήκει στην παλιά γενιά (quirks mode) ενώ αυτά στην νέα. Ο κώδικας doctype που σου έδωσα ακυρώνει το qm και σε βάζει στην νέα γενιά. Για περίπτωση όμως που δεν ήθελες την ακύρωση σου έδωσα και την δεύτερη λύση. :wink:
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

kosmas
Δημοσιεύσεις: 75
Εγγραφή: 16 Ιουν 2007 17:01

Αλλαγή bgcolor κελιού με "onmouseover"

Δημοσίευση από kosmas » 10 Οκτ 2007 20:45

Ευχαριστώ πολύ πραγματικά πολύτιμες οι πληροφορίες σου, ξεκαθάρισα πολλά πράγματα !

Μία τελευταία ερώτηση μόνο:

Όταν χρησιμοποιώ τη font-size με a%, το % που αναφέρεται ? Μήπως στο στοιχείο που εμπεριέχεται το κείμενο ? Επίσης αν θέλω να βάλω κείμενο στο κελί ενός πίνακα που είναι καλύτερο να τοποθετώ αυτό και τη class (για τη css) κατευθείαν στη <td> ή να φτιάχνω <p> μέσα στη <td> ?

Και πάλι Ευχαριστώ πολύ !!!!!!!!

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

Αλλαγή bgcolor κελιού με "onmouseover"

Δημοσίευση από patriot » 11 Οκτ 2007 03:22

1)
Το αστεράκι * σημαίνει ότι το font-size πιάνει σε όλη την σελίδα. Στα <p>, στα <td>, κ.τ.λ...., δηλ παντού.

Παράδειγμα. Μπορείς να γράψεις:

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

body, td, p, h1, h2, h3, h4, h5, h6, class, id .....και λοιπά...... &#123;font-size&#58;100%;&#125;
ή πολύ απλά

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

* &#123;font-size&#58;100%;&#125;
είναι το ίδιο πράγμα.


2)
Κάθε πράγμα έχει την χρήση του. Και το id και το class.
"Id" βάζουμε όταν θέλουμε να ανοίξουμε νέα κατηγορία δεδομένων. Που αργότερα στην πορεία θα προσθέσουμε υπό-κατηγορίες κ.τ.λ....

Class βάζουμε όταν θέλουμε να βάλουμε λίγη ομορφιά στην ήδη υπάρχουσα κατηγορία (id). Αν εσύ βάλεις class σε ολόκληρο το td σημαίνει ότι όλα τα πράγματα θα έχουν την ίδια μοίρα. Άρα όλα θα είναι ένα μπάχαλο. Αποτέλεσμα; Χάνονται οι κατηγορίες. Συνιστώ λοιπόν να βάζεις κάθε τρεις και λίγο από ένα <P> παρά μια φορά και τέρμα.

Αν διαβάσεις τα παρακάτω άρθρα θα σου λυθούν πολλές απορίες (κατά προτίμηση διάβασε τα με την σειρά που τα έβαλα)
web design
HTML element
Span and div (δηλ class και id)
Cascading Style Sheets
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Απάντηση

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

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

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