Λίστα προϊόντων με εικόνα προεπισκόπησης

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
11/09/2010 από
thePrince

Η παρουσίαση προϊόντων (ή άρθρων, νέων κ.λπ.) σε μορφή λίστας είναι πολύ συνηθισμένη και τις περισσότερες φορές, περιλαμβάνει και μια φωτογραφία.

Ωστόσο, συχνά η φωτογραφία «απουσιάζει» και αυτό ίσως να δημιουργεί πρόβλημα. Διαβάστε παρακάτω για να καταλάβετε περί τίνος πρόκειται…

Υπάρχουν 2 τρόποι για να φτιάξουμε μια λίστα με φωτογραφίες, ανάλογα με το αν έχουμε προβλέψει την παρουσίαση ενός thumbnail no-photo ή όχι. Στην πρώτη περίπτωση θα δεσμεύσουμε συγκεκριμένο χώρο (πλάτος) για τη φωτογραφία ώστε το κείμενο να στοιχίζεται όμορφα και χωρίς να διπλώνει από κάτω ενώ, στη δεύτερη περίπτωση θα χρησιμοποιήσουμε float (left συνήθως). Ας δούμε τον σχετικό κώδικα και τις CSS λύσεις με τη σειρά:

<div class="article">
    <div class="figure">
        <img alt="" src="">
    </div>
    <div class="wrapper">
        <div class="hgroup">
            <h2><a href="#"></a></h2>
            <h3></h3>
        </div>
        <p></p>
    </div>
</div>
<div class="article">
    <div class="wrapper">
        <div class="hgroup">
            <h2><a href="#"></a></h2>
            <h3></h3>
        </div>
        <p></p>
    </div>
</div>
<div class="article">
    <div class="figure">
        <img alt="" src="no_photo">
    </div>
    <div class="wrapper">
        <div class="hgroup">
            <h2><a href="#"></a></h2>
            <h3></h3>
        </div>
        <p></p>
    </div>
</div>

Έχω αφήσει «έξω» όλο το περιεχόμενο αλλά μπορείτε να δείτε τη σελίδα επίδειξης. Ο κώδικας HTML είναι ίδιος σε κάθε περίπτωση — αυτό άλλωστε είναι το νόημα του διαχωρισμού του περιεχομένου (HTML) από τη μορφή του (CSS). Έχω αφήσει ένα article χωρίς εικόνα για να δούμε τη συμπεριφορά του κειμένου ενώ το div που περιέχει την φωτό no photo (το Amiga 1200) χρησιμοποιεί την κλασική μέθοδο του αριστερού float με το κείμενο να διπλώνει απλώς από κάτω. Σημειώστε πως όλα τα divs πλην του class="wrapper" έχουν class ίδιο με το ομώνυμο element της HTML5 (διότι πρέπει να κοιτάμε μπροστά) οπότε, αν ήδη γράφετε HTML5 μπορείτε να χρησιμοποιήσετε τον παρακάτω κώδικα:

<article>
    <figure>
        <img alt="" src="">
    </figure>
    <div class="wrapper">
        <hgroup>
            <h2><a href="#"></a></h2>
            <h3></h3>
        </hgroup>
        <p></p>
    </div>
</article>

Τέλος, το class="wrapper" είναι το μοναδικό element που δεν έχει νόημα αλλά είναι απαραίτητο για τη δεύτερη λύση — στην πρώτη περίπτωση το αγνοούμε. Ας δούμε όμως τα CSS και μετά θα τα αναλύσω:

.article {
    overflow:auto;
    padding:10px 0;
}
.list1 .article {
    padding-left:130px;
}
.list1 .article .figure {
    display:block;
    float:left;
    margin-left:-130px;
    width:120px;
}
.list2 .article .figure    {
    display:block;
    float:left;
    margin-right:10px;
}
.list2 .article .wrapper {
    overflow:auto;
}
/* οι ακόλουθοι κανόνες είναι για να δείξω την περίπτωση του απλού float */
.list1 .no_photo {
    padding-left:0;
}
.list1 .no_photo .figure {
    display:block;
    float:left;
    margin:0 10px 10px 0;
}

Όπως (υποθέτω) είδατε στο source της σελίδας, οι δύο λίστες κληρονομούν κάποιους κανόνες από το .list που είναι άσχετοι με το θέμα μας και έχουν αντίστοιχα τις κλάσεις list1 και list2. Κάθε div="article" κληρονομεί επίσης overflow:auto, που χρησιμοποιείται για να «καθαρίζει» τα floats, και λίγο padding για να ξεχωρίζουν μεταξύ τους. Στην πρώτη λίστα, το κάθε article έχει αριστερό padding, όσο είναι το πλάτος της φωτογραφίας + το δεξί περιθώριο — 120+10 pixels στη συγκεκριμένη περίπτωση. Έπειτα ορίζω το figure σαν block, το τοποθετώ στα αριστερά με float:left, πάνω στο padding του article με αρνητικό margin! Με αυτό τον τρόπο μπορώ μέσα στο .wrapper να έχω οτιδήποτε και θα παραμείνουν στοιχημένα όπως τα θέλω, όπως φαίνεται και στο επόμενο article απ’ όπου απουσιάζει το figure. Το width είναι απαραίτητο εδώ και ίσως να θέλει και ένα overflow:hidden, για την περίπτωση που η φωτογραφία έχει διαφορετικό πλάτος, περασμένο στην HTML (ποτέ δεν ξέρεις!).

Η δεύτερη λίστα είναι καταλληλότερη για περιεχόμενο που μπορεί να έχει ή να μην έχει φωτογραφία (όπως η περίληψη ενός άρθρου) και θέλουμε να εκμεταλλευτούμε όλο τον χώρο. Οι διαστάσεις της φωτογραφίας δεν μας ενδιαφέρουν ή δεν είναι γνωστές αλλά όμως θέλουμε, αν υπάρχει φωτογραφία, το κείμενο να μην γυρνάει από κάτω. Αυτό τελικά είναι πολύ ευκολότερο απ’ όσο ακούγεται: ένα float:left θα βάλει το figure στη θέση του (με λίγο margin για να αναπνέει) ενώ, το overflow:auto είναι το μόνο που χρειάζεται για να μην διπλώνει το κείμενο — αντίθετα με το τελευταίο article της πρώτης λίστας. Τόσο απλά!

Κλείνω με μερικά links για περαιτέρω μελέτη:











Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.