Multiple balises img et float sous ie

Question

springer

15 Feb 2007 à 13:02

bonjour,
D'abord un préambule
Je pense que le problème a déjà été traité ici, mais comme je ne trouve pas la solution dans la FAQ, je me permets de vous demander un lien vers une réponse ou une piste d'action.
Voici le problème dans la div principale de ma page d'accueuil je veux disposer des images en quinconce, càd une image à gauche, puis à la ligne suivante une image à droite et ainsi de suite.
J'ai déjà réalisé le canevas xhtml et le css, cela fonctionne bien sous Mozilla, mais pas sous ie 6, et ie 7 donc sous ie en général.
NB : Ce qui ne marche pas est le retour à la ligne.
Voici le code :
1) Xhtml
d'abords l'en tète


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<html lang="fr">

puis dans le body la div qui me sert à l'affichage.


<div id="content">
<img id="img_homme" src="images/homme.gif" width="142" height="89" alt="" /><p id="ch_homme">Chapeau homme</p>
<img id="img_femme" src="images/mariage.gif" width="140" height="120" alt="" /><p id="ch_femme">Chapeau femme</p>
<img id="img_vetement" src="images/robe.gif" width="138" height="195" alt="" /><p id="vetement">V&eacute;tements</p>
<img id="img_accessoires" src="images/pipe_eau.gif" width="142" height="135" alt="" /><p id="accessoires">Accessoires</p>
</div>

puis le code css


#content {
margin: 0;
padding: 0;
}
#img_homme {
margin-top: 1.5em;
float: left;
}
#ch_homme {
font-weight: bold;
margin-top: 3em;
float: left;
}
#ch_femme {
margin-top: 3em;
font-weight: bold;
clear: left;
float: right;
}
#img_femme {
margin-top: 0.5em;
clear: left;
float: right;
}
#img_vetement {
margin-top: 0.5em;
clear: right;
float: left;
}
#vetement {
font-weight: bold;
margin-top: 3em;
clear: right;
float: left;
}
#accessoires {
font-weight: bold;
margin-top: 3em;
clear: left;
float: right;
}
#img_accessoires {
margin-top: 0.5em;
clear: left;
float: right;
}

Pour contrer la Non interprétation du css par ie, juste après l'appel du css dans le head, j'utilise un lien conditionnel pour ie :


<link rel="stylesheet" type="text/css" href="styles/corps_index.css" media="screen" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styles/ie_corps_index.css" media="screen" />
<![endif]-->

mais là dans ma page css pour ie j'ai tout tenté et rien ne marche, donc si vous aviez un conseil ou un lien pour m'éclairer et m'aider, j'apprécierai.
Merci et cordialité.

springer

15 Feb 2007 à 13:43

PS : Pour les puristes la propriété alt de la balise img n'est pas encore renseignée mais elle le sera par la suite.

Julien Royer

15 Feb 2007 à 14:01

springer a écrit :
PS : Pour les puristes la propriété alt de la balise img n'est pas encore renseignée mais elle le sera par la suite.

Attention, rien à voir avec le fait d'être un puriste puiqu'il ne s'agit pas du tout d'un problème de validation mais d'accessibilité. Smiley smile

springer

15 Feb 2007 à 16:01

merci Julien,
Mais je le savais, et je défends comme toi l'accessibilité, mais j'ai déjà vu des remarques de ce genre sur le site, alors un springer averti en vaut deux.
Par contre si tu avais un conseil sur ma question cela m'arrangerai

Thomas D.

15 Feb 2007 à 16:13

Salut.

Si j'ai bien compris, le but est d'avoir une image à gauche, avec un texte de présentation à droite, puis en dessous une image à droite avec un texte de présentation à gauche?

Je crois qu'on peut faire plus court :

<p><img class="img_gauche" src="..." alt="..." />Présentation 1</p>
<p><img class="img_droite" src="..." alt="..." />Présentation 2</p>

.img_droite {
   /* Image à droite, avec marge à gauche */
   float: right;
   margin-left: 10px;
}
.img_gauche {
  /* Image à gauche, avec marge à droite */
  float: left;
  margin-right: 10px;
}
p {
   /* On empêche les paragraphes de se mélanger les flottants */
   clear: both;
}

et ça devrait fonctionner. Attention, s'il y a des colonnes flottantes autour de cette partie, il faudra ajouter quelques lignes de CSS pour créer un contexte de formatage ...
Modifié par Thomas D. (15 Feb 2007 - 16:13)

Laurent Denis

15 Feb 2007 à 19:33

Thomas D. a écrit :

<p><img class="img_gauche" src="..." alt="..." />Présentation 1</p>
<p><img class="img_droite" src="..." alt="..." />Présentation 2</p>

Heu... Pour l'accessibilité: respectez l'ordre logique du contenu HTML, svp...

<p>[b]Texte à gauche[/b]<img class="img_gauche" src="..." alt="..." /></p>
<p><img class="img_droite" src="..." alt="..." />[b]Texte à droite[/b]</p>

