[Résolu] Adapter du texte par rapport à une image

Bonjour à vous,

J'essaye de placer des données d'un côté de ma page (gauche) et de placer une image de l'autre côté de ma page (droite).

Je me suis inspiré du tutoriel Adapter une légende à la largeur de l'image pour tenter d'obtenir le résultat souhaité mais sans succès...

Voici une image de ce que je souhaiterais obtenir :

Merci d'avance pour vos bons conseils !

PS: dites-moi si vous voulez du code

Voici le code que j'ai : Voir page test

Tu peux réaliser celà en faisant floater les données à gauche et l'image à droite. Pour la description, il faudra lui mettre une marge gauche de la largeur du bloc de données.

Quelque chose dans ce genre :

<div class="data"></div>
<div class="descr"><img>description</div>

.data{
   float:left; 
   width:100px;
}
.descr{
   margin-left:100px;
}
.descr img{
   float:right;
}

EDIT : oublie les tableaux say mal
Modifié par Laurie-Anne (04 Feb 2009 - 14:38)

Nickel, ça fonctionne super bien (cf. Preuve) mais j'ai une remarque !

Chaque contenu de libellé ("bla bla bla", "bli bli bli", "blo blo blo", etc.) provient d'une DB. Si le champ est vide alors je n'affiche pas le libellé et le contenu du champ.

Dans cet exemple, je devrais avoir chaque fois deux fois la même conditionnelle ? Une première fois pour savoir si je dois afficher le libellé et une deuxième fois pour savoir si je dois afficher le contenu du champ (lié au libellé).

En passant par un tableau, je n'ai qu'une seule conditionnelle qui me dit si je dois afficher la ligne (code html <tr>) ou non.

Existe-t-il une solution permettant d'éviter d'avoir deux fois la même conditionnelle tout en conservant le comportement que je désire avoir ?

J'ai modifié mon image qui montre un autre comportement que peut avoir ma page.

Dans cet exemple, j'ai un libellé "Activité" qui peut posséder comme donnée deux activités avec un retour à la ligne entre la première activité et la deuxième activité.

Voici l'image qui permet de mieux visualiser le comportement que je décris :

De nouveau, comment puis-je m'y prendre pour que ça fonctionne ? Merci d'avance pour vos lumières !

Alphonse a écrit :
Je me suis inspiré du tutoriel Adapter une légende à la largeur de l'image pour tenter d'obtenir le résultat souhaité mais sans succès...

Oui c'est normal, le résultat souhaité n'a strictement rien à voir avec ce que propose ce tutoriel.

Et en gros le résultat souhaité se gère avec:
- une image flottante à droite;
- une série de titres + texte, où les titres sont flottants à gauche et dottés d'un clear:left, et les textes pas flottants, pas dotés d'un clear, mais avec une simple marge à gauche de la largeur des flottants.

Pas sûr que le coup des clear:left passe bien sous IE6-7, cependant.
Modifié par Florent V. (04 Feb 2009 - 17:18)

Merci pour l'information mais ta réponse ne concerne pas mon post de 15h23, si c'est le cas alors je ne l'ai pas comprise...

J'imagine que je dois éventuellement utiliser des paragraphes (balise <p>) mais je ne vois, de toute manière, pas comment associer les paragraphes des titres avec les paragraphes des textes.

La seule solution reste d'utiliser un vrai tableau mais du coup, impossibilité d'avoir du texte qui passe en dessous de l'image... Tant pis

Merci quand même à tous !

Je ne comprend pas ton second problème. Le code devrait toujours fonctionner

Est-ce que tu aurais une page d'exemple en ligne à nous montrer ?

Voici l'exemple en ligne !

Dans cet exemple, le libellé "Loisirs" contient deux valeurs : "Loisirs 1" et "Loisirs 2" séparé par un saut de ligne (balise <br>).

Problème : "Loisirs 2" se place alors au niveau du libellé "Dernier libellé" or ce "Dernier libellé" devrait se retrouver en face de la ligne "Praesent blandit odio eu (...)"

Le code fait exactement ce que tu lui demande.

Si tu veux que les libélés soient en face d'un contenu, il va falloir modifier un peu la chose.

<img>
<p><span class="libele">text</span>text</p>
<p><span class="libele">text</span>text</p>
<p><span class="libele">text</span>text</p>

img{
   float:right;
}
.libele{
   display:block;
   width:120px;
}

Ou un truc du genre.

Ca fonctionne !

Merci beaucoup Laurie-Anne, j'ai fait quelques adaptations pour que ça puisse s'agencer comme je le souhaitais.

Cependant, dans un paragraphe (balise <p>), j'ai deux éléments : un élément de type "inline" (balise <span>) et à côté un deuxième élément de type "bloc" (balise <div>). Je peux faire ça ?

Résumé : <p><span>Libellé :</span> <div>Texte associé au libellé</div></p>

Non, le <p> ne peut pas contenir de <div>

pour donner un aspect bloc à un élément inline tu peux utiliser le css "display:block;"

Ok merci encore ! J'ai modifié le code de la dernière page que j'ai posté.

edit: Sujet Résolu !!!
Modifié par Alphonse (05 Feb 2009 - 10:44)