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

  • Άγνωστο's avatar
    maccunion · Μέλος ·

    Καλό απόγευμα σε όλους

    Θα ήθελα τη βοήθειά σας για να τοποθετήσω δύο εικόνες τη μία δίπλα στην άλλη, διατηρώντας όμως το look and feel που έχω όταν βάζω μία εικόνα μόνη της, με λεζάντα και περίγραμμα.

    Ο μόνος τρόπος που έχω βρει είναι να βάλω έναν πίνακα, αλλά έτσι δεν έχω το περίγραμμα.
    Δεν μπορώ ακόμα να σας παραπέμψω σε σελίδα/ανάρτηση καθώς δουλεύω σε προσχέδιο.
    Μπορεί να βοηθήσει κανείς;

    Το Ιστολόγιο που χρειάζομαι βοήθεια είναι: (ορατό μόνο σε συνδεδεμένους Χρήστες)

  • Άγνωστο's avatar
    panaghiotisadam · Μέλος ·

    Αν οι εικόνες έχουν το κατάλληλο πλάτος, δηλαδή αν οι δυό μαζί καλύπτουν ακριβώς το διαθέσιμο πλάτος των άρθρων, τότε απλώς ορίζεις το alignment και των δύο να είναι Left.
    Αν δεν το καλύπτουν και δεν θέλεις να εμφανιστεί δίπλα τους το κείμενο που ακολουθεί, ή αν δεν ακολουθεί τίποτα, θα πρέπει μετά να γυρίσεις τον επεξεργαστή σε HTML και να προσθέσεις αυτό μετά από τον κώδικα της δεύτερης εικόνας (ακυρώνει το wrap-around):
    <br style="clear:both;" />

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

  • Άγνωστο's avatar
    maccunion · Μέλος ·

    Ευχαριστώ πάρα πολύ

    Θα επανέλθω μετά την δημοσίευση του άρθρου

  • Άγνωστο's avatar
    maccunion · Μέλος ·

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

    Εναλλακτικά, χρησιμοποίησα τον κώδικα
    <p style="clear: both;"></p>
    αλλά με αυτόν, είχα μεγάλα κατακόρυφα κενά (λόγω της εισαγωγής της παραγράφου)

    Τελικά, προτίμησα να βάλω τις εικόνες μέσα σε πίνακα, όπως φαίνεται στο παρακάτω


    <table><tbody>
    <tr><td style="border-style:none;" valign="top">

    Εδώ η εικόνα

    </td><td style="border-style:none;" valign="top">

    Εδώ η εικόνα

    </td></tr></tbody></table>

    Το αποτέλεσμα μπορείτε να το δείτε εδώ: http://maccunion.wordpress.com/2012/02/03/το-γυναικόκαστρο-του-κιλκίς/

    Αυτό που δεν μπόρεσα να «φτιάξω» ήταν αυτό: http://maccunion.wordpress.com/2012/02/03/το-γυναικόκαστρο-του-κιλκίς/#nomisma

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

  • Άγνωστο's avatar
    panaghiotisadam · Μέλος ·

    Για το τελευταίο χρειάζεσαι αυτό: 

    <table class="wp-caption" style="width:496px;">
<tbody>
<tr>
<td colspan="2" style="border:none;color:#777;font-style:italic;font-family:Georgia,Times New Roman,Times,serif;margin:6px 0;">
Νόμισμα Ανδρόνικου Γ’ (1328-1341) Κων/πολη
</td>
</tr>
<tr>
<td style="border:none;">
ΚΩΔΙΚΑΣ ΕΙΚΟΝΑΣ 1 - ALIGNNONE
</td>
<td style="border:none;">
ΚΩΔΙΚΑΣ ΕΙΚΟΝΑΣ 2 - ALIGNNONE
</td>
</tr>
</tbody>
</table>

    Για τα υπόλοιπα:

    Όταν αναφέρεσαι σε δημοσιευμένο άρθρο, δεν χρειάζεται να παραθέτεις τον κώδικά του: μπορώ να τον δω μόνος μου.

    Όσο οικονομικότερος ο κώδικας που χρησιμοποιείς, τόσο καλύτερα ως προς τις μηχανές αναζήτησης. Table coding για ένα ζεύγος εικόνων, και μάλιστα χωριστά tables για διαδοχικά ζεύγη, δουλεύει μεν αλλά είναι υπερβολή.

    Το br clear:both δεν θα έπρεπε να διαγράφεται. α) Ποιόν browser και έκδοσή του χρησιμοποιείς; β) Μετά τις τελευταίες αναβαθμίσεις που έκανε η WP, κάποιοι χρήστες έχουν παραπονεθεί για προβλήματα με τα προσχέδια – μέχρι και διαγραφή όλου του περιεχομένου έχει αναφερθεί. Όσο ετοιμάζεις κάτι, ασφαλέστερη μέθοδος είναι απόρρητο άρθρο αντί προσχέδιο.

    Το p clear:both που έγραψες, και οποιοδήποτε ζεύγος tag άνευ περιεχομένου, ο επεξεργαστής τα θεωρεί άνευ νοήματος και τα διαγράφει αν τον γυρίσεις στο Visual. Για να το χρησιμοποιήσεις θα πρέπει να περικλείσεις με αυτό μια πραγματική παράγραφο (οπότε δεν θα έχεις και το επιπλέον κενό).

    Επιπλέον:

    Για τα tables, τα width=»τάδε», valign=»τάδε», cellpadding=»τάδε» κτλ. (εξαίρεση τα colspan και rowspan) είναι επισφαλή. Κάποια λειτουργούν σε ορισμένα θέματα, άλλα όχι. Καλύτερα να μπαίνουν όλες οι σχετικές εντολές στο style attribute, π.χ.: 

    <table style="border:none;width:90%;">
<tr><td style="border:none;vertical-align:top;padding:9px;">

    Πολλαπλές επεμβάσεις στο ίδιο κείμενο μπαίνουν όλες στο style attribute ενός tag. Όχι αυτό:
    <td style="border-style:none;border-width:0;" colspan="2" align="center"><span style="color:#999999;">ΚΕΙΜΕΝΟ ΕΔΩ></span></td>
    Αλλά αυτό:
    <td colspan="2" style="border:none;text-align:center;color:#999;">ΚΕΙΜΕΝΟ ΕΔΩ></td>

  • Άγνωστο's avatar
    maccunion · Μέλος ·

    Σ’ ευχαριστώ για τις υποδείξεις
    Θα κοιτάξω να τις εφαρμόσω

    BTW, χρησιμοποιώ firefox 10

  • Άγνωστο's avatar
    panaghiotisadam · Μέλος ·

    Παρακαλώ!

    Παρεμπιπτόντως, σχετικά με παλαιότερη επικοινωνία μας, δες εδώ τον MM να δηλώνει ευθέως αυτό που είχες επισημάνει:
    http://wordpress.tv/2011/10/16/drupal-wp/
    Στο 25:10: «On wordpress.com we’ve got 25 million beta testers».

  • Άγνωστο's avatar
    maccunion · Μέλος ·

    Ακριβώς έτσι…

    Όμως στην τελική βολευόμαστε όλοι. Το ζήτημα είναι να ξέρουμε ποια είναι η θέση του καθενός, για να μην αναμένουμε πράγματα που δεν ισχύουν :)

  • Το θέμα ‘Τοποθέτηση εικόνων’ είναι κλειστό για νέες απαντήσεις.