[Résolu] Pb positionnement photos/textes avec IE

Bonjour à tous,
Voici l'adresse du site que j'ai créé bien modestement en m'inspirant de l'un de vos tutos (grand merci au passage! ) : http://perso.wanadoo.fr/zebrate/
Avec Firefox et Safari, tout baigne. Par contre, on vient de me signaler qu'avec IE, les photos sont décalées sur la droite et recouvrent une partie du texte.
D'autre part, le lecteur Flash (fichier dewplayer.swf) sur la page présentant La cantatrice chauve de Ionesco (lien interne : note de mise en scène ou photo) ne s'affiche pas non plus avec IE. (J'ai transféré le fichier .swf et le .mp3 directement sur le ftp sans les mettre dans dossier spécifique. Est-ce que c'est ce qu'il fallait faire ou non?)
Merci pour votre aide.
Modifié par svet (09 May 2007 - 16:18)

Bonjour,

Je me suis permis d'éditer ton message pour corriger le lien (le point à la fin de la phrase était considéré comme faisant partie de l'URL, et l'URL étant donc invalide).

Pour ton problème, ça vient sans doute de l'utilisation du positionnement absolu sans donner de coordonnées pour le placement de l'image, ce qu'Internet Explorer n'aime pas trop.

Deux solutions : soit corriger le positionnement absolu en donnant au moins une coordonnée latérale, soit utiliser des flottants pour tes blocs images plutôt que le positionnement absolu, peu opportun ici.

Mais la première chose à faire, c'est de corriger le code HTML de la page. Par exemple, la div globale utilisée (div#conteneur) n'est jamais fermée ! Il y a de plus quelques incohérences, ainsi qu'un flottement dans le codage sémantique du texte. Pourquoi faire des <em><b>Bla bla</b></em>, quand on peut se contenter de faire <strong>Bla bla</strong> (et de demander des éléments strong en italiques, via les styles CSS), ou encore un <cite>Bla bla</cite> pour un nom d'oeuvre (là encore, le style par défaut peut être modifié via les styles CSS). Même chose pour la citation de Kafka, indiquée par des italiques, alors qu'un élément q (citation en ligne) ou blockquote (bloc de citation) aurait été plus adapté. Et enfin, attention à l'utilisation assez hasardeuse des br. Faire des paragraphes et, le cas échéant, leur appliquer des styles, devrait largement suffire.

Pour le fonctionnement du positionnement absolu et du positionnement flottant, travailler cette initiation au positionnement CSS sur Openweb :
1. flux et position relative
2. position float
3. position absolue et fixe


PS : site très sympa par ailleurs. Il faudrait juste virer le target sur le lien vers la page d'accueil...
Et aussi, corriger ceci :

<div id="titre">
<img src="images/titre.png">
</div>

En cela :

<div id="titre">
<h1><img src="images/titre.png" alt="La Compagnie du Zèbre"></h1>
</div>

(Le titre de niveau 1 n'est pas indispensable, mais le texte alternatif, si !)

En parlant de texte alternatif, ceux des portraits de l'en-tête sont assez incohérents. Pour donner un texte alternatif pertinent à une image, il faut penser au cas de figure suivant : que veut-on afficher comme texte si l'image ne s'affiche pas ?
(À ce propos, je rappelle l'existence de ce très bon article : Bien utiliser le texte alternatif.)
Modifié par Florent V. (21 Apr 2007 - 15:43)

Merci beaucoup pour ces précieuses explications.
Entre temps, me disant que ça devait coincer au niveau de "position: absolute", j'ai mis : "relative" et remonté le texte par un "margin-top négatif". Ca marche. Mais je vais suivre vos conseils.
Merci encore pour les autres modifs proposées dans l'écriture du code.
Quant au fait que le lecteur audio en flash soit inactif ? Comment résoudre la question avec IE ?