Positionnement images avec légende sur ie6 (résolu)

Bonjour à tous,
Sur une page j'ai 2 images avec légende alignées horizontalement et en dessous 2 images/légendes également alignées.
Sur firefox tout va bien mais sur ie c'est le b... intégral.
Seule la première image reste en place. la 2ème est décalée sur la droite.
Un grand espace vide au dessous. La 3ème sous l'espace vide et décalée sur la droite. La 4ème sous la 3 et également décalée sur la droite

Voici le code utilisé :

<div class="placo1">
		<dl>
		<dt><img src="images/placo1.jpg"alt=""/></dt>
		<dd>aménagement comble</dd>
		</dl>
	</div>	
	<div class="placo2">
		<dl>
		<dt><img src="images/placo2.jpg"alt=""/></dt>
		<dd>Préparation doublage placo plâtre</dd>
		</dl>
	</div>	
	<div class="lambris">
		<dl>
		<dt><img src="images/lambris.jpg"alt=""/></dt>
		<dd>Pose de lambris</dd>
		</dl>
	</div>
	div class="escalier">
		<dl>
		<dt><img src="images/viel_escalier.jpg"alt=""/></dt>
		<dd>Rénovation montée d'escalier</dd>
		</dl>
	</div>

avec le css :

.placo1  {
	float: left;
	width: 240px;
	margin-left:20px;
	}
	dl {
	margin:0;
	padding: 0;
	}
	dt {
	margin: 0;
	padding: 0;
	}
	dd {
	margin: 0;
	padding: 0;
	text-align: center;
	color: green;
	}
.placo2  {
	float: left;
	width: 240px;
	margin-left: 70px;
	}
	dl {
	margin:0;
	padding: 0;
	}
	dt {
	margin: 0;
	padding: 0;
	}
	dd {
	margin: 0;
	padding: 0;
	text-align: center;
	}
.lambris  {
	width: 240px;
	margin-left:20px;
	margin-top: 250px;
	}
	dl {
	margin:0;
	padding: 0;
	}
	dt {
	margin: 0;
	padding: 0;
	}
	dd {
	margin: 0;
	padding: 0;
	text-align: center;
	}
.escalier  {
	float: left;
	width: 240px;
	margin-left:70px;
	margin-bottom: 40px;
	}
	dl {
	margin:0;
	padding: 0;
	}
	dt {
	margin: 0;
	padding: 0;
	}
	dd {
	margin: 0;
	padding: 0;
	text-align: center;
	}

Comment pourrais je faire en sorte que la présentation soit la même avec tous les navigateurs ?
Modifié par Sesame (09 Mar 2007 - 19:00)

déja tu peux commencé par te simplifier la vie, par exemple pour ton html moi je ferrai ça:

<ul class="placo">
  <li><img src="images/placo1.jpg"alt=""/>aménagement comble</li>
  <li><img src="images/placo2.jpg"alt=""/>Préparation doublage placoplâtre</li>
  <li><img src="images/lambris.jpg"alt=""/>Pose de lambris</li>
  <li>><img src="images/viel_escalier.jpg"alt=""/>Rénovation montée d'escalier</li>
</ul>

et comme css je me contenterais de :

.placo li  {
  margin:0;padding: 0;
  float: left;
  width: 240px;
  text-align: center;
}

ça sert a rien de faire une liste de definition pour chaque image avec un div en plus, plus tu fais compliqué plus tu as de chance que ça bug

et tu pourras dormir plus longtemps dans ton hamac...
Modifié par matmat (08 Mar 2007 - 19:04)

Bonjour,

je ne fais que passer, mais j'adore cette utilisation de la liste de définition:
- dt: "" (vide, et légitimement en termes d'accessibilité)
- dd: légende l'image

Je sais que c'est involontaire, et juste du au fait que trop d'articles naïfs ont embrayé sur cette mode des dl il y a quelques années; Mais le résultat est tout de même dramatique...
Modifié par Laurent Denis (08 Mar 2007 - 18:58)

Bonsoir matmat,
J'ai essayé ton code et il ne marche ni sur ff ni sur ei6
merci quand même de t'intéresser à mon cas.

Laurent Denis a écrit :

a écrit :
Je sais que c'est involontaire, et juste du au fait que trop d'articles naïfs ont embrayé sur cette mode des dl il y a quelques années; Mais le résultat est tout de même dramatique...

Remarque sûrement très pertinente mais le débutant que je suis aurait préféré l'indication d'une méthode non dramatique pour obtenir le résultat souhaité.

Bon, je vais creuser de ce côté là.

Salut,

J'ai du mal à visualiser ton code, tu n'aurais pas un lien?

(ah le hamac !!)
Modifié par ghost (08 Mar 2007 - 22:49)

Bonsoir Ghost,

a écrit :
(ah le hamac !!)

Je vois que nous partageons les mêmes valeurs
Pour le lien c'est niet, le site n'est que sur mon ordi pour l'instant.
@+

Re,

Bon alors un petit screen, sinon j'y retourne (dans mon hamac)

Re,
Attends parceque même avec le code que j'avais avant je n'arrive plus à retrouver la position correcte
Dés que possible je t'envoie un screen, mais je pense que tu as le temps de retrouver ton hamac et de voir ça tranquillement demain.
Bonne nuit !

Il y en a qui se complique la vie !

et si tu testai tout simplement ceci :

<div id="colonnes">
   <div id="colonne1">
      <img src="" alt="" width="" height="" />
      <p>légende de l'image 1</p>
   </div>
   <div id="colonne2">
      <img src="" alt="" width="" height="" />
      <p>légende de l'image 1</p>
   </div>
</div>

En fait une simple présentation avec 2 colonnes
Modifié par Gunner4902 (09 Mar 2007 - 14:12)

Bonsoir Gunner,
T'es un chef !
Il y a juste un petit décalage d'espace entre les images et les légendes avec ie6 mais rien de bien méchant.
Comme quoi quand on sait c'est simple !
Merci beaucoup pour le coup de main et bonne soirée.

Bonsoir Ghost,
Du coup je ne t'envoie pas de screen, tu vas pouvoir continuer à user ton hamac

Salut,

Voui, pour le fun et éliminer le pixel de trop sous IE6 tout en conservant la liste (mieux?, plus mal?) et en ayant un titre toujours de la même largeur que l'image :

<style type="text/css">	
*{margin: 0; padding: 0;}
ul{
list-style-type: none;
width: 400px;
margin: auto;

}

li{
float: left;  
width: 100px; /* par exemple, si les images sont de width différents styler les widt dans le code */
margin-left: 15px;
}
 
li img{
display: block;
}

li span{
display: block;
text-align: center;
background: yellow;
line-height: 15px;
}


</style>
</head>
<body>
<ul>
<li><img src="image1.jpg" alt="" /><span>titre1</span></li>
<li><img src="image2.jpg" alt="" /><span>titre2</span></li>
</ul>
</body>

bon j'y retourne

Heuh...! la solution de Gunner me paraît quand même plus simple.
Merci quand même.
Le shadock semble moins reposant que le hamac non ?