CSS στοίχηση και αλλαγή background onmouseover

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

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

Απάντηση
ibanezix
Δημοσιεύσεις: 38
Εγγραφή: 26 Νοέμ 2004 13:45
Τοποθεσία: Λεμεσός, Κύπρος

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από ibanezix » 10 Μάιος 2007 19:31

Ξεκίνησα να διαβάζω τα tutorials του lunarmedia για το στήσιμο σελίδας με css, τα οποία παρεπιπτόντως είναι πάρα πολύ καλά, και έχω δύο απορίες, μία σχετική με τα tutorials και μία άσχετη.

Η πρώτη είναι: στο πρώτο tutorial, δίνει:

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

#container { 
margin: 0 auto; }
το οποίο πρέπει να στοιχήσει όλο το container div στη μέση της σελίδας. Αυτό συμβαίνει σε Opera και Firefox σωστά, αλλά όχι σε Internet Explorer 7. Καταλαβαίνω τα σχετικά με το διαφορετικό rendering σελίδας σε κάθε browser, το θέμα είναι πώς το λύνω;

Η δεύτερη: βλέπω σε διάφορα site να αλλάζει το background ενός div όταν περνάει το mouse από πάνω, όπως συμβαίνει και στην αρχική σελίδα του freestuff.gr στο μενού. Αυτό πώς γίνεται; Δεν είναι ανάγκη να μου γράψετε τον κώδικα αν προτιμάτε να με παραπέμψετε σε κάποιο tutorial, είμαι διαβαστερό παιδί :)

Ευχαριστώ προκαταβολικά.

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από manolism » 10 Μάιος 2007 19:53

Όσον αφορά το πρώτο δεν ξέρω τι άλλο έχεις κάνει και δεν πετυχαίνει. Κανονικά έπρεπε να δουλεύει.

Για το δεύτερο θα σε παραπέμψω στο μάθημα 6 στο οποίο τα images έχουν μπει ως background στα div.

Ότι άλλο θες εδώ είμαστε.

Άβαταρ μέλους
hik-hok
Reporter
Δημοσιεύσεις: 3571
Εγγραφή: 09 Μαρ 2003 10:45
Τοποθεσία: Agrrrrrrrrrr...... γάβ γάβ!!
Επικοινωνία:

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από hik-hok » 10 Μάιος 2007 21:25

για το πρώτο βαλε στο

body {
margin: 0;
text-align:center; <---------------

αν και φαίνεται παράλογο χρησιμοποιείται συχνά για να διορθώσει το πρόβλημα στον explorer
Εικόνα

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

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από skeftomilos » 11 Μάιος 2007 00:00

Επιτρέψτε μου μια παρατήρηση γιατί σε αυτό το σημείο υπάρχει κάτι που με βασανίζει έντονα με το CSS. Τι θα περίμενε κανείς ότι κάνουν αυτοί οι τρεις κανόνες;

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

#element &#123;margin&#58;0 auto&#125;
#element &#123;align&#58;center&#125;
#element &#123;vertical-align&#58;middle&#125;
- Ο πρώτος είναι ένας μαθηματικός γρίφος που έχει ως αποτέλεσμα το κεντράρισμα του element.
- Ο δεύτερος δηλώνει ξεκάθαρα την πρόθεσή του να κεντράρει το element, αλλά είναι ανύπαρκτος οπότε δε λειτουργεί.
- Ο τρίτος λειτουργεί αλλά με τρόπο παραπλανητικό. Αυτό που κάνει δε μπορεί να περιγραφεί πλήρως με λιγότερες από τρεις παραγράφους πυκνού κειμένου.

Για ποιο λόγο το semantic markup πρέπει να συνοδεύεται από τόσο UN-semantic styles; :(
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από patriot » 11 Μάιος 2007 02:59

Για το πρώτο.
α) Βάζεις width. Βάλε το να είναι π.χ 50% και ξαναδές. Πήγε στο κέντρο; ( Αν δεν υπάρχει μια απόσταση που να προσδιορίζει την αρχή, την μέση και το τέλος πως θα ξέρεις που είναι το κέντρο; )

β) Βεβαιώνεσαι ότι έχεις strict DTP. Εν ολίγοις έχεις το qm (quirks mode) OFF! (DTP list).
Σημ: αν για κάποιο λόγο θες το qm να είναι ON τότε μπορείς να προσθέσεις ένα έξτρα div αν και το βρίσκω υπερβολικό. Δείγμα:

CSS code

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

#center &#123;text-align&#58;center;&#125;
#content &#123;text-align&#58;left&#125;
HTML code

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

<div id="center">
  <div id="content"></div>
</div>
Φυσικά αυτό θα σου επιφέρει το πρόβλημα ότι όλα θα είναι στο κέντρο αλλά αυτό λύνεται με ένα text-align:left; στο εσωτερικό (content) div όπως βλέπεις και ποιο πάνω.


Για το δεύτερο.
Εξαρτάται που το βλέπεις. Αν το βλέπεις σε explorer (6.0... όχι 7) ο οποίος έχει ένα μικρό bug με το hover -πλην του href- τότε η εντολή είναι διαφορετική από ότι άμα το βλέπεις σε άλλους browsers.

Αν το βλέπεις σε explorer σημαίνει ότι είναι href:

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

a &#123;background-color&#58;tade;&#125;
a&#58;hover &#123;background-color&#58;allo tade;&#125;
Αν το βλέπεις αλλού τότε μπορεί να είναι οτιδήποτε (div π.χ) γιατί όλοι οι browsers βλέπουν το :hover ως hovered movement και όχι ως "ψόφιο movement". :P
Τελευταία επεξεργασία από το μέλος patriot την 11 Μάιος 2007 06:15, έχει επεξεργασθεί 1 φορά συνολικά.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από patriot » 11 Μάιος 2007 03:05

skeftomilos έγραψε:

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

#element &#123;align&#58;center&#125;
- Ο δεύτερος δηλώνει ξεκάθαρα την πρόθεσή του να κεντράρει το element, αλλά είναι ανύπαρκτος οπότε δε λειτουργεί.
Τυπογραφικό: text-align:center;
- Ο τρίτος λειτουργεί αλλά με τρόπο παραπλανητικό. Αυτό που κάνει δε μπορεί να περιγραφεί πλήρως με λιγότερες από τρεις παραγράφους πυκνού κειμένου.
Μωρέ ότι λειτουργεί, λειτουργεί. Αλλά μόνο στα images :cry:
Για ποιο λόγο το semantic markup πρέπει να συνοδεύεται από τόσο UN-semantic styles;
Άγνωσταί αι βουλαί του W3!!
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από skeftomilos » 11 Μάιος 2007 19:49

Δεν πρόκειται για typo, το align:center είναι ένας κανόνας που απλά δεν υπάρχει. Και επειδή δεν υπάρχει αναγκαζόμαστε να καταφεύγουμε στο λιγότερο προφανές και ευανάγνωστο margin:0 auto.

Το text-align:center δεν κεντράρει το ίδιο το element αλλά τα περιεχόμενά του. Μάλιστα συνεχίζει αναδρομικά κεντράροντας τα περιεχόμενα των περιεχομένων. Αυτό μπορεί να εμποδιστεί με...

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

* &#123;text-align&#58;left&#125;
...το οποίο όμως δεν ξέρω τι παρενέργειες μπορεί να έχει. Ας σημειωθεί ακόμα ότι το text-align:center δεν κεντράρει μόνο text αλλά κάθε είδους περιεχόμενο, inline images, block sub-containers κ.λπ.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

ibanezix
Δημοσιεύσεις: 38
Εγγραφή: 26 Νοέμ 2004 13:45
Τοποθεσία: Λεμεσός, Κύπρος

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από ibanezix » 12 Μάιος 2007 12:36

Θαυμάζω την υπομονή σας εσάς που ασχολείστε επαγγελματικά με το design :) Παραθέτω μια σελιδούλα που έφτιαξα για να καταλάβω τι γίνεται...


HTML:

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

<html><head>
<title>test</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
</div>
</body></html>
CSS:

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

