[resolu]Flottant et IE

Bonjour,
j'ai un petit soucis ; un gros en fait.
sur ma page d'accueil, le petit drapeau se positionne correctement sous FF (il s'agit d'une image en flottant). Or sous IE, le navigateur me génère une espèce de "block/conteneur" qui empêchent le comportement flottant. Après plusieurs essais infructueux et des recherches sur le net (openweb, blog and blues...) je me décide à me tourner vers vous.

lien de la page d'accueil : http://www.quatuorprod.com

<div id="wrapper">
  <h1>quatuorprod creation de site : la creation de site internet sur mesure</h1>
<a href="en/index.html" title="English version"><img src="images/gb.gif" id="language" width="16" height="11" alt="Drapeau anglais" /></a>  
  <!-- Navigation -->
  <ul class="menunav">
  <li><a href="index.html" id="accueilnav">accueil</a></li>
    <li><a href="prestations-sur-mesure.html" title="Notre approche et les prestations que nous proposons" id="prestnav">prestations</a></li>
    <li><a href="references.html" title="Les attentes de nos clients. Nos cr&eacute;ations de sites internet" id="refnav">r&eacute;f&eacute;rences</a></li>
    <li><a href="formulaire-contact.php" title="Un formulaire de contact vraiment simple et rapide &agrave; remplir" id="contactnav">contact</a></li>
    <li><a href="questions-frequentes.html" title="Les questions courantes sur la cr&eacute;ation de site internet" id="faqnav">f.a.q.</a></li>
  </ul>
  <!-- Fin Navigation -->

lien CSS : http://www.quatuorprod.com/new.css

/* -- Version anglaises -- */
img#language{float:right;margin:1.5em 1.5em 0 0;}

Modifié par fredmac (17 Nov 2006 - 20:20)

bonsoir,

ton lien flottant etire son conteneur dans IE , ce qui repousse alors la barre de navigation plus bas.

Dans firefoxe (ou autre) ce probleme n'apparait pas , car rien n'oblige le conteneur a s'etirer ni n'entre dans l'espace qu'occupe l'element flottant.

2 possibilité , l'integré dans la liste des menus , toujours en flottant a droite et en premier , ou le mettre en position absolute , pour que IE n'etire plus lson conteneur.

GC

bonsoir et merci de me répondre si rapidement.
pour l'étirement du conteneur je reste dubitatif, le flottant ne fait-il pas sortir l'élément du flux ? Mais IE l'interprète t-il différamment ?

j'ai apporté une modification sur la css ; positionnement en absolu avec une gestion par les marges (les top, left ou right ne sont pas indiqués dans mon cas, site centré oblige). Aurais-tu la possibilité de me dire si cela passe sous IE ? Browsershot est un peu encombré ces derniers temps.

c'est okay dans IE6 ,
juste une marge blanche de quelques pixels residuelle (3) perceptible en passant d'un navigateur a l'autre et en observant justement la banniere/navbar.

++
Modifié par gcyrillus (16 Nov 2006 - 22:47)

fredmac a écrit :
j'ai apporté une modification sur la css ; positionnement en absolu avec une gestion par les marges (les top, left ou right ne sont pas indiqués dans mon cas, site centré oblige).

Pourquoi ? ça dépend de la référence utilisée pour le positionnement

fredmac a écrit :
pour l'étirement du conteneur je reste dubitatif, le flottant ne fait-il pas sortir l'élément du flux ? Mais IE l'interprète t-il différamment ?

Un élément flottant ne repousse effectivement pas les limites de son élément parent, sauf :
- dans les navigateurs modernes (dont IE7), si l'élément parent crée un contexte de formatage bloc ;
- dans Internet Explorer (IE7 et inférieurs), si l'élément parent est doté du layout.

Références en passant :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html (un peu fouillis, désolé)
http://www.blog-and-blues.org/articles/Float, _clear_et_contextes_de_formatage
http://www.test.blog-and-blues.org/haslayout/trad_temp.html

