Bloquer une largeur variable au premier contenant

Bonjour,

Voila j'ai un soucis de CSS avec un div contenant une image et sa legende.

J'aimerai que la légende de mon image n'agrandisse pas la taille du div qui les contient (.image) mais qu'elle se coupe en plusieurs lignes les unes en dessous des autres à la place.

Voici mon code :

<div class="texte_et_image_droite">
   <div class="image">
      {{image taille variable}}
      <br />
      <span class="imagezoomlabel">{{légende taille variable}}</span>	
   </div>
   <div class="texte">
      <span class="txt_n1">{{texte plusieurs lignes}}</span>
   </div>
</div>

Et le CSS :

.texte_et_image_droite{
	padding:0px 15px 15px 27px;
}

.texte_et_image_droite .image{
	float:right;
	margin:0 0 5px 5px;
	text-align:center;
}

Actuellement si j'ai une légende trop grande, elle agrandit le div .image au maximum jusqu'à même prendre toute la place du texte et le faire passer en dessous.
J'ai essayé du word-wrap et du display:table-cell sans succes, quelqu'un a une solution ?

*hope*
Modifié par Pougnouf (12 Mar 2007 - 19:09)

Salut,

Il me semble que cela devrait t'aider
http://forum.alsacreations.com/topic-1-23510-1-Positionnement-images-avec-legende-sur-ie6-resolu.html

Salut,

Malheureusement le problème est différent. Dans mon cas je ne peux pas donner de width à mon div .image car il peut aussi bien contenir une image faisant toute la largeur que pas d'image du tout. De plus mon problème ne vient pas du positionnement des éléments, mais plutot de la taille qu'ils occupent, et ce alors qu'il sont tous variables !

Il pourrait y avoir plusieurs façons de faire par exemple :
- empecher un texte d'agrandir son parent et le forcer à se mettre sur plusieurs lignes
- trouver un moyen pour que le div parent .image prenne le width de son premier enfant (l'image donc)

Des idées ? Des pistes ? Des infos ? Je prends tout

Merci ^^

Pour mieux me faire comprendre voici un exemple, je pense que c'est plus parlant que du texte ^^

Une petite idée ?

tu devrais donner un width à ta légende qui corresponde à la taille maximum que tu souhaites lui donner quelque soit l'image.

Ca ne répond peut être pas exactement à ta demande, mais le pire qu'il puisse arriver dans ce cas, c'est que ta légende retourne à la ligne alors qu'elle aurait pu rester sur la même ligne.

Sinon, tu peux utiliser du javascript, c'est le seul moyen de redimensioner des éléments par rapport à d'autres, mais je pense que c'est un peu se casse la têtre pour pa grand chose...

Tout d'abord, merci pour ton aide

Malheureusement je ne peux pas donner de width maximal vu que l'image peut prendre la taille entière et pousser le texte en dessous en cas de besoin.

Le javascript ca serai pas spécialement compliqué, le problème c'est toujours le même, pour ceux qui l'ont pas, ca ressemble à rien.

Une autre proposition ?

je te parle de donner une largeur maximale uniquement à ta légende.
Dans ce cas, l'image pousse comme elle veut texte, mais ta légende reste bloquée à une largeur que tu définis et qui marche à peu près pour toute les images.
Dans le cas des grandes images, le seul truc c'est que ta légende va retourner à la ligne alors qu'elle aurait pu rester sur une même ligne.

Oui oui j'ai bien compris ^^

Mais j'aimerai éviter d'en arriver la, surtout quand je vois certaines légendes qui font déjà 3 lignes, si je les bloque en largeur ca va devenir illisible

Oui je reprends un site existant et j'enlève les tableaux, voila pourquoi j'ai ce genre de contraintes

Il n'y aurait donc aucun moyen d'empecher un div d'agrandir son parent sans fixer de width ?

Quelle detestable solution que d'avoir recours à un tableau
Malheureusement j'ai rien trouvé d'autre et ca marche a peu pret...

j'ai du mal à voir comment ca marche avec un tableau.
comment fais tu pour que on texte de gauche se retrouve sous l'image quand celle ci prend toute la place ?

Ou alors, n'as tu mis que ton image et ta légende dans un tableau en float right ?

Un petit tableau dans un site n'est pas très grave, surtout si c'est pour lier ton image à ta légende.

en PHP tu peux obtenir la largeur d'une image. Ensuite si tu limite la largeur de ta légende à la largeur de l'image ca n'a rien d'excessif, et c'est très propre. Après c'est certain qu'en mettant des légendes à rallonge ca va faire beaucoup de lignes, mais faut savoir ce que tu veux : ca dépasse en largeur ou en hauteur, ou alors c'est écrit tellement petit que ca n'est pas lisible ^^

Autre solution : utiliser un texte qui n'apparait que quand la souris est sur l'image, avec du javascript

Oui effectivement, avec le tableau le texte ne se replace pas sous l'image mais ou moins j'ai limité la taille de la légende.

J'ai pas pensé au coup du petit tableau en float, je vais essayer ca tout de suite voir si ca marche, merci pour l'idée.

Pour le php, sur ce projet je prefère me limiter au css surtout que ca n'est pas vraiment adapté à mes possibilitées.

Et vu que j'essaie de rendre tout ca un minimum accessible, je vais éviter de rajouter du javascript, y'en a déjà trop xD

Merci à vous deux

Si ton tableau ne marche pas, essaie de donner une dimension uniquement à la case de la légende. Je pense que que cette dimention sera interprétée comme une sorte de minimum.
En effet, dans un tableau les cellules d'une même colonne ont toujours la même largeur. Donc si tu définis une largeur à la cellule du bas alors que la cellule du haut est agrandie par l'image, la cellule du bas suivra : c'est ce que tu veux. Par contre, ton texte n'agrandira pas la celule.
C'est possible que ca marche même sans ca, car les tableaux gèrent assez bien l'agrandissement naturel des cellules (le seul problème, c'est qu'on contrôle assez mal leur comportement).

Sinon, tu peux aussi faire une légende visible par défaut, mais faire un script javascript qui la modifie et ne l'affiche que lorsque tu survoles l'image.

Salut,

Je pense que tu peux avoir ton image ET ta légende dans un même conteneur. Tu ne donne pas de marges à ta légende mais au conteneur lui même, ainsi si l'image agrandit le conteneur, la légende s'y adaptera sur tout la largeur, et si ton texte est en text-align: justify, tu auras une justification de ta légende sur ton image

oui mais son problème c'est que la légende agrandit le conteneur elle aussi. Car étant donné que ce n'est pas toujours la même image, ce n'est pas possible de donner une largeur fixe au conteneur et dans ce cas, le conteneur s'adapte au contenu et donc à la taille de la légende.

Le conteneur s'adapte, dans la limites des marges établies par rapport aux blocs avoisinants, ou par défaut au bord du navigateur

Le text-align:justify semblait être une bonne idée, mais ca ne marche pas.
En relisant tes messages Mikachu j'ai l'impression qu'on s'est mal compris : mon problème c'est de restreindre la légende à la largeur de l'image, je ne cherche pas à l'agrandir au contraire je cherche à l'empecher de grandir et la forcer sur plusieurs lignes.

En revanche le petit tableau flotant marche parfaitement, je lui ai mis un width="1px" (sans ca marche pas) et voila mon tableau s'agrandi en fonction de mon image et la légende suit

Merci Yahrou pour l'idée et Mikachu pour ta proposition ^^

Je reste tout de même à la recherche d'une solution sans tableau...