Block-level elements σε λίστα προϊόντων

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
dizzy_fingers
Δημοσιεύσεις: 118
Εγγραφή: 24 Ιούλ 2004 18:32
Επικοινωνία:

Block-level elements σε λίστα προϊόντων

Δημοσίευση από dizzy_fingers » 02 Απρ 2009 13:54

Καλησπέρα σας παιδιά.

Έχω την εξής "φιλοσοφική" απορία (ο χαρακτηρισμός αναφέρεται γιατί η σελίδα δουλεύει μια χαρά, αλλά προσπαθούμε με έναν συνάδελφο να βρούμε την σωστότερη δυνατή semantically λύση):

Έχουμε μία σελίδα με λίστα προϊόντων, όπως ας πούμε για παράδειγμα αυτή του Πλαισίου.

Αποφασίσαμε να χτίσουμε τη λίστα με

Κώδικας: Επιλογή όλων

<ul>
  <li>Προϊόν 1 &#40;με εικόνα, λεπτομέρειες, τιμές, λινκ για περισσότερα κλπ&#41;</li>
  <li>Προϊόν 2 &#40;με εικόνα, λεπτομέρειες, τιμές, λινκ για περισσότερα κλπ&#41;</li>
  <li>Προϊόν 3 &#40;με εικόνα, λεπτομέρειες, τιμές, λινκ για περισσότερα κλπ&#41;</li>
  <li>Προϊόν 4 &#40;με εικόνα, λεπτομέρειες, τιμές, λινκ για περισσότερα κλπ&#41;</li>
</ul>


Το πρόβλημα ξεκινάει όταν προσπαθούμε να μορφοποιήσουμε το περιεχόμενο του κάθε <li>.
Γνωρίζουμε πως μέσα σε block-level element όπως είναι η λίστα, δε μπορούμε να βάλουμε άλλο block-level element.
Άρα δε μπορούμε να βάλουμε μέσα div ή p για να κάνουμε τη μορφοποίηση που θέλουμε (να βάλουμε πλαισιάκι γύρω από την εικόνα, να κάθεται ο τίτλος του προϊόντος με όμορφο borderάκι πάνω δεξιά, το λινκ "περισσότερα" κάτω δεξιά κλπ κλπ).

Η ερωτήσεις μου είναι 2:
1) Είναι σωστή η χρήση της λίστα για την προβολή των προϊόντων? Θα ήταν πιο συνετό ή εξίσου σωστό να έβαζα div (που θα με γλύτωνε κιόλας καθώς θα μπορούσα να κάνω τη μορφοποίηση μέσα όπως θέλω).
2) Ή η λίστα είναι ο μόνος σωστός τρόπος, κι αν ναι πώς θα μπορούσα να επιτύχω την επιθυμητή μορφοποίηση?

Σημ: Η σελίδα έχει Doctype HTML Transitional 4.01




Σας ευχαριστώ εκ των προτέρων.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Block-level elements σε λίστα προϊόντων

Δημοσίευση από Basilakis » 02 Απρ 2009 18:24

Για ποίο λόγο δεν μπορείς να ορίσεις το li και το ul με κάποιο css?

Παράδειγμα απο menu μου

Κώδικας: Επιλογή όλων

<div class="Menu">
   <ul>
   <li><a href="<?php echo get_option&#40;'home'&#41;; ?>/"><span>Home</span></a></li>
   <li><a href="http&#58;//www.jailbait.gr/index.php/category/gallery"><span>Gallery</span></a></li>
   <li><a href="http&#58;//www.jailbait.gr/index.php/category/gallery/videos/"><span>Videos</span></a></li>
   <li><a href="http&#58;//www.jailbait.gr/index.php/about-jailbaitgr/"><span>About</span></a></li>
  </ul> 
</div>
και το CSS

Κώδικας: Επιλογή όλων

/* Menu +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.Menu &#123; width&#58; 470px; padding&#58; 0px 0px 0px 30px; float&#58; left; position&#58; absolute;  top&#58; 100px; &#125;
.Menu em &#123; display&#58; none&#125;
.Menu ul &#123; list-style&#58; none; margin&#58; 0px; padding&#58; 0px;&#125;
.Menu ul li &#123; padding&#58; 0px; margin&#58; 0px; display&#58; inline; font-size&#58; 14px; line-height&#58; 14px; font-weight&#58; bold; font-family&#58; "Trebuchet MS"; &#125;

.Menu ul li a &#123; padding&#58; 0px 0px 0px 9px; float&#58; left;&#125;
.Menu ul li a span &#123; padding&#58; 4px 4px 4px 4px; display&#58; block; float&#58; right;&#125;
.Menu ul li a span &#123; float&#58; none; color&#58; #CCCCCC;&#125;
.Menu ul li a&#58;hover span &#123; color&#58; #513131; background-color&#58;#fbe3ea; padding&#58; 3px 7px;
-moz-border-radius&#58; 3px;&#125;
.Menu ul li a&#58;hover &#123; background-position&#58; 0% -27px; color&#58;#513131; text-decoration&#58; none;&#125;
.Menu ul li a&#58;hover span &#123; background-position&#58; 100% -27px;  color&#58;#513131;&#125;

.Menu ul li ul &#123; display&#58; none;&#125;
άρα μπορείς να κάνεις style την λιστα;

Άβαταρ μέλους
dizzy_fingers
Δημοσιεύσεις: 118
Εγγραφή: 24 Ιούλ 2004 18:32
Επικοινωνία:

Block-level elements σε λίστα προϊόντων

Δημοσίευση από dizzy_fingers » 03 Απρ 2009 15:29

Δεν είπα ότι δε μπορώ να μορφοποιήσω τη λίστα :).

Το πρόβλημά μου ήταν κατά πόσο είναι semantically σωστό να βάλω div μέσα σε li ή αν όχι, αν είναι σωστό να χρησιμοποιώ λίστα για την προβολή προϊόντων.

Τελικά και με τη βοήθεια άλλων παιδιών βρήκα τη λύση.

Το πρόβλημα εξαρχής δημιουργήθηκε από το λάθος μου:
Γνωρίζουμε πως μέσα σε block-level element όπως είναι η λίστα, δε μπορούμε να βάλουμε άλλο block-level element.
το οποίο ασφαλώς δεν ισχύει - μπορώ πολύ εύκολα να βάλω div μέσα σε li και να περάσω από html validator.

Άρα το πρόβλημα λύθηκε. Χρησιμοποιήσαμε λίστες για την προβολή των προϊόντων και div για την εσωτερική μορφοποίηση.

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες