28 Φεβρουαρίου 2010



10 Στοίχιση και τίτλοι κάτω απο τις εικόνες μας

Κατόπιν επιθυμίας κάποιας φίλης, που δεν μπορούσε να καταλάβει μια ανάρτηση απο το Blog "http://www.bloggerbuster.com", κάθισα και μετάφρασα την ανάρτηση στα Ελληνικά, για να βοηθηθεί η φίλη μας, μα και κάθε ένας που θα τον ενδιέφερε το θέμα, και που έχει να κάνει με τον τίτλο, κάτω απο κάθε μας εικόνα σε μια ανάρτησή μας. Μπορούμε να το χρησιμοποιήσουμε, για να δηλώσουμε την πηγή για παράδειγμα της εικόνας μας, τον τίτλο της, και ότι άλλο εμείς θέλουμε. Στην ανάρτησή της η Blogger Amanda Fazani, μας εξηγεί πως υπάρχουν κι άλλες μέθοδοι για να πετύχουμε το ίδιο αποτέλεσμα, μα μετά απο πειραματισμούς και συγκρίσεις, η μέθοδος που μας παρουσιάζει, είναι η πιο αξιόπιστη απο όλλες που δοκίμασε, και πετυχαίνεται με χρήση CSS. Η μέθοδος αυτή μας επιτρέπει να τοποθετήσουμε μια εικόνα (και τον σχετικό τίτλο (caption) της απο κάτω) στα αριστερά, δεξιά ή στο κέντρο μιας ανάρτησης, με μεγάλη ευκολία. Ελάτε λοιπόν να δούμε, πώς μας δείχνει τον τρόπο να βάλουμε κι εμείς στοιχισμένα captions κάτω απο τις διάφορες εικόνες μας στις αναρτήσεις μας στην Blogger, κάνοντας χρήση μόνο απο CSS και HTML tags. Να κάποια παραδείγματα δικά της απο εικόνες με captions απο κάτω.

Εικόνα Αριστερά

Εικόνα στα δεξιά

Εδώ είναι κάποιες εικόνες, στοιχισμένες στα αριστερά, δεξιά και στο κέντρο, με τίτλο απο κάτω απο την κάθε μία. Ο τίτλος (caption) εμφανίζεται κάτω απο την εικόνα, με ένα border απο κάτω, το οποίο και δημιουργεί έναν διαχωρισμό απο το κυρίως κείμενο της ανάρτησης, ώστε να μην μπερδεύεται ο τίτλος της εικόνας με το κείμενό μας. Αυτό επιτυγχάνεται με το να "αγκαλιάσουμε" την εικόνα με τον τίτλο της απο κάτω, μέσα σε <span> tags, και τα οποία έχουν σαν "class" ανάλογα με την στοίχισή τους (αριστερά=left, δεξιά=right ή κέντρο=center).

Center aligned image (Photo by Montrasio International)

Πώς λειτουργεί αυτό το caption

Η εικόνα που μας δίνει εδώ η Αμάντα, είναι ένα παράδειγμα πώς φαίνεται ο τίτλος κάτω απο μια εικόνα:

Στο body της ανάρτησης, ο κώδικας για της εικόνες (images) και για τους τίτλους απο κάτω (captions) θα εμφανίζεται έτσι:
<pre class="code"><span class="<span style=">left-caption</span> <img src="http://url-of-image.com/image.jpg" /> <p>Caption of this image</p>
Το παράδειγμα αυτό, θα δημιουργούσε μια εικόνα και ένα caption που θα ήταν στοιχισμένα στα αριστερά μέσα στο κυρίως κείμενο της ανάρτησης.

Για να στοιχίσουμε ένα image στα δεξιά, πρέπει να αντικαταστήσουμε πολύ απλά το "left-caption" με το "right-caption", ή, αν θέλουμε να κεντράρουμε την εικόνα, να χρησιμοποιήσουμε το "center-caption".

Ο CSS κώδικας, χρησιμοποιείται για να εμφανίσει την εικόνα και το caption απο κάτω.

Εάν λοιπόν θέλει κάποιος να χρησιμοποιήσει captions όπως και η Amanda στις αναρτήσεις της, χρειάζεται να κάνετε χρήση του παρακάτω styling κώδικα:

