Πολλές φορές απαιτείται να παρουσιάσουμε μια λίστα με εικόνες προεπισκόπησης (thumbnails) το μέγεθος των οποίων δεν το γνωρίζουμε ή δεν είναι σταθερό. Αυτό μπορεί να συμβεί είτε γιατί οι φωτογραφίες προέρχονται από διαφορετικές πηγές είτε γιατί το CMS που χρησιμοποιείται δεν έχει τη δυνατότητα να προσαρμόσει το μέγεθος στις απαιτήσεις μας κατά την καταχώρηση των προϊόντων. Ακολουθεί μια εύκολη μέθοδος για …ευπαρουσίαστες λίστες προϊόντων — χωρίς tables φυσικά!
Πριν ξεκινήσω την ανάλυση, δείτε ένα demo. Πρόκειται για μία οριζόντια λίστα <ul> όπως εκείνες που χρησιμοποιούνται για τα λεγόμενα carousel — μια ωραία μέθοδος για να παρουσιάσω φωτογραφίες στον χρήστη κεντρίζοντας το ενδιαφέρον του να εξερευνήσει περαιτέρω. Οι φωτογραφίες είχαν διαφορετικό μέγεθος η καθεμιά, έχω κρατήσει όμως τη μέγιστη διάσταση σταθερή στα 75 pixels κατά το resize. Αν δεν υπάρχει η δυνατότητα να κάνετε το ίδιο, θα πρέπει να περιορίσετε τη μέγιστη διάσταση με CSS. Ας δούμε πως:
ul { overflow:hidden; }
li {
border:1px solid #e6e5e5;
float:left;
height:75px;
line-height:75px;
list-style:none;
margin-right:13px;
overflow:hidden;
padding:0;
text-align:center;
width:75px;
}
li img { max-height:75px; max-width:75px; vertical-align:middle; }
Θα πρέπει βέβαια να δούμε και τον κώδικα HTML για να αποκτήσει νόημα το παραπάνω:
<ul> <li><img alt="" src="sample_01.jpg" /> </li> <li><img alt="" src="sample_02.jpg" /> </li> <li><img alt="" src="sample_03.jpg" /> </li> <li><img alt="" src="sample_04.jpg" /> </li> <li><img alt="" src="sample_05.jpg" /> </li> </ul>
Ξεκινάω το CSS μου δίνοντας overflow:hidden στο <ul> για να «καθαρίσω» τα floats που ακολουθούν. Έπειτα δίνω ένα border σε κάθε <li> για να έχουν όλες οι εικόνες τις ίδιες (οπτικά) διαστάσεις, τα βάζω σε αριστερή στοίχιση (float:left), δίνω συγκεκριμένο ύψος και πλάτος ώστε να περιορίζω τις φωτογραφίες μέσα στο τετράγωνο που επέλεξα (height:75px; overflow:hidden; width:75px), ορίζω το περιεχόμενο να στοιχίζεται στο κέντρο (text-align:center) και τέλος, για να πετύχω την κάθετη στοίχιση στο μέσο χρησιμοποιώ το line-height:75px, που πρέπει να είναι ίσο με το ύψος του <li>!
Μετά θα ορίσω maximum διαστάσεις στο <img> (max-height:75px; max-width:75px) για …παν ενδεχόμενο, και θα ορίσω vertical-align:middle. Αυτό το τελευταίο δεν κάνει τίποτα από μόνο του! Λειτουργεί σε συνδυασμό με τα υπόλοιπα inline elements γύρω από το <img>, συνήθως το κείμενο. (Δείτε 1, 2, 3). Όμως εγώ δεν έχω κείμενο στη λίστα, και δεν θέλω να βάλω! Για δείτε όμως πιο προσεκτικά τον κώδικα… υπάρχει ένα μετά από κάθε <img>, το οποίο έχω κρύψει με το overflow:hidden στο <li> και, παρ'όλο που δεν φαίνεται, φροντίζει (σε συνδυασμό με το line-height:75px φυσικά) να φέρει την φωτογραφία στο κέντρο του τετραγώνο μου! Δεν ήταν τόσο δύσκολο, έτσι;
Η τεχνική αυτή παρεπιπτόντως δουλεύει σε όλους τους browsers εκτός από IE 6 αλλά, αφενός το αποτέλεσμα δεν είναι άσχημο αφετέρου, θα πρέπει κάποια στιγμή να πάψουμε να διαθέτουμε σημαντικό χρόνο για να βρίσκουμε λύσεις στα προβλήματα ενός πεθαμένου browser!
(Βαθμολογία: +1, ψήφοι: 1)
Loading ...