28172 sujets

CSS et mise en forme, CSS3

Hello à tous,

Je rencontre un petit problème avec les propriétés float et clear d'un élément CSS intégré à Wordpress.

La situation : j'essaie d'utiliser un script fourni à wordpress qui permet d'afficher une galerie automatique des images intégrées au back-office d'un article.

Le script fonctionne a merveille techniquement, mais visuellement, ça donne ça :
http://tchock.celeonet.fr/domaines/shaddok-com/website/galerie
C'est à dire que la première ligne s'affiche correctement, mais la seconde ne s'affiche qu'après la fin de ma <div> de sidebar.

J'essaie de maitriser l'élément gallery dans mon css de la façon suivante :
div.gallery{clear:both;float:left;width:100%;}

Mais rien n'y fait, je n'arrive pas à supprimer ce grand vide entre la 1ère et la 2ème ligne.

En faisant un Firebug, il semble que c'est bien l'élément clear:both qui vient poser problème...

Avez-vous une idée ?

Merci beaucoup ! Smiley lol
bonjour Maxiou,

tu peux toujours corriger les erreurs dans ton code source (un peu plus d'une vingtaine). un identifiant est toujours unique, le truc-là apparait plus d'une fois :


<div id="fb-root"></div>


Euh une <div> vide? Smiley eek Pourquoi?

Je n'ai pas trouvé de pseudo-classe gallery, mais je suis peut-être pas bien reveillé. Enfin y a du gallery-icon, gallery-item, etc mais apparemment pas de gallery tout court. Smiley eek
Hello,

Merci beaucoup pour ta réponse.
En fait, tu trouves l'élément "gallery-item" à quel endroit ? Dans le HTML généré ? Par Firebug ou un outil dans ce genre ?

Le truc étonnant, c'est que je ne trouve a aucun endroit dans aucun fichier de style la valeur "gallery-item"... Smiley decu

Mon fichier css ne comprend que la valeur suivante :
div.gallery{width:100%;}


Et en effet, il y a encore pas mal à nettoyer, je suis en train de finir les fonctionnalités avant de faire un tour global et de virer les <div> vides Smiley smile

Merci encore !
ben, les gallery-truc, les gallery-icon, etc, c'est dans le html généré. et justement y a pas de gallery tout court dans ton html. alors, si tu appliques une feuille de style à rien, ben tu peux chercher longtemps. Smiley sweatdrop
bonsoir,

tu peut par exemple appliquer un : overflow:hidden; a #post pour contenir les règles css sur ses enfants et qu'ils ignorent ainsi les flottants precedents #post ...

gc
gc-nomade a écrit :
bonsoir,

tu peut par exemple appliquer un : overflow:hidden; a #post pour contenir les règles css sur ses enfants et qu'ils ignorent ainsi les flottants precedents #post ...

gc

!!! Merci !
C'est nickel, c'est une propriété que je ne connaissais pas, j'aurais pu chercher longtemps Smiley smile

Un grand merci pour ton aide !