28172 sujets

CSS et mise en forme, CSS3

[Résolu]Comment insérer une image en float à droite sous IE

Voilà, j'ai inséré une image à droite de mon site avec un lien dessus pour ramener à la page d'accueil. Ca fonctionne sous Firefox mais sous IE7 ça fait descendre tout mon bloc de texte central.

J'ai bien lu quelques explications :

a écrit :
supprimer la largeur donnée au contenu qui suit le flottant (supprime l'effet de haslayout dans IE, voir http://test.blog-and-blues.org/haslayout/tests/float4.html )
- ajouter un display-inline sur le flottant (compense le bug de double marge du flottant dans IE)


mais je n'y comprend rien, je ne sait pas ce que c'est un layout ... 


<body>
<div id="fond">

<a href="index.html"><img src="img.png" id="mon_image" /></a>

<h1>title</h1>

<ul id="Menu">
</ul>

<div id="block">
</div>

</div>
</body>


et le CSS



#mon_image {float:right; margin-top:10px; margin-left: 0px; border:none; display:inline;}

body{
background: #000000;
border: 0 0;
font-family: "Bitstream Vera Sans", Verdana, Arial, Helvetica, serif;
font-size:80%;
}

#fond{
background : url(mon_img.jpg) no-repeat top center;
width:780px;
height:700px;
margin-left:auto;
margin-right:auto;
font-family: "Bitstream Vera Sans", Verdana, Arial, Helvetica, serif;
font-size:80%;
}

ul#Menu{
float:left;
margin-left:0px;
margin-right:0px;
margin-top:100px;
margin-bottom:0px;
background: transparent url(./templates/menu.png) top left no-repeat;
width: 180px;
padding-top: 0px;
padding-bottom: 0px;
text-align: center;
z-index:1;
}

#block { width:520px; height:450px; text-align:justify;text-indent:0em; color:#ffffff; margin-left:0px; margin-top:100px; padding-right:10px; padding-top:20px; overflow-y:auto; overflow-x:none; margin-right:0px;}

h1 {position:relative; text-align:left; color:#ffffff; font: Arial 14px; margin-top: 2%; margin-bottom:20px; top:100px; margin-left:180px; display:block; width:400px;}


Merci de votre aide précieuse Smiley biggrin
Modifié par popovitch (07 Mar 2008 - 16:18)
Non, c'est le bloc qui descend qui ne peut pas être survolé par un flottant, parce que ce bloc a le layout.

Je n'ai pas bien compris quel est le bloc qui est repoussé par le (ou les?) flottant(s?), mais en lisant ton code je vois que à la fois ul#Menu et div#block ont le layout.
apparemment c'est le block central qui est poussé d'au moins 150px vers le bas mais les autres éléments sont bien disposés Smiley ohwell 
#block {
	[b][#red]width: 520px;[/#][/b] /* confère le layout */
	[b][#red]height: 450px;[/#][/b] /* confère le layout */
	...
}

Ça me semble pourtant clair, non?

ul#Menu, qui est placé avant div#block, a également le layout, mais il est flottant à gauche, donc il ne prend pas 100% de la largeur de son conteneur et ne touche sans doute pas ton image flottante (peux pas en dire plus sans voir la page...).

Quant au titre h1, je suppose qu'il n'a pas le layout et est en width: auto (valeur par défaut) et donc prend 100% de la largeur de son conteneur, et est survolé par l'image flottante (qui ne repousse que le texte, les images, les éléments avec propriété clear dans le même sens que le flottement, les éléments qui forment un contexte de formatage et dans IE ceux qui ont le layout).

Bref, si tu veux que l'image flottante «survole» div#bloc, il ne faut pas que div#bloc ait le layout dans IE, et donc pas de width ou de height. Oui je sais, c'est contraignant. Smiley cligne
J'ai positionné le menu et le bloc central en relatif, je sais pas si c'est l'usage mais ça fonctionne. Smiley biggrin
Modifié par popovitch (07 Mar 2008 - 16:18)
Sujet clos
Aller à