[Résolu] Léger problème CSS

[weirdboy]

Hello!

 

Je suis un poil coincé sur un détail en css et j'avoue que je ne sais pas trop comment le résoudre.

 

Le bloc "déjà vu" est organisé comme ça chez moi:

 

 

J'ai effacé dans blockviewed.tpl ceci:

 

<h5><a href="{$link->getProductLink($viewedProduct->id, $viewedProduct->link_rewrite, $viewedProduct->category_rewrite)}" title="{l s='More about' mod='blockviewed'} {$viewedProduct->name|escape:html:'UTF-8'}">{$viewedProduct->name|truncate:14:'...'|escape:html:'UTF-8'}</a></h5>
 <p>{$viewedProduct->description_short|strip_tags:'UTF-8'|truncate:44}<a href="{$link->getProductLink($viewedProduct->id, $viewedProduct->link_rewrite, $viewedProduct->category_rewrite)}" title="{l s='More about' mod='blockviewed'} {$viewedProduct->name|escape:html:'UTF-8'}"><img src="{$img_dir}bullet.gif" alt=">>" width="10" height="7" /></a></p>

 

Pour au final obtenir ça:

 

 

Mais ce que j'aimerais obtenir c'est ça:

 

 

Sauf que j'ai beau jouer avec les float et compagnie, je n'arrive pas à mettre ça en forme.

 

Un calé en CSS aurait-il deux secondes à perdre pour me filer un coup de main? <3

 

Merci d'avance!

[Stéphane Chonez]

bonjour,

 

un lien serait top!!!

 

 

le pb se situe certainement sur le fait que la largeur du bloc est plus petite que le total des largeurs des 2 images + les éventuels padding et margin....

[weirdboy]

C'est ce que je pensais mais apparemment non, j'ai réduit au minimum dans blockviewed.css

 

/* Block Viewed Products */
div#viewed-products_block_left div.block_content ul.products li {
margin-top: 0;
padding: 1px 0 0
}
div#viewed-products_block_left div.block_content ul.products li img { margin-right: 1px }

 

Mais le résultat est le même. Les images font 80px de largeur pour un block de 191px avec padding de 9px soit 1[spam-filter](9x2)=173px de largeur disponible images (2x80px) + (4x1px) de margin = 1[spam-filter]173=18px de rab en théorie.

 

Par contre chaque image est contenu dans un une div différente :

<li class="clearfix first_item"> </li>
et
<li class="clearfix last_item"> </li>

 

Y'aurait pas un rapport? Je me perds un peu là - c'est dommage que je ne puisse pas donner de lien en effet, mais je pense que le bloc est comme ça sur n'importe quelle version de presta en fait...

[Stéphane Chonez]

je pense que tu dois revoir tes flottants....

float:left; sur le <li> devrait fonctionner ou bien dans tes <li> il y a un élément qui a une valeur de largeur width....

 

#viewed-products_block_left .text_desc {
   float: left;
   margin-left: 10px;
   width: 130px;
}

quelque chose au niveau du desc qui est resté....

[weirdboy]

C'est le bordel, je ne comprends pas quoi modifier, trop de classes et de fichiers partout...

 

D'où provient l'extrait que tu as posté? Je suis déjà tombé sur cette classe text_desc, mais pas moyen de la retrouver...

[weirdboy]

Ha okkkkk, je comprends maintenant d'où vient le problème -> il faut que j'apprenne à lire avant toute chose.

 

Effectivement en ajoutant -> float: left ici

 

div#viewed-products_block_left div.block_content ul.products li {
margin-top: 0;
padding: 1px 0 0;
float: left
}

 

J'obtiens bien le résultat escompté. (dans chrome en tout cas. Mais j'ai abandonné l'espoir d'avoir un affichage correct ailleurs depuis longtemps :') )

 

Merci Stéphane!