[Proposition] Uniformiser les css de listes de produits

Archive

Messagepar alctraz » Sam 06 Mai 2006, 18:49

Je suis en train de travailler sur une css et j'ai remarqué qu'on pouvait renforcer la cohérence des listings de produits.

Les scripts index.php, specials.php, products_new.php et advanced_search_result.php affichent tous une liste de produits sélectionnés selon differents critères. Et voila a quoi ressemble la structure de la partie centrale des pages générées par ces scripts:

Code: Tout sélectionner
### index.php ###
<div id="index">
...top...

  <div class="listing">
    <div class="listingTop"></div>
    <dl>
      <dt></dt>
      <dd></dd> ... <dd></dd>
    </dl>
    <div class="listingBottom"></div>
  </div>

  ...

...bottom...
</div>

### specials.php ###
<div id="special">
...top...

  <dl>
    <dt></dt>
    <dd></dd> ... <dd></dd>
  </dl>

  ...

...bottom...
</div>

### products_new.php ###
<div id="productsNew">
...top...

  <div class="productsNewContener">
    <div class="spacer"></div>
    <dl>
      <dt></dt>
      <dd></dd> ... <dd></dd>
    </dl>
    <div class="spacer"></div>   
  </div>

  ...

...bottom...
</div>

### advanced_search_result.php ###
<div id="advancedSearchResult">
...top...

  <div class="listing">
    <div class="listingTop"></div>
    <dl>
      <dt></dt>
      <dd></dd> ... <dd></dd>
    </dl>
    <div class="listingBottom"></div>
  </div>

  ...

...bottom...
</div>

Les parties ...top... et ...bottom... ne m'interessent pas ici.
Je me pose plusieurs questions sur ce design dans la mesure ou la structure est différente pour chaque script...

Pourquoi encadrer les produits de la liste par une div dans le cas de index.php, products_new.php et advanced_search_result.php et pas specials.php?
Pourquoi cette div est de la mm classe (.listing) dans le cas de index.php et advanced_search_result.php, mais pas products_new.php?
Pourquoi les div d'espacement (.spacer) sont les mm au dessus et en dessous du produit dans le cas de products_new.php et différentes dans les autres cas (.listingTop. et listingBottom).

Je crois qu'il serait peut etre bon d'uniformiser un peu la presentation. Je propose qq chose du genre:

Code: Tout sélectionner
<div id="index">
...top...

  <div class="listing index_listing">
    <div class="listingTop"></div>
    <dl>
      <dt></dt>
      <dd></dd> ... <dd></dd>
    </dl>
    <div class="listingBottom"></div>
  </div>

  ...

...bottom...
</div>


<div id="special">
...top...

   <div class="listing special_listing">
    <div class="listingTop"></div>
    <dl>
      <dt></dt>
      <dd></dd> ... <dd></dd>
    </dl>
    <div class="listingBottom"></div>
  </div>

  ...

...bottom...
</div>


<div id="productsNew">
...top...

   <div class="listing productsNew_listing">
    <div class="listingTop"></div>
    <dl>
      <dt></dt>
      <dd></dd> ... <dd></dd>
    </dl>
    <div class="listingBottom"></div>
  </div>

  ...

...bottom...
</div>


<div id="advancedSearchResult">
...top...

   <div class="listing advancedSearchResult_listing">
    <div class="listingTop"></div>
    <dl>
      <dt></dt>
      <dd></dd> ... <dd></dd>
    </dl>
    <div class="listingBottom"></div>
  </div>

  ...

...bottom...
</div>

Cad une classe listing commune. Et une classe *_listing propre a chaque page, si on souhaite une présentation différente par page.

Ou bien meme tout simplement la meme chose pour chacune des pages vu qu'on peut de toute facon faire la differente grace a la div parente (index, special, productsNew ou advancedSearchResult).

