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

Όλες οι εντολές CSS που θα σας παρουσιάσω παρακάτω βρίσκονται μέσα στα tags της HTML (inline CSS). Εσείς μπορείτε να τις βάλετε σ’ένα CSS αρχείο το οποίο θα το συνδέσετε αργότερα με τα HTML αρχεία σας.

Μη φοβάστε να πειραματιστείτε με τις τεχνικές αυτές έτσι ώστε να πετύχετε τα βέλτιστα αποτελέσματα στις σελίδες σας. Ξεκινάμε λοιπόν:

Τοποθέτηση εικόνων δεξιά ή αριστερά του κειμένου

Το μυστικό σ’αυτές τις τεχνικές είναι η εντολή Float η οποία παίρνει τιμές Left και Right. Θα μας βοηθήσει έτσι ώστε οι εικόνες να «κολλήσουν» δεξιά ή αριστερά και το κείμενο να «ρέει» δίπλα τους.

Εντολή:

<img src="screen.gif" style="float:left" />

Αποτέλεσμα:

Εδώ τοποθετήσαμε την εικόνα στ’αριστερά. Αν θέλουμε να τη βάλουμε στα δεξιά τότε η εντολή πρέπει να γίνει:Εντολή:

<img src="screen.gif" style="float:right" />

Αποτέλεσμα:

Εύκολο έτσι; Λοιπόν όπως θα είδατε το κείμενο είναι σχεδόν κολλημένο με την εικόνα άρα κάτι πρέπει να κάνουμε κάτι γι’αυτό. Η παρακάτω εντολή θα αφήσει λίγο εξωτερικό περιθώριο (margin) στην εικόνα:

Εντολή:

<img src="screen.gif" style="float:left; margin:10px" />

Αποτέλεσμα:

Κάτι που θέλει προσοχή εδώ είναι ότι η εντολή Float μένει ενεργή μέχρι να την ακυρώσουμε. Αυτό σημαίνει ότι στις επόμενες <img> εντολές θα ισχύσει το Float:Left κάτι που ίσως προκαλέσει ανεπιθύμητα αποτελέσματα. Για να απενεργοποιήσουμε τις εντολές Float υπάρχει η εντολή Clear η οποία παίρνει τιμές Both, Left και Right αναλόγως του ποιο Float θέλουμε να ακυρώσουμε. Μπορείτε να τη βάλετε στο αμέσως επόμενο tag στις σελίδες σας ή να κάνετε κάτι που χρησιμοποιώ πολύ συχνά και νομίζω ότι είναι πολύ αποτελεσματικό:

<br style="clear:both; height:0; line-height:0" />

Κανονικά η εντολή <br /> (εκ του BReak) μας πηγαίνει στην επόμενη σειρά. Εμείς όμως της δίνουμε μηδενικές τιμές ύψους έτσι ώστε να μην επηρεάσει καθόλου τη σελίδα μας άλλα απλά να καθαρίσει όλα τα Float. Για να τη χρησιμοποιήσετε καθολικά στις σελίδες σας δημιουργήστε ένα Class με τις εντολές.

Τοποθέτηση εικόνων στο κέντρο

Για το τέλος άφησα κάτι εύκολο. Εδώ δε θα χρειαστεί η εντολή Float άλλα η Text-align. Θα της δώσουμε την τιμή Center έτσι ώστε να κεντράρει την εικόνα μας.

Εντολή:

<div style="text-align:center">
 <img src="screen.gif" />
</div>

Αποτέλεσμα:

Blogsphere: TechnoratiFeedsterBloglines
Bookmark: Del.icio.usSpurlFurlSimpyBlinkDigg