texte autour d'une image avec ul . [Résolu]

[SpaceFrog]

Je me bat depusi ce matin avec un souci d'amignement de texte autour d'une image ...
l'image est en float left et donc le texte "s'enroule" bien autour.
Trop bien d'ailleurs car si j'ai un ul dans le texte et que le lis dépassent le bas de l'image, ils ne restent plus alignés verticalement
J'ai trouvé un début de solution pour firefox en donnant un display table-cell aux ul ...
le resultat attendu OK sous ffx



le souci sous IE est que maintenant si l'ul est situé au niveau de l'image il
passe en dessous ...


le code html :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="produit_" class="rubrique cl">L'autre choix de diffusion d'air</div>
        <div id="ficheprod">
        <img src="pics/prods/180x180/PH_GAINES_TEXTILES.JPG" alt="Gaines textiles"/>
                <div class="desc">La gaine textile est une solution de diffusion d’air qui offre de multiples avantages : <br/><ul><li>pratique</li><li>économique</li><li>performante en termes de confort obtenu</li></ul><br/><br/>
                La gaine textile permet de réaliser aisément des installations de ventilation, chauffage et climatisation.<br/><br/>
                La gaine textile est la solution idéale de diffusion de l’air dans les bâtiments de grand volume ou de grande hauteur tels que les zones de production et de stockages dans l’industrie, les surfaces de vente et GMS, les salles polyvalentes, de spectacles et théâtres ainsi que dans les salles de sport et les piscines.<br/>
                <br/>
                Systèmes de diffusion disponibles :<br/>
                <ul>
                        <li>TEXI-SOFT</li>
                        <li>TEXI-PERF</li>
                        <li>TEXI-PULSE</li>
                        <li>TEXI-JET</li>
                </ul>
                </div>
        </div>
</div>

le css

Code :

1
2
3
4
5
6
7
8
.desc { display:inline;}
.desc ul li {
	width:100%;
	}
.desc div ul {
	display:table;
	width:100%;
	}

comment peut on avoir le même rendu que ffx sous IE ?

[ornitho13]

Une solution consiste à modifier quelque peu ta structure HTMl en modifiant l'emplacement de ton image.

Exemple :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<div id="produit_" class="rubrique cl">L'autre choix de diffusion d'air</div>
<div id="ficheprod">
	<div class="desc">
		<img src="pics/prods/180x180/PH_GAINES_TEXTILES.JPG" alt="Gaines textiles" width="180" height="180"/>
		La gaine textile est une solution de diffusion d’air qui offre de multiples avantages : <br/>
		<ul>
			<li>pratique</li>
			<li>économique</li>
                        <li>performante en termes de confort obtenu</li>
                </ul>
                <br/><br/>
                La gaine textile permet de réaliser aisément des installations de ventilation, chauffage et climatisation.<br/><br/>
                La gaine textile est la solution idéale de diffusion de l’air dans les bâtiments de grand volume ou de grande hauteur tels que les zones de production et de stockages dans l’industrie, les surfaces de vente et GMS, les salles polyvalentes, de spectacles et théâtres ainsi que dans les salles de sport et les piscines.<br/>
                <br/>
                Systèmes de diffusion disponibles :<br/>
                <ul>
          	        <li>TEXI-SOFT</li>
			<li>TEXI-PERF</li>
			<li>TEXI-PULSE</li>
			<li>TEXI-JET</li>
                </ul>
	</div>
</div>

Code css :

1
2
3
4
5
6
 
/*supprime les autres directives CSS*/
.desc img{
	float:left;
	margin:5px 20px 5px 0px;
}

Autre chose :

Code css :

1
2
3
4
5
 
.desc div ul {
	display:table;
	width:100%;
}

ne peut pas fonctionner car dans la div avec la classe "desc" il n'y a pas de div englobant de ul.

[SpaceFrog]

les ul restent a leur place sous FFX mais se decalent autour de l'image



sous IE l'ul passe sous l'image

[SpaceFrog]

En fait le display table que ce soit cell row ou autre ne donne rien de bon ...

la solution est bien plus simple,bien que je ne comprenne pas vraiment sont explication
le float right sur l'image fait sortir les li du flux...
pour les réintegrer il suffit de mettre overflow auto sur le ul