[Résolu] Galerie d'image qui s'affiche sur une seule ligne (IE)

Salut à tous.

Je m'excuse d'avance si ce problème a déja été posté, mais je ne l'ai pas trouvé.

Explication, pour le problème voir plus bas :

Je fais une galerie d'image : chaque image est dans un <div> avec son nom, sur ces div je met float: left; une largeur et un hauteur fixe et tout va bien de le meilleurs des mondes.
La chose se complique quand certaines images ont une description, parfois longue. Si je laisse les choses comme ca, les descriptions se superposent parfois avec les images d'en dessous. Donc j'affiche les images avec descriptions sur une seule ligne, avec les images en flottant de sorte que les desciption soient à coté.
Seulement, avec de courtes descriptions, les images suivant se mettent aussi à coté, ce qui n'est pas désirable.
On aligne donc les images avec description à droite, en mettant clear: right; sur les autres, et tout semble rentrer dans l'ordre. Mais ...

Problème :

IE affiche toute la galerie sur une ligne, alors qu'il devrais revenir à la ligne si la photo suivant dépasse la largeur de la page.
En enlevant le clear: right; ca rentre dans l'odre, mais comme expliqué plus haut j'en ai besoin.
Y aurait-il un autre moyen de contourner le problème ?
La page en question : http://patrick.sapin.free.fr/photos/le_peuple/
le CSS complet : http://patrick.sapin.free.fr/style.css
extrait du CSS concerné :

.photo {
  width: 200px;
  height: 260px;
  margin: 10px;
  float: left;
  clear: right;

}
.photo_desc {
  clear: both;
}
.photo_desc div {
  float: right;
  clear: right;
}

**********

Autre question : les onglets doivent s'afficher sur une ligne, et mettre des textes trop long peut poser problème.
J'utilise donc des sortes d'infosbulles pour afficher un texte plus long lorsqu'un onglet est survolé par la souris, sauf que là encore, ca ne marche pas avec IE.
C'est moins grave ici car ca ne "casse" rien, mais ce serais bien que ca s'affiche quand même.
dans votre FAQ ( http://forum.alsacreations.com/faq/#item11 ), je vois ca :

a.info:hover {
background: none; /* correction d'un bug IE */
}

Ce qui fonctionne effectivement ... et enlève l'image de fond de l'onglet !
La encore, pas d'autre moyen de corriger le bug ?

Merci d'avance.
Modifié par Shimonn (09 Apr 2005 - 20:58)

Salut,

pour l'infobulle (qui ne se trouve pas forcément liée à un lien), le moyen le plus simple qui fonctionne sous tous les navigateurs:

<span class="help" title="ici le texte de l'info bulle">ici le texte qui appelle l'info-bulle</span>

.help { /* par exemple...*/
border-bottom:1px dotted #000;
cursor:help;
}

***

pour ton problème de gallerie: je te conseillerais de reprendre ta page depuis le début avec ton éditeur + firefox (ou mozilla) et IE ouvert pour visualiser le résultat de chaque progression; ce qui te permettra de voir à quel endroit ça accroche...

PS: quel dommage d'avoir fait un copier / coller du menu...

Ok donc pour l'info bulle je vais faire simple, avec l'attribut title.
C'est surtout l'autre problème qui m'embete.

alex_br a écrit :
je te conseillerais de reprendre ta page depuis le début avec ton éditeur + firefox (ou mozilla) et IE ouvert pour visualiser le résultat de chaque progression

C'est ce que j'ai fait, et d'ailleurs je sais ce qui cloche.

Shimonn a écrit :
En enlevant le clear: right; ca rentre dans l'odre, mais comme expliqué plus haut j'en ai besoin.

Modifié par Shimonn (09 Apr 2005 - 14:19)

re,

je ne comprend pas trop ton problème, surtout que la page à l'air de fonctionner sous ie et gecko...

le meilleur moyen pour faire une gallerie dans ton cas:

1. prendre en compte la place nécessaire pour le commentaire dans le dimmensionnement de ta class photo

2. positionner tes images et forcer le retour à la ligne avec un clear:both

en gros:

 .photo
{
width:200px;
float:left;
}

.retour {
clear: both;
}

et dans le html:

 <div class="photo">
<img src="image1.jpg" alt="" width="" height=""><br>
Commentaire
</div>
 <div class="photo">
<img src="image2.jpg" alt="" width="" height=""><br>
Commentaire
</div>
 <div class="photo">
<img src="image3.jpg" alt="" width="" height=""><br>
Commentaire
</div>

<br class="retour">

 <div class="photo">
<img src="image4.jpg" alt="" width="" height=""><br>
Commentaire
</div>
 <div class="photo">
<img src="image5.jpg" alt="" width="" height=""><br>
Commentaire
</div>
 <div class="photo">
<img src="image6.jpg" alt="" width="" height=""><br>
Commentaire
</div>

Désolé, la ligne clear: right; étais commentée, je viens de la remettre.

si je comprends ce que tu dis, il faudrais ajouter un retour apres chaque image avec description ?
j'avais essayé aussi .photo_desc + * (pour dire : tout élément apres un .photo_desc), mais visiblement ce ne fonctionne pas non plus sous IE.

le <br /> permet de mettre ton commentaire sous ta photo. Quand tu veux envoyer les photos à la ligne tu fais un <br class="retour"> entre 2 div.
Modifié par alex_br (11 Apr 2005 - 00:04)

Donc la tu place explicitement un saut de ligne à quelques endroits.

L'avantage du float est que le nombre d'image par ligne s'adapte automatiquement à la largeur de la fenêtre.
Par exemple si j'active une barre latérale, il n'y a plus que deux images par lignes.

ok j'avais pas tout compris...

si tu veux que ta gallerie s'adapte à la largeur de la fenêtre, no problemo, tu supprimes:

dans la css:

.retour {
clear: both;
}

et dans le html:

<br class="retour">

comme ça ta gallerie s'adaptera à la largeur de ta fenêtre que ce soit sous gecko ou ie...
Modifié par alex_br (11 Apr 2005 - 00:04)

Merci mais la tu enlève le clear: right; qui me pose problème (voir posts précédents)

J'ai reglé de problème en supprimmant le clear: right; et en ajoutant le <br /> avec clear: both; apres les images qui ont des descriptions, et j'obtient alors l'effet escompté.

Merci de ton aide.