theportraitofageek.com | περί κατασκευής ιστοσελίδων

It’s all about paddings and margins and stuff

29.01.2009

11 ΣΧΟΛΙΑ

Web Development

Σε ένα πολύ ενδιαφέρον quick tip στο blog της Ζαχαρένιας που πριν διαβάσετε παρακάτω καλό είναι να ρίξετε μια ματιά, μας δίνει μια λύση για το τι συμβαίνει όταν “αγνοείς” το margin ενός element όταν αυτό βρίσκεται δίπλα σε μια εικόνα όπου π.χ “επιπλέει” αριστερα (όπως θα έλεγε ίσως κάποιο Ελληνικό εγχειρίδιο, εμείς ας πούμε float:left). Π.χ αν ο τίτλος μας είναι μικρός τότε αυτός κάθεται μια χαρά εκεί που τον βάζουμε, αν όμως μεγαλώσει και γίνει 2 – 3 – 4 γραμμές τότε το αποτέλεσμα δεν είναι αυτό που θέλουμε. Για όσο βρίσκεται δίπλα στην εικόνα όλα καλά, όταν όμως ξεπεράσει το ύψος της εικόνας αντί να διατηρεί το margin απλά το υπόλοιπο σκάει μύτη κάτω απο την εικόνα. Αποτέλεσμα λογικό, που δεν είναι όμως πάντα αυτό που θέλουμε. Π.χ:

Αυτό συμβαίνει όταν δεν έχουμε ορίσει margin-left στο τίτλος μας:

Και αυτό αν ορίσουμε margin-left στο τίτλος μας η σε οποιδήποτε άλλο στοιχείο στη σελίδα μας:

Φυσικά η λύση είναι πολύ απλή όπως θα διαβάσατε δίνοντας ένα margin-left στα στοιχεία που έχουμε δίπλα στην εικόνα μας.

Μια ερώτηση που έσκασε όμως μου έβαλε σε σκέψεις. Τι γίνεται όταν δε γνωρίζουμε το μέγεθος της εικόνας; Ελα μ ντε. Η Ζαχαρένια προτίνει την χρήση ενός πίνακα με 2 στήλες, μια για την εικόνα και μια για το κείμενο που πολυ normal είναι σαν λύση. Αν δεν χρησιμοποιήσουμε άλλη τεχνολογία πιστεύω και εγώ πως είναι η μοναδική λύση αλλά αν χρησιμοποιήσουμε λίιιιιιιγο, τοσο δά jQuery; Νομίζω οτι μπορούμε να αποφύγουμε τους πίνακες και με 2 μονο γραμμούλες jQuery να λύσουμε το πρόβλημα μας. Για να δούμε σε απλά Ελληνικά:

• Πάρε το πλάτος της εικόνας και βάλτο σε μια μεταβλητή
• Πάρε αυτή τη μεταβλητή, προόσθεσε της το επιλεγμένο margin (π.χ 20px) και βάλτο  σαν css ιδιότητα margin-left σε όλα τα στοιχεία που ακολουθούν την εικόνα.

Mε jQuery λόγια:

$(document).ready(function() {
$(".box").each(function (element) {
var imgwidth = $(this).find("img").attr("width");
$(this).find("img ~ *").css("margin-left", imgwidth + 20);
});
});

Δείτε το παράδειγμα ανοίξτε τον κώδικα του και διαβάστε παρακάτω για το τι κάναμε;

Του λέμε λοιπόν ότι για κάθε div.box πάρε το μέγεθος της εικόνας που έχει μέσα του και βάλε το πλάτος της σε μια μεταβλητή με το όνομα imgwidth.  Μετά θέλω για κάθε στοιχείο που βρίσκεται μετά την εικόνα (h1.. h2.. p) να ορίσω την ιδιότητα margin-left ίση με το πλάτος της εικόνας (imgwidth + κάτι ακόμα (π.χ 20px).Tada! Easy hey;

Σε πόσα στοιχεία μετά την εικόνα και σε ποιά στοιχεία θέλουμε να εφαρμόσουμε τον κανόνα αυτό, είναι δικό μας θέμα. Εγώ με τον κανόνα “img ~ *” παίρνω όλα τα στοιχεία που βρίσκονται μετα το Img tag. Εσείς μπορεί να θέλετε κάτι άλλο. Από selectors δόξα το θεό. Ότι θες μπορείς να διαλέξεις.