Code: Tout sélectionner
   <div class="listing">
    <div class="listingTop"></div>
    <dl>
      <dt></dt>
      <dd></dd> ... <dd></dd>
    </dl>
    <div class="listingBottom"></div>
  </div>

Vous en pensez quoi?
Dernière édition par alctraz le Sam 06 Mai 2006, 18:52, édité 1 fois.
alctraz
Membre actif
 
Messages: 14
Inscription: Mer 26 Avr 2006, 13:00

Messagepar alctraz » Dim 07 Mai 2006, 14:15

Autre chose: pourquoi inclure par défaut un caractère dans la div d'espacement?

Code: Tout sélectionner
<div class="spacer">&nbsp;</div>

Cela introduit un espace de force. Et on est obligé d'inclure qq chose comme:

Code: Tout sélectionner
.spacer {display: none;}

dans la css pour s'en débarasser.
alctraz
Membre actif
 
Messages: 14
Inscription: Mer 26 Avr 2006, 13:00

Messagepar stepibou » Dim 07 Mai 2006, 18:52

salut,

oui, tes remarques sont judicieuse..

Apres moi, j'ai refais les pages sur un meme modele,
mais comme un con j'ai mis des id differents puis j'ai laissé , ...

Bon, c'est pas bien grave tout ca...

Moi, je pense que le mieux c'est que toutes ces pages fasse apel à un meme product_listing...
Mais qu'apres on puisse evantuellement personnaliser, avec un id pour chaque pages englobant le tout .

En gros un truc generique, qu'on peut rendre particulier...
Et non, un truc particulier, qu'on peut rendre general.

Donc on est bien sur la meme longueur d'onde, mais avec une manière legerement differente...
oscss n'est en effet pas trop optimisé à ce niveau... Mais bon, c'est deja pas mal, on peut pas faire parfait du premier coup!!

pour le &nbsp; ouaif, c'est un detail, regarde general.css
tu verra visibility: hidden;

bye
--> osCSS inside <--
stepibou
Membre très actif
 
Messages: 274
Inscription: Dim 30 Oct 2005, 02:15
Localisation: Lyon

Messagepar alctraz » Dim 07 Mai 2006, 19:21

Ben, je crois qu'on est 100% d'accord en fait.

Si tu lis bien, je préconise la solution ou un produit du listing doit avoir une forme générique. Par exemple, comme je l'avais indiqué:
Code: Tout sélectionner
   <div class="listing">
    <div class="listingTop"></div>
    <dl>
      <dt></dt>
      <dd></dd> ... <dd></dd>
    </dl>
    <div class="listingBottom"></div>
  </div>

C'est pour la généralité. Ensuite, si on veut une présentation un peu différente suivant la page, on peut introduire une classe supplémentaire par page (on peut affecter autant de classe qu'on veut a un élément) ou bien suffit de jouer sur le fait que la div "listing" a comme parent un conteneur qui possède une ID différente par page.

index.php => id="index"
specials.php => id="special"
products_new.php => id="productsNew"
advanced_search_result.php => id="advancedSearchResult"

Faut garder ce conteneur pour différencier les pages évidemment... il n'etait pas question de le supprimer dans mon message.

Ensuite, pour revenir sur le "&nbsp;", le fait de mettre "visibility: hidden;" ne change rien. Ce que fait cette déclaration c'est rendre la box invisible, càd transparente. Mais l'espace est qd mm occupé par la box dans le layout. Donc l'espace est bien présent.
Tandis que "display: none" empèche la génération de la box et n'affecte donc pas le layout.

oscss n'est en effet pas trop optimisé à ce niveau... Mais bon, c'est deja pas mal, on peut pas faire parfait du premier coup!!

Bien sur, je cherche pas a détruire le travail accompli, juste donner un coup de main pour l'amélioration du code :)
alctraz
Membre actif
 
Messages: 14
Inscription: Mer 26 Avr 2006, 13:00


Retourner vers osCSS 1.1

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 3 invités

cron