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

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

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

Προσθήκη επικεφαλίδων

Διακλιμάκωση της εικόνας

Επικεφαλίδα επάνω

XHTML

Σχήματα και επικεφαλίδες

Eiffel tower

Scale model of the Eiffel tower in Parc Mini-France

Το HTML δεν έχει κανένα στοιχείο που να επιτρέπει την εισαγωγή ενός σχήματος με τίτλο. Προτάθηκε μιά φορά (βλ. HTML3), αλλά ποτέ δεν έγινε στο HTML4. Εδώ είναι ένας τρόπος να μιμηθεί ένα τέτοιο στοιχείο σχήματος:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>Scale model of the
    Eiffel tower in Parc Mini-France
</div>

Κατόπιν στο style sheet χρησιμοποιείτε το class "figure" για να μορφοποιήσετε το σχήμα με τον τρόπο που θέλετε. Παραδείγματος χάριν, για να επιπλεύσει το σχήμα δεξιά, σε ένα διάστημα ίσο με 25% του πλάτους των περιβαλλουσών παραγράφων, αυτοί οι κανόνες θα κάνουν το κόλπο:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

Στην πραγματικότητα, μόνο οι πρώτες δύο δηλώσεις (float και width) είναι ουσιαστικές, τα υπόλοιπα είναι μόνο για τη διακόσμηση.

Διακλιμάκωση της εικόνας

Υπάρχει ένα πρόβλημα εδώ, και αυτό είναι ότι η εικόνα μπορεί να είναι πάρα πολύ ευρεία. Στήν συγκεκριμένη περίπτωση, η εικόνα είναι πάντα 136 px ευρέως και το DIV είναι 25% του περιβάλλοντος κειμένου. Έτσι εάν καθιστάτε το παράθυρο στενότερο, μπορεί να συμβεί πως η εικόνα θα υπερχειλήσει το div (δοκιμάστε αυτό!).

Εάν ξέρετε το πλάτος όλων των εικόνων στο έγγραφο, μπορείτε να προσθέσετε ένα ελάχιστο πλάτος στο div, όπως εδώ:

DIV.figure {
  min-width: 150px;
}

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

<div class="figure">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez and its
    fort in the evening sun
</div>

St. Tropez

Saint Tropez and its fort in the evening sun

Και αυτό είναι στο style sheet:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

Το μόνο συμπλήρωμα είναι ο τελευταίος κανόνας: αυτό κάνει την εικόνα τόσο ευρεία όσο το εσωτερικό του div (η περιοχή μέσα στα border και padding).

Βάζοντας την επικεφαλίδα επάνω

Cap Ferrat

The Mediterranean Sea near Cap Ferrat

Μπορείτε ακόμη και να βάλετε τον τίτλο στην κορυφή, με την αφήγηση του πλοηγού ίντερνετ πως το σχήμα πρέπει να μορφοποιηθεί ως πίνακας. Μόνο προσθέστε αυτούς τους κανόνες στο style sheet από τα προηγούμενα τμήματα:

div.figure p {
  display: table-cell;
  width: 100%;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

Το συν "+" δημιουργεί τον κανόνα για να ταιριάξει στο P που ακολουθεί ένα άλλο P. Που σημαίνει σε αυτήν την περίπτωση ότι ταιριάζει στο δεύτερο P του σχήματος, εκείνου που περιέχει την επικεφαλίδα.

(Αυτή η τεχνική μπορεί να παρουσιάσει μερικά λάθη στους παλαιότερους πλοηγούς ίντερνετ, ειδικά όταν συνδυάζεται με την κλιμάκωση εικόνας, όπως έκανα εδώ.)

Σχήματα στο XHTML

H τρέχουσα (Ιανουάριος 2003) πρόταση για XHTML2 έχει ένα στοιχείο CAPTION, το οποίο μπορεί να χρησιμοποιηθεί με το OBJECT. Εάν εκείνη η πρόταση γίνεται αποδεκτή, δεν θα είναι πλέον απαραίτητο η χρήση DIV και η CLASS, αλλά, τουλάχιστον σε XHTML2, θα μπορείτε να γράφετε:

<object data="eiffel.jpg">
  <caption>Scale model of the
    Eiffel tower in Parc
    Mini-France</caption>
</object>

CSS Valid CSS!Valid HTML 4.0!

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