.left-caption { float: left; margin: 0 1.5em 1em 0; padding: 0.5em; text-align: center; } .right-caption { float: right; margin: 0 0 1em 1.5em; padding: 0.5em; text-align: center; } .center-caption { margin: 0 0 1em 0; padding: 0; text-align: center; } .left-caption img, .right-caption img, .center-caption img { margin: 0 auto; display: block; } .left-caption p, .right-caption p, .center-caption p { background: #eee; margin: 0; line-height: 1.6em; padding: 0.5em; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; font-size: 0.9em; color: #333; }

Κάντε Copy όλον αυτόν τον "Style" κώδικα, και κάντε τον επικόληση, ακριβώς πρίν το κλειστό </b:skin> tag στον HTML κώδικα του template σας. Τώρα, πώς κάνουμε χρήση στην πράξη των captions στις αναρτήσεις του Blog μας. Μετά που επικολήσατε τον style κώδικα που σας έδωσα πιο πάνω στο πρότυπο του blog σας, μπορείτε να αρχίσετε να εμφανίζετε πλέον captions κάτω απο τις εικόνες στις αναρτήσεις σας. Για να το κάνετε, χρειάζεται να περικλείσετε εικόνα και caption, μέσα σε <span> και </span> tags, και ανάλογα να βάλετε την στοίχιση που προτιμάτε. Ορίστε τρείς διαφορετικές στοιχίσεις που μπορείτε να χρησιμοποιήσετε:

Στοίχιση αριστερά (left)

<pre class="code"><span class="left-caption"> <img src="http://image-host.com/yourimage.jpg" /> <p>Ο Τίτλος (Caption) εδώ!</p> </span></pre>

Στοίχιση δεξιά (right):

</p><pre class="code"><span class="right-caption">

<img src="http://image-host.com/yourimage.jpg" /> <p>Ο Τίτλος (Caption) εδώ!</p>

Στοίχιση στο κέντρο (center):

<pre class="code"><span class="center-caption"> <img src="http://image-host.com/yourimage.jpg" /> <p>Ο Τίτλος (Caption) εδώ!</p>

Υπ' όψιν, τα captions είναι επίσης κλεισμένα σε "paragraph tags", όπως αυτά:

<pre class="code"><p>Ο Τίτλος (Caption) εδώ!</p></pre>
Δοκιμάστε το, ελπίζω να βοήθησα κάπως με την μετάφραση. Όσοι γνωρίζετε καλά Αγγλικά ή βασίζεστε στις δικές σας γνώσεις, μπορείτε να διαβάσετε όλη την ανάρτηση απο Eδώ!. Καλή επιτυχία.
"Γειά σου, Εάν βρέθηκες για πρώτη φορά στο Blog μου, και εάν σε ενδιαφέρουν οι αναρτήσεις μου, μπορείς να εγγραφείς στο RSS feed του Blog. Μπορείς επίσης να κάνοντας εγγραφή στο Newsletter του blog μου, να λαβαίνεις απ ευθείας κάθε μου ανάρτηση στο email σου. Είσαι Twitter user; τότε μπορείς επίσης να με κάνεις Follow στο Twitter. Σε ευχαριστώ που με διαβάζεις,"




Print this post



Related Posts :



10 σχόλια:

DaisyCrazy είπε... Best Blogger Tips

Νίκο μου καλημέρα και καλό μήνα!


Eva F. είπε... Best Blogger Tips

Νικόλα μου έχεις την καλημέρα μου και καλό μήνα!.


NANTIA-BAD RELIGION 7 είπε... Best Blogger Tips

Καλημέρα και καλό μήνα κι απο εδώ!
Εξαιρετική ανάρτηση,λύθηκαν κι εμένα κάποιες απορίες μου για το πως θα έβαζα τίτλους στις φωτό.
Ευχαριστώ γι 'άλλη μια φορά.
Νασαι καλά!


Theodosia είπε... Best Blogger Tips

Να πώ πρώτα καλημέρα και καλό μήνα.
Καταπληκτική ανάρτηση,κι είναι ένα πρόβλημα που αντιμετωπίζω κι εγώ με τις εικόνες μου.
Αλλά να σου εξομολογηθώ κάτι?
Φοβάμαι να πειράξω το template.
Μήπως είμαι κακομαθημένη κι έχω μάθει να μου τα διορθώνεις όλα εσύ?
Μην φωνάξεις και μην πεις αστροπελέκι θα σ`ακούσω:)
Φιλάκια.!!!!


faraona είπε... Best Blogger Tips

Καλημέρα και καλό μήνα.Ειναι πολυ πολυ ενδιαφέρον ολο το μπλόγκ σου.Σπανίζουν στην μπλογκόσφαιρα οι άνθρωποι που ξέρουν «απο μέσα» τα πράγματα και μπορούν να προσφέρουν βοήθεια σε μας τους αδαής.
Εχω μια ερωτησούλα.
Στα μπλογκ μου εχω ενεργοποιήσει τον ελεγχο των σχολίων μου πριν δημοσιευθούν.Κάποιος φίλος λοιπόν μπήκε να μου αφήσει ενα πολυ μεγάλο σχόλιο ...πάνω απο 600 λέξεις και του εβγαλε οτι δεν μπορεί.Προσπάθησα να αφήσω κι εγω μετά πάλι στο δικό μου ετσι για πείραμα ,ενα επίσης μεγάλο σχόλιο και δεν το δέχτηκε.Μήπως μπορείς να μου εξηγήσεις τι συμβαίνει και τι πρεπει να κάνω?
Αυτό τελικά εχει σχέση με τον ελεγχο των σχολίων που εχω ενεργοποιήσει η με κάτι άλλο?
Σ ευχαριστω πολυ.


JK O SΚΡΟΥΤΖΑΚΟS είπε... Best Blogger Tips

ΠΕΡΑΣΑ ΝΑ ΕΥΧΗΘΩ ΚΑΛΟ ΜΗΝΑ ΜΕ ΥΓΕΙΑ ΚΑΙ ΧΑΜΟΓΕΛΑ :)) ΠΟΛΥ ΩΡΑΙΑ Η ΑΝΑΡΤΗΣΗ ΣΟΥ ΚΑΙ ΧΡΗΣΙΜΗ.


Eva Neocleous είπε... Best Blogger Tips

Καλή μέρα και Καλό Μήνα!
Πολύ ενδιαφέρουσα και χρήσιμη η ανάρτησή σου Νικόλα.


Ανώνυμος είπε... Best Blogger Tips

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


AATON είπε... Best Blogger Tips

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


Ανώνυμος είπε... Best Blogger Tips

Thanks για τη βοήθεια,το πρόβλημα λύθηκε. Είχα βάλει έναν on line μετρητή απο'πάνω και μου τα στοίχιζε όλα στο κέντρο.


Δημοσίευση σχολίου

Πες πως δεν έχεις χρόνο να σχολιάσεις.. να 'χεις πάρει όμως σοβαρό ύφος, καλά;

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.

Next Next Next