18073 sujets

Questions générales et questions de débutants

[Résolu] Div imbriquées

Bonjour,

Voila plusieurs fois que je me heurte au problème et cette fois j'aimerais trouver une solution propre et non pas abandonner et passer à autre chose...
Ca a l'air tout bête, je le vois à plusieurs endroits et pourtant j'ai toujours le même soucis : des divs imbriquées qui apparaissent en dehors de leur conteneur Smiley biggol

illustration :
upload/4823-divimbrique.png

les thumbnails sont imbriqués dans la div qu'on voit au dessus (fond gris, contour rouge). En voila le code, on ne peut plus simple :


<div id="espacephotos">
	<h2>Les 30 derni&egrave;res contributions</h2>
	<div class="reduction">
		<a href="index.php?p=voir&amp;img=2"><img src="upload/mini/2-coucher.jpg" alt="pouetpouet" /></a>
	</div>
	<div class="reduction">
		<a href="index.php?p=voir&amp;img=1"><img src="upload/mini/1-jardin.jpg" alt="pouet" /></a>
	</div>
</div>


et les styles correspondant :

#espacephotos { /* zone réservée à l'affichage des photos */
	background-color:#E2E2E2;
	border:1px solid #ff0000;
	margin-bottom:15px;
}
#espacephotos h2 {
	padding-top:5px;
	padding-left:10px;
}
.reduction{ /* style spécial pour l'affichage des photos réduites et des crédits */
	float:left;
	border: 1px solid #A5ACB2;
	height: 84px;
	width: 84px;
	padding:3px;
	margin:8px;
	color:#A09FA3;
	font-size: 0.6em;
	background-color: #f8f8f8;
}


j'ai essayé de mettre ça dans une page html vierge pour être sûre que ce n'est pas un autre style qui perturberait et ça fait pareil... pourquoi donc mes thumbnails ne restent-ils pas dans leur conteneur ? Smiley sweatdrop

merci d'avance pour votre aide Smiley smile
Modifié par wildmary (12 Apr 2006 - 13:38)
deja le float doit surement pas aider a fixer tout ca , et je pense qu'il te faut un :
position: fixed; dans le div "espacephotos"
++
Modifié par thedarkshaman (12 Apr 2006 - 12:52)
arg, shame on me, j'avais parcouru les tutos et cherché sur le forum, j'ai oublié la faq Smiley rolleyes

ça rejoint la solution que j'ai trouvé : <br style="clear:both" /> juste après les thumbnails... pour moi il s'agissait là de bidouille, au vu des explications apparemment pas...

thedarkshaman : en effet ça fait rentrer les éléments dans le conteneur mais ça fait déconner le positionnement de la div principale (par exemple, ne respecte plus le margin-bottom de la div au dessus, se colle à elle Smiley ohwell )

merci pour votre aide Smiley smile
wildmary a écrit :
arg, shame on me, j'avais parcouru les tutos et cherché sur le forum, j'ai oublié la faq Smiley rolleyes


Et tu as oublié de lire les règles du forum aussi, qui t'indiquent, entre autre, de marquer ton sujet résolu une fois ton problème réglé !
Smiley cligne Smiley smile
raaah j'vais y arriver !
j'avais lu seulement le post "comment utiliser les capacités du forum" et n'y avait rien vu à ce sujet Smiley sweatdrop
désolée pour ces ratages (et merci pour votre patience...), ça ira mieux la prochaine fois Smiley smile

J'en profite pour compléter ma solution, au cas où :
J'ai finalement utilisé la solution de overflow:auto; car l'astuce avec clear:both; ne fonctionnait pas avec IE :

#espacephotos { /* zone réservée à l'affichage des photos */
	background-color:#FFA349;
	border:1px solid #fff;
	margin-bottom:15px;
	margin-top:15px;
	[b]overflow:auto;
	width:100%;[/b]
}

Modifié par wildmary (12 Apr 2006 - 13:51)
Sujet clos
Aller à