#container &#123; 
margin&#58; 0 auto; 
padding&#58; 0px; 
width&#58; 200px; 
height&#58;200px; 
background-color&#58;#aaaaaa; 
&#125;
#header &#123;
margin&#58;0;
padding&#58;0;
width&#58;200;
height&#58;100;
background-color&#58;#cccccc;
&#125;
Το αναμενόμενο είναι να εμφανιστεί ένα τετράγωνο 200 Χ 200, με ένα ορθογώνιο 200 Χ 100 στο πάνω μέρος, δλδ το ορθογώνιο "κρύβει" το πάνω μισό του τετραγώνου, ενώ όλο μαζί να είναι στοιχημένο στη μέση της σελίδας.

Αυτό συμβαίνει όπως είναι αναμενόμενο σε FF και Opera αλλά όχι σε ΙΕ. Αν βάλω στην πρώτη γραμμή του HTML αρχείου:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
δεν αλλάζει κάτι στην εμφάνιση της σελίδας. Αν όμως βάλω:

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

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
το τετράγωνο στοιχίζεται σωστά στη μέση στους τρεις browsers αλλά εξαφανίζεται το header!

Μήπως με το strict dtd πρέπει οπωσδήποτε να ορίζω τη διάσταση Ζ κάθε αντικειμένου;

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

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από skeftomilos » 13 Μάιος 2007 02:04

Μάλλον έχεις ξεχάσει να βάλεις μονάδες μέτρησης στις διαστάσεις του #header. :-)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

ibanezix
Δημοσιεύσεις: 38
Εγγραφή: 26 Νοέμ 2004 13:45
Τοποθεσία: Λεμεσός, Κύπρος

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από ibanezix » 13 Μάιος 2007 09:10

:o Μα τον Τούτατις, θα πρέπει να είμαι πιο προσεκτικός... Σας ευχαριστώ όλους για την βοήθειά σας, η δύναμη του Μπελένος να είναι μαζί σας :):)

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

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από patriot » 13 Μάιος 2007 09:16

skeftomilos έγραψε:Δεν πρόκειται για typo, το align:center είναι ένας κανόνας που απλά δεν υπάρχει.
:doh: :doh: Δεν πρόσεξα το :. Αφαιρέθηκα και νόμιζα ότι εννοείς το ="" και σκέφτηκα ότι απλά δεν θα έβαλες το "div". (div align="center")
μπορεί να εμποδιστεί με...

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

* &#123;text-align&#58;left&#125;
...το οποίο όμως δεν ξέρω τι παρενέργειες μπορεί να έχει.
Ανάλογα με τον browser (mozilla / netscape / explorer), ανάλογα με το version του browser (κάποτε τουλάχιστον.... σήμερα ο κίνδυνος δεν είναι τόσο διαδεδομένος. To "από version σε version" δεν πολύ ισχύει πια), και ανάλογα με το λειτουργικό σύστημα. Άλλο safari άλλο windows.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

ibanezix
Δημοσιεύσεις: 38
Εγγραφή: 26 Νοέμ 2004 13:45
Τοποθεσία: Λεμεσός, Κύπρος

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από ibanezix » 14 Μάιος 2007 16:17

Και μια ερώτηση ακόμα... προσπάθησα να κάνω validate τη σελίδα από το site του w3, και μου βγάζει ένα μόνο λάθος:
Error Line 5 column 59: character data is not allowed here.
<link href="styles.css" rel="stylesheet" type="text/css" />

You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include putting text directly in the body of the document without wrapping it in a container element (such as a <p>aragraph</p>) or forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes).
Ξέρετε τι σημαίνει αυτό και πώς διορθώνεται;

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

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από skeftomilos » 14 Μάιος 2007 16:41

Αν γράφεις HTML τότε το κλείσιμο των tags με /> είναι άκυρο. Το σωστό είναι:

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

<link href="styles.css" rel="stylesheet" type="text/css">
Αν πάλι γράφεις XHTML (και σερβίρεις text/xml ή application/xhtml+xml ή application/xml) τότε δεν υπάρχει λάθος.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

ibanezix
Δημοσιεύσεις: 38
Εγγραφή: 26 Νοέμ 2004 13:45
Τοποθεσία: Λεμεσός, Κύπρος

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από ibanezix » 14 Μάιος 2007 21:02

Όπως τα λες είναι. :)

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

CSS στοίχηση και αλλαγή background onmouseover

Δημοσίευση από manolism » 15 Μάιος 2007 10:37

Επίσης για το background που ρώτησες κοίτα και εδώ.

Απάντηση

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

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

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