28220 sujets

CSS et mise en forme, CSS3

Image qui depasse d'un bloc

Bonjour,

J'ai un petit probleme avec internet explorer. Sous forefox mon site est nikel mais IE est toujours aussi récalcitrant. J'ai créé un block avec dedans une foto centrée à gauche et du texte sur la droite. Le problème est que meme avec mon bloc en overfow: auto;, mon image depasse du bloc (le bloc ne s'adapte pas a l'image).


#identite{
	margin: 10px;
	padding: 5px;
	border: black solid 1px;
	background-image: url(../fond2.gif);
	overflow: auto;
}
#photo{
	float: left;
	margin-right: 5px;
}




<div id="identite">
	<img src="photo.jpg" height="200px" alt="ma photo" id="photo" />
	<p><span class="nom">lalalala</span><br />
	.....................<br />
	.....................</p>
	<p>
	.............<br />
	.........................
	</p>
	<p>
	......................<br />
	.................</p>
</div>

Modifié par globe_dk (15 Jul 2005 - 16:41)
Une des solutions qui permet a IE et FF de fonctionner :

mettre un <hr /> a la fin de ton <div>

avec comme propriete :

hr {
margin:0;
padding:0;
width:0;
height:0;
visibility: hidden;
clear:both;
}

Evidemment c'est le clear:both; qui fait tout le travail. Le reste ne sert k'a le masquer.
Un solution plus élégante encore ... et qui marchera surement avec la prochaine version d'IE (donc pour l'instant c'est mort tu l'auras compris) :

div#identite:after {
content: "";
display: block;
clear: both;
}

C'est la meme technique avec tout de meme undétail important : pas besoin de rajouter un element a la structure XHTML comme on le fait avec le <hr />
Modifié par afbilou (15 Jul 2005 - 16:58)
<edit>Grosse sottise corrigée. J'était un peu fatigué hier, moi Smiley cligne
La précision sur IE est par ailleurs à présent dans la FAQ du forum</edit>

Ah... Pour compléter l'excellente FAQ du forum qu'on-se-doit-de-lire-en-premier Smiley ravi : IE a souvent du mal à comprendre ce mécanisme si tu ne précise pas une des dimensions du conteneur. Une largeur width:100% fait très bien l'affaire (aussi curieux que cela puisse être)

Sinon, effectivement, le "clear en pure CSS" (inventé par positioniseverything ) serait aussi une solution très élégante, si IE implémentait le contenu généré dans les :after.

Il faut ajouter enfin à propos du <hr /> qu'il apporte souvent une plus grande lisibilité au contenu sans CSS (navigateurs textes, ancien navigateurs graphiques que nous privons de nos CSS trop modernes, etc.)...
Modifié par Laurent Denis (16 Jul 2005 - 07:42)
Sujet clos
Aller à