Image + position relative : Décalage de la mise en page sous IE

Bonjour,

J'ai un problème de décalage sous IE.

J'ai réalisé un cadre aux proportions variables qui sert de fond à mon site.

J'aurai voulu placer une image en haut à gauche de ce cadre sans altérer le reste de ma présentation (l'image doit déborder un peu).

Sous FF, aucun problème, je place l'image où je veux grâce à une position relative. Par contre sous IE, le seul fait d'ajouter cette image me crée un décalage entre le haut de mon cadre et le titre.

Une image vallant mieux qu'un long discours, vous pouvez voir le problème ici : http://testie.dynalias.org/

Si vous avez une idée, elle est la bienvenue...
Modifié par PatHibulaire (16 May 2006 - 23:14)

Le problème vient essentiellment d'une structuration (désolé de le dire) tordue et lourde. Tu dois réfléchir d'avantage à une stucturation plus légère et plus judicieuse. Le bottom de ton image ne sert à rien.
Si tu mets un background blan à #top, tu verras que le blanc descend jusqu'en bas.

une position relative? La position relative est pris en compte comme un élément existant de ton design en IE. C'est pourquoi il y a un espace. Pourquoi ne pas utilisé une position absolue, avec un z-index superieur aux autres éléments (100 par exemple). Ensuite, tu positionnes ton image avec les propriétés Left et Top et l'image sera placée ou tu le souhaites
Modifié par s_har_k (17 May 2006 - 15:45)

Pour Hermann

Ben en fait, je suis entrain de modifier le code de Coppermine qui est entièrement fait en tableaux donc pour la propreté du code j'essaye de faire au mieux et je croyais avoir déjàa pas mal simplifié .

Sinon je ne comprends pas ce qui ne va pas quand tu dis « tordue et lourde », voilà la strucuture de ma page :

<div id="sideLeft">
  <div id="sideRight">
	
      <div id="top">
        <div id="cornerTopLeft"></div>
        <div id="cornerTopRight"></div>
        <a href="index.php"><img id="logoCoppermine" src="themes/exquis/images/site_logo.png" alt="" /></a>
      </div> <!-- #top -->
	
      <div id="center">
        <div id="title">
          <h1 id="coppermineTitle">{GAL_NAME}</h1>
          <p id="coppermineDesc">{GAL_DESCRIPTION}</p>
        </div> <!-- #title -->

ICI JE METS LE CONTENU QUI POUR L'INSTANT N'EST PAS ENCORE PROPRE MAIS J'AI ENCORE PAS MAL DE LIGNES DE CODE À MODIFIER. DE TOUTE FAÇON CE CONTENU N'INTERFÈRE PAS AVEC MON PROBLÈME.

      </div> <!-- #center -->

      <div id="bottom">
        <div id="cornerBottomLeft"></div>
        <div id="cornerBottomRight"></div>
      </div> <!-- #bottom -->
	
    </div> <!-- #sideRight -->
  </div> <!-- #sideLeft -->

Pour faire cette présentation je me suis inspiré de plusieurs tutoriaux sur le Web dont notamment ceux que j'ai trouvé ici : http://forum.alsacreations.com/topic.php?fid=4&tid=13586&s=cadre et ici : http://www.ljouanneau.com/standards/css/cadre/

Je ne vois pas comment faire moins lourd mais si tu as une idée...

Je ne comprends pas par contre pourquoi tu dis que le bottom de mon image ne sert à rien. C'est lui qui me décale verticalement mon image à la position que je veux. Pourrais tu détailler ?

---

Pour s_har_k

Effectivement la position absolute résoud mon problème .

Je trouvais la position relative plus élégante car l'image était alors positionnée directement par rapport au cadre.

Par contre, je ne comprends pas bien quand tu dis que la position relative est prise en compte comme un élément existant du design sous IE ?

J'ai l'impression que IE conserve la place que devrait occuper l'élément dans le flux normal et qu'en plus il déplace cet élément (en clair il utilise 2 fois trop de place). Mais mon titre (h1) est également positionné en relatif et je n'ai pas l'impression que le problème se reproduise.

Bon en tout cas, à moins de trouver une réponse au pourquoi de l'existence de ce cadre, je vais rester en position absolute. Merci .
Modifié par PatHibulaire (17 May 2006 - 19:22)