fredmac a écrit :
j'ai apporté une modification sur la css ; positionnement en absolu avec une gestion par les marges (les top, left ou right ne sont pas indiqués dans mon cas, site centré oblige).

Le positionnement absolu avec les propriétés top|right|bottom|left permet de positionner un élément par rapport à son plus proche ancêtre positionné (c'est à dire en position: relative|absolute). Si l'élément n'a pas d'ancêtre positionné, il sera positionné par rapport à l'élément body.

Cf. http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html

gcyrillus a écrit :
c'est okay dans IE6 ,
juste une marge blanche de quelques pixels residuelle (3) perceptible en passant d'un navigateur a l'autre et en observant justement la banniere/navbar.

++

Sur ce point là, je sèche également sachant que d'une part, la balise ul correspondante a un margin et padding à 0 et que d'autre part, l'élément immédiatement au dessus (h1) a des valeurs identiques ???

Sopo a écrit :
Pourquoi ? ça dépend de la référence utilisée pour le positionnement

Oui, mais dans le cas de mon site le wrapper (le conteneur qui sert à centrer le site) a un margin left et right à "auto". Je dois donc gérer le positionnement via les marges de l'élément et non via les propriétés top:XXXpx; right:XXXpx;.
Modifié par fredmac (16 Nov 2006 - 23:42)

En principe pas de soucis ,
sans coordonnés il se place ou il doit apparaitre si il restait dans le flux, la seule difference c'est qu'il n'interfere plus avec le reste de la page.

Donc grosso-modo , ton lien est lu pas l'interpreteur , positionné par rapport aux flux , la regle float est appliqué , puis il est sortis du flux naturel de la page .
la page peut scroller ou se replacer , lui , il garde sa position theorique aussi longtemps que tu ne lui impose pas une coordonné de placement.

Si tel est le cas , alors il faut mettre un parents en position relative pour qu'il se calle dessus et non pas la fenetre.

En relisant la faq , tu y retrouveras ces informations.

++


<edit> pour le trou residuelle entre le header et la navbar , c'est surement du a la longeur du texte indenté qui passe sur plusieurs lignes ou je sais pas , , applique un font-size:1px et paf plus marges supplementaires.

re ++
Modifié par gcyrillus (17 Nov 2006 - 00:05)

mpop a écrit :

...Si l'élément n'a pas d'ancêtre positionné, il sera positionné par rapport à l'élément body.

C'est tout à fait mon cas, d'où l'utilisation des marges de l'élément pour le positionnement et non pas les propriétés top|right|bottom|left sachant que mon dic#wrapper a une marge droite et gauche à "auto".

Modifié par fredmac (17 Nov 2006 - 00:07)

fredmac a écrit :


C'est tout à fait mon cas, d'où l'utilisation des marges de l'élément pour le positionnement et non pas les propriétés top|right|bottom|left

d'ou la proposition d'un: position:absolute; sec !, en premier lieu.

comme je viens d'editer mon post precedent que tu n'as peut-etre pas lu, je te propose de passer le font-size a 1pixel pour h1 , afin de virer cette marge en trop

++

gcyrillus a écrit :
...pour le trou residuelle entre le header et la navbar , c'est surement du a la longeur du texte indenté qui passe sur plusieurs lignes ou je sais pas , , applique un font-size:1px et paf plus marges supplementaires.

re ++

J'essai de ce pas...

Merci à tous et bonne nuit... je reviens vers vous demain matin

fredmac a écrit :
Oui, mais dans le cas de mon site le wrapper (le conteneur qui sert à centrer le site) a un margin left et right à "auto". Je dois donc gérer le positionnement via les marges de l'élément et non via les propriétés top:XXXpx; right:XXXpx;.

Le conteneur global peut tout à fait être centré via les marges automatiques ET positionné en relatif (sans propriété top|right|bottom|left, vu qu'il ne s'agit pas de le décaler), ce qui en fera le plus proche référent pour ses descendants positionnés en absolu.

On peut aussi utiliser un position: relative sur le bloc parent de l'élément à positionner en absolu. Cf. le lien que j'indiquais ci-dessus.