Στοίχηση με την τεχνική του διάφανου pixel

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

κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο [Ανατολικό Αιγαίο]

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

Μπορούμε να χρησιμοποιήσουμε τα cellpadding ή cellspacing για να αυξήσουμε την απόσταση μεταξύ των κελιών. Με τον τρόπο αυτό όμως αυξάνει το περιθώριο γύρω από ολόκληρο το κελί. Έτσι η εικόνα δεν θα είναι στοιχισμένη (περασιά) στη δεξιά πλευρά της σελίδα αλλά θα μετακινηθεί προς το κέντρο.

Μπορούμε να παρεμβάλουμε ένα επιπλέον κελί μεταξύ των ήδη υπαρχόντων. Επειδή όμως τα άδεια κελία έχουν πολύ μικρό μέγεθος θα πρέπει να το γεμίσουμε με κάτι. Μια λύση είναι να βάλουμε μερικά κενά διαστήματα ( ) ή κάποιο κείμενο φάντασμα (κείμενο που να έχει το ίδιο χρώμα με το φόντο άρα να μη φαίνεται). Και στις δύο περιπτώσεις όμως το αποτέλεσμα θα εξαρτηθεί και από τις ρυθμίσεις που έχει βάλει ο χρήστης στον browser του.

Μια άλλη λύση θα ήταν να ορίσουμε το μέγεθος του άδειου κελιού σε pixels (π.χ. <td width=30>).

Η πιο ευέλικτη όμως τεχνική είναι η χρήση του transparent pixel που μας επιτρέπει να ορίζουμε με μεγάλη ακρίβεια τα διαστήματα μεταξύ τμημάτων της σελίδας. Στο παραπάνω παράδειγμα αυτό που θα μπορούσαμε να κάνουμε είναι:

α) Μηδενίζουμε όλα τα περιθώρια του πίνακα έτσι ώστε το κείμενό του να μην ξεκινάει πιο μέσα από το εκτός πίνακα κείμενο. Έτσι αντί να έχουμε:

κείμενο εκτός πίνακα

συνέχεια του κειμένου μέσα στον πίνακα

ορίζουμε cellspacing=0 cellpadding=0 και έχουμε:

κείμενο εκτός πίνακα

συνέχεια του κειμένου μέσα στον πίνακα

β)Αντί να βάλουμε ένα ενδιάμεσο κελί μέσα στον πίνακα τοποθετούμε ένα γραφικό.

α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω [Ανατολικό Αιγαίο]

Βλέπουμε πως τοποθετήσαμε μεταξύ του κελιού της εικόνας και του κελιού του κειμένου ένα κελί που έχει πλάτος όσο και η μαύρη γραμμή. ’ρα όσο αυξομειώνουμε το πλάτος της γραμμής, δηλαδή του γραφικού, τόσο θα αυξομειώνεται και το πλάτος του κελιού.

Ο τρόπος αυτός βέβαια δεν είναι ιδιαίτερα βολικός γιατί απαιτεί ένα ξεχωριστό γραφικό για κάθε στοίχηση με αποτέλεσμα να γεμίζουμε τη σελίδα άχρηστα γραφικά. Μπορούμε όμως, αντί για όλα τα γραφικά που χρειαζόμαστε, να χρησιμοποιήσουμε μόνο ένα pixel.

Στο παραπάνω παράδειγμα η γραμμή μας έχει ύψος ένα pixel και πλάτος 76. ’ρα θα μπορούσαμε να την αντικαταστήσουμε με ένα pixel που θα το επαναλάβουμε 76 φορές. Η οδηγία γι' αυτό είναι <IMG hspace=x vspace=y SRC="dotclear.gif"> όπου dotclear.gif είναι το όνομα του αρχείου που έχει μέγεθος 1 pixel, hspace είναι το πλάτος (horizontal space) και vspace είναι το ύψος (vertical space) του σχήματος που θα δημιουργηθεί). Το pixel αυτό φροντίζουμε να είναι διάφανο έτσι ώστε να μπορούμε να το χρησιμοποιήσουμε σε οποιαδήποτε σελίδα χωρίς να φαίνεται. Έτσι ο παραπάνω κώδικας θα φαίνεται:

και θα είναι:

Θα παρατηρήσατε ίσως πως παρόλο που ορίσαμε hspace=76 το πλάτος του κελιού είναι μεγαλύτερο απ' ότι στο παράδειγμα με το γραφικό. Αυτό συμβαίνει διότι ο browser προσθέτει επιπλέον κενά pixels γύρω από διάφανο. Υπολογίστε πως όταν εσείς δηλώνετε π.χ. hspace=n τότε τα transparent pixels θα είναι 2n+1

Θα παρατηρήσατε επίσης πως προτιμούμε να χρησιμοποιούμε τις hspace & vspace από τις height & width. Ο λόγος γι'αυτό είναι ότι με τα height & width ο browser θα σχεδιάσει όσα pixels του πούμε (συν κάποιο περιθώριο), ενώ με τα hspace & vspace κάθε pixel έχει το δικό του περιθώριο. Έτσι με τον ίδιο αριθμό transparent pixels (δηλαδή με τον ίδιο αριθμό επαναλήψεων) μπορούμε να καλύψουμε μεγαλύτερη επιφάνεια.

Δύο, σπάνια, bugs αυτής της τεχνικής:

Η διαφάνεια μιας εικόνας δεσμεύει πόρους του συστήματος. Έτσι, αν ο Η/Υ δεν έχει αρκετή διαθέσιμη μνήμη ή η έκδοση του browser είναι παλιά, αντί για μια διάφανη επιφάνεια θα εμφανιστεί μια "δαντελωτή". Αν όμως ο χρήστης κάνει reload το πρόβλημα θα εξαφανιστεί.

Επίσης, σε πολύ σπάνιες περιπτώσεις, η τεχνική του transparent pixel μπορεί να μην λειτουργεί μέσα σε πίνακες. Αυτό γίνεται διότι σε "δύσκολες" περιπτώσεις περίπλοκων πινάκων οι browsers ακολουθούν δικά τους κριτήρια για τη σχεδίαση της σελίδας. Αν συναντήσετε ένα τέτοιο πρόβλημα απλώς χρησιμοποιήστε τις παραμέτρους height & width αντί για τις hspace & vspace.

Επιστροφή στον Οδηγό Κατασκευής Web Σελίδων