Cela a une certaine importance dans les modes de rendu mixtes (lecteur d'écran couplé à une loupe, par exemple) Smiley cligne

Modifié par Laurent Denis (15 Feb 2007 - 19:34)

springer

16 Feb 2007 à 10:41

bonjour à tous,
j'ai suivi vos conseils, mais ....
1) pour coller mes titres aux images, j'ai dans le script xhtml du attribuer la class à la balise p, car sinon le texte était loin de l'image
2) cela marche parfaitement pour Mozilla, normal, mais pour ie 6 et 7, c'est pas ça,
je voulais vous joindre les images du rendu, mais impossible, le lien joindre une image ne fait rien ?????
donc si sous Mozilla c'est ok, sous ie sur la même ligne j'ai l'image à gauche et l'autre à droite, et idem pour la deuxième ligne.
voici le code xhtml


<div id="content">
<p class="img_gauche"><img src="images/homme.gif" width="142" height="89" alt="" />Chapeau homme</p>
<p class="img_droite">Chapeau femme<img src="images/mariage.gif" width="140" height="120" alt="" /></p>
<p class="img_gauche"><img src="images/robe.gif" width="138" height="195" alt="" />V&eacute;tements</p>
<p class="img_droite">Accessoires<img src="images/pipe_eau.gif" width="142" height="135" alt="" /></p>
</div>

et j'ai repris le codes css de Thomas
Mais je me suis inspiré du gabarit de "Réalisation des codes xhtml & css, du tutoriel et du design par Olivier Patry" dont voici le lien :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design_css
il y a déjà des flottants : voici la portion de script les contenant.


div#content
{
float: left;
width: 530px;
padding-left: 2em;
}
div#sidebar
{
float: right;
width: 130px;
}
div#center
{
padding-bottom: 50px;
overflow: auto;
}

donc si je suis les recommandation de Thomas, comment créer un contexte de formatage? ou un lien vers un tuto si vous préferrez.
cordialement

springer

16 Feb 2007 à 10:58

Au tant pour moi, je me suis trompé sur le gabarit qui m'a inspiré.
Je n'arrive pas à le retrouver sur le site, mais il utilise une image pour simuler de fausses colonnes et le footer contient cette phrase célèbre :

a écrit :

Je suis un pied de page. Et comme disait Groucho Marx, si vous n'aimez pas mes opinions, j'en ai d'autres.

donc si vous pouviez me re-donner le lien pour que je puisse citer mes sources, ce serait bien
Merci.

Thomas D.

16 Feb 2007 à 12:27

springer a écrit :
Au tant pour moi, je me suis trompé sur le gabarit qui m'a inspiré.
Je n'arrive pas à le retrouver sur le site, mais il utilise une image pour simuler de fausses colonnes et le footer contient cette phrase célèbre :

Je suis un pied de page. Et comme disait Groucho Marx, si vous n'aimez pas mes opinions, j'en ai d'autres.

Ben tiens, ça me rappelle quelque chose Smiley lol

C'est par ici : Design XHTML/CSS complet avec 2 colonnes de même hauteur.

Pour les contextes de formatages, voir l'article de Laurent Denis (il me semble d'ailleurs que j'en parle dans le tuto, non ?)

Laurent >

a écrit :
Cela a une certaine importance dans les modes de rendu mixtes (lecteur d'écran couplé à une loupe, par exemple)

Tu peux expliquer ce qui pose problème, stp ? En considérant que l'on a une image suivie de sa description, je ne vois pas en quoi l'ordre dans le code HTML peut être gênant ? Smiley decu

Modifié par Thomas D. (16 Feb 2007 - 12:30)

springer

16 Feb 2007 à 15:46

Pardon Thomas,
j'avais pas lu ta signature, que j'aime beaucoup.
J'essaye de comprendre tes liens mais les notions de haslayout, m'échappe complètement.
j'ai beau utiliser, overflow, display, height, ça ne modifie pas mon problème, et comme je n'aime pas abdiquer, est-ce que je peux avoir un joker, ou un autre indice.
Merci

springer

17 Feb 2007 à 12:46

bonjour,
je n'arrive toujours pas à comprendre ce qu'est le "contextes de formatages" est-ce que l'un de vous pourrai me renseigner, comme ceci je pourrai peut-être résoudre mon problème, en fait si j'ai bien compris il faut appliquer à un élément, mais le quel?, une hauteur, ou un overflow, ou .... mais l'article et mes connaissances ne me renseignent pas.
Merci

springer

20 Feb 2007 à 11:43

bonjour,
je sèche toujours sur le contexte de formatage, y a un truc qui cloche l'à dans! (serge réggiani, la saga des bombes atomiques).
si j'ai bien suivi le tutos c'est dans le dernier conteneur que je dois créer mon contexte de formatage.
Mais dans le script de Thomas il y a déjà un contexte de formatage pour ie


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styles/ie.css" media="screen" />
<![endif]-->

,
défini par :


#content {
display: inline;
overflow: auto;
}

Donc je ne comprends pas comment ruser, devrais-je me résoudre à utiliser un tableau?
Merci de vos explications.
Je ne vous demande pas une solution toute faite mais des explications qui me permette d'évoluer et de réaliser mon objectif
Merci

Sujet clos

CSS et mise en forme, CSS3

Multiple balises img et float sous ie