Style Sheets Ιστού
CSS συμβουλές και κόλπα

(Αυτή η σελίδα χρησιμοποιεί CSS style sheets)

Το παρόν έγγραφο είναι μετάφραση του άρθρου «Cascading Style Sheets. CSS tips & tricks».
Αυθεντική εκδοχή του εγγράφου βρίσκεται μόνο στην ιστοσελίδα W3C http://www.w3.org/Style/Examples/007/menus
Η παρούσα μετάφραση ΔΕΝ είναι επίσημο έγγραφο της W3C.
Όλα τα κοπιράιτ ανήκουν στη W3C.
Το παρόν έγγραφο μπορεί να έχει λάθη της μετάφρασης και εσφαλμένη εκτύπωση.
Συγγραφέας: Dimitris Papadopoulos

Καρφωμένο μενού

Το μενού που βλέπετε στην κορυφαία δεξιά γωνία αυτής της σελίδας είναι απλά DIV με μερικά στοιχεία Α μέσα. Όλη η εργασία για να το κάνει να παραμένει σταθερό στην θέση του γίνεται με κανόνες στο style sheet. Εδώ είναι το παράδειγμα παρμένο κατ' ευθείαν από την πηγή αυτής της σελίδας:

<div class="banner">
<p>
<a  href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a  href="../../../Consortium/Activities">Activities</a>
<a  href="../../../TR/">Tech.&nbsp;reports</a>
<a  href="../../../Help/siteindex">Site index</a>
<a  href="../../../Consortium/Translation/">Translations</a>
<a  href="../../../Status">Software</a>
<a  href="http://search.w3.org/">Search</a>
<em>Nearby:</em>
<a  href="../../">Style</a>
<a  href="../../CSS/">CSS</a>
<a  href="./">tips&nbsp;&amp;&nbsp;tricks</a>
</div>

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

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

Οι κανόνες που έχουν ενδιαφέρον εδώ είναι ο 'position: fixed', που κάνει το DIV να μένει σε σταθερή θέση της οθόνης, και ο 'display: block', που ορίζει τα στοιχεία Α μέσα στο DIV σαν στοιχεία τύπου block και έτσι προβάλλονται το ένα κάτω από το άλλο, αντί να είναι όλα σε μια γραμμή.

Να είστε προσεκτικοί με τη σειρά των τελευταίων τριών κανόνων. Όλοι έχουν την ίδια σπουδαιότητα, έτσι ο τελευταίος που χρησιμοποιείται καθορίζει και το χρώμα. Εάν το ποντίκι περνάει πάνω από τον σύνδεσμο, εμείς θέλουμε το :hover για την χρήση, γιαυτό πρέπει να είναι τελευταίο.

Τα υπόλοιπα, τα περιθώρια, οι μπορντούρες, τα χρώματα, κλπ. μπορούν να αφαιρεθούν ή να αλλαχτούν σύμφωνα με την προσωπική προτίμηση. Σημειώστε, εντούτοις, πώς κάναμε τους κανόνες μεταξύ των συνδέσμων: υπάρχουν μπορντούρες σε όλους τους συνδέσμους, εκτός από τον πρώτο, χάρι στον κανόνα με ':first-child'. Ένα ζευγάρι των κανόνων όπως αυτό (border-top σε όλα τα στοιχεία συν border 'none' στο πρωτογενές child είναι πολύ κατάλληλο για τη δημιουργία των μπορντούρων μεταξύ των στοιχείων.

(Εάν εξετάσετε τα τρέχοντα style sheets που συνδέονται με αυτήν την σελίδα, banner-o.css και banner.css, θα δείτε μερικούς πρόσθετους κανόνες που φαίνονται να αντικρούουν ο ένας τον άλλον. Αυτοί είναι εκεί για να προστατεύσουν από τα λάθη που βρίσκονται σε μερικούς παλαιότερους πλοηγούς ίντερνετ. Ειδικότερα, σε banner-o.css το μπάνερ είναι κρυμμένο και στο banner.css προβάλλεται ως block. Αυτό έχει σαν αποτέλεσμα το κρύψιμο του μπάνερ από το Netscape 4, επειδή προσπερνάει το @import του banner.css.)

Συχνές ερωτήσεις: IE 5 & 6 στα Windows?

Εάν εξετάσετε αυτήν την σελίδα με Microsoft Internet Explorer 5 ή 6 στα Windows ("WinIE5" και "WinIE6"), θα παρατηρήσετε πως δεν λειτουργεί. Τουλάχιστον όχι με τις τρέχουσες εκδόσεις από τον Σεπτεμβρίο 2002. Πολλοί άνθρωποι με ρωτούν για αυτό, και έτσι εδώ είναι ένα κομμάτι της εξήγησης. Εν συντομία: το λάθος είναι στον πλοηγό ίντερνετ, όχι σε αυτήν την σελίδα.

WinIE5 και WinIE6 δεν εφαρμόζουν 'fixed' ακόμα. Αυτό είναι ατυχές γεγονός, αλλά το μεγαλύτερο πρόβλημα είναι πως επίσης δεν αναλύουν την ιδιότητα 'position' σωστά. Ένας πλοηγός ίντερνετ που δεν ξέρει το 'fixed' δεν θα αξιοποιήσει τον κανόνα 'position: fixed' και να πέσει σε οποιαδήποτε προηγούμενη αξία του 'position' που ήταν στο style sheet. Θα μπορούσαμε έπειτα να προσθέσουμε 'position: absolute' αμέσως πριν από 'fixed' και ο πλοηγός ίντερνετ θα το χρησιμοποιούσε αυτό. Αλλά σε WinIE 5 και 6, αυτό δεν συμβαίνει. Προφανώς η λέξη κλειδί 'fixed' ερμηνεύεται κάπως όπως 'static'.

Δεν μπορείτε να κάνετε τα WinIE5 και 6 να υποστηρίζουν 'fixed', αλλά μπορούμε να το προσπεράσουμε αυτό το πρόβλημα ανάλυσης. Ο Johannes Koch με ειδοποίησε για αυτό το κόλπο (από τη συλλογή των εργασιών του). Πρώτα αντικαταστήστε 'position: fixed' στους κανόνες μορφοποίησης επάνω με το 'position: absolute' και παρεμβάλτε έπειτα τον ακόλουθο κανόνα λίγο χαμηλότερα στο style sheet:

body>div.banner {position: fixed}

(Εάν το DIV.banner είναι μέσα σε ένα άλλο στοιχείο από το BODY, αντικαταστήστε το BODY με εκείνο το στοιχείο.) Το αποτέλεσμα αυτής της αλλαγής είναι ότι οι πλοηγοί ίντερνετ που ξέρουν για το '>' επιλογέα child του CSS θα χρησιμοποιήσουν αυτόν τον κανόνα, αλλά οι πλοηγοί που δεν ξέρουν, ειδικότερα WinIE5 και WinIE6, θα τον αγνοήσουν. Ο κανόνας 'position: absolute' θα χρησιμοποιηθεί αντ' αυτού και το μενού θα είναι στη σωστή θέση, εκτός από το ότι δεν θα μείνει σταθερό όταν κυλάτε.

Είναι σημαντικό να μην υπάρχουν κενά γύρω από '>'.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Δημιουργία 17 Jan 2001;
Τελευταία ανανέωση $Date: 2007/10/27 00:47:16 $ GMT