[Resolu] Retour à la ligne du conteneur de div en float

Question

oblik35000

30 Nov 2007 à 22:59

Bonjour,

Je vous fait par de mon soucis pour l'affichage de produit dans un catalogue.

upload/14957-rendu.jpg

- Le conteneur a une largeur fixe;
- Il contient quatre div "famille" qui sont les familles de produit, en float left;
- Les div "famille" contiennent des div "produits" de largeur fixe, en float left aussi;
- Le nombre de famille et de produit à l'intérieur est dynamique donc considéré comme aléatoire.

Sous Firefox le rendu est celui souhaité, mais sous IE6/7 le bloc s'allonge à la verticale Smiley decu

.

J'ai beau essayé je ne trouve pas, je fait donc appel à la communauté. Smiley cligne

Voici le code source :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#container {
display:table;
background:#ddd;
width:600px;
}

.famille {
float:left;
margin:10px;
background:#666;
}

.produit {
float:left;
margin:10px;
width:100px;
height:100px;
background:#ccc;
}

</style>

</head>

<body>
<div id="container">

	<div class="famille">
		<div class="produit"></div>
		<div class="produit"></div>
		<div class="produit"></div>
		<div class="produit"></div>
	</div>


	<div class="famille">
		<div class="produit"></div>
		<div class="produit"></div>
		<div class="produit"></div>
	</div>
	
	<div class="famille">
		<div class="produit"></div>
		<div class="produit"></div>
	</div>
	
	<div class="famille">
		<div class="produit"></div>
		<div class="produit"></div>
	</div>
	
</div>
</body>
</html>

Modifié par oblik35000 (04 Dec 2007 - 19:57)

Heyoan

30 Nov 2007 à 23:30

Salut oblik35000 Smiley cligne

,

il me semble bien qu'IE ne reconnaisse pas ou mal le display:table... Ne s'agit-il pas d'un cas pour lequel un tableau serait LA bonne solution Smiley murf

?

A+

oblik35000

1 Dec 2007 à 00:01

Salut Heyoan,

Je ne crois pas que cela vient du display:table.
Il ne sert ici que pour l'exemple afin d'afficher le fond du conteneur sous firefox.

J'avais pensé également au tableau mais...

- comme Firefox me l'affichait correctement, je voulais savoir si il y avait un hack ou autre chose qui pouvait donner le même rendu.

- Je serais obligé d'utilisé un tableau par famille, et ma page pourrait contenir jusqu'à 30 familles, ce qui serait tres lourd pour ma page, et pour moi psychologiquement Smiley bawling

.

A+

Heyoan

1 Dec 2007 à 00:28

Ah oui, j'avais lu un peu vite Smiley fut

...

Sinon j'ai fait un petit test :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container {
background:#ddd;
width:630px;
overflow:auto;
padding:5px;
}
.famille {
clear:left;
margin: 0 10px 0 0;
}
.famille_droite {
float:left;
margin: 0 10px 0 0;
}
.produit {
float:left;
margin:10px;
width:100px;
height:100px;
background:#ccc;
border: 10px #666 solid;
}
</style>
</head>
<body>
<div id="container">
	<div class="famille">
		<div class="produit"></div>
		<div class="produit"></div>
		<div class="produit"></div>
		<div class="produit"></div>
	</div>
	<div class="famille">
		<div class="produit"></div>
		<div class="produit"></div>
		<div class="produit"></div>
	</div>
	<div class="famille">
		<div class="produit"></div>
		<div class="produit"></div>
	</div>
	<div class="famille_droite">
		<div class="produit"></div>
		<div class="produit"></div>
	</div>
</div>
</body>
</html>

Modifié par Heyoan (01 Dec 2007 - 00:51)

Akabane

1 Dec 2007 à 00:35

erf je venais avec casiment la meme solution ...En enlevant le display et en mettant l'overflow

oblik35000

1 Dec 2007 à 00:53

Heyoan,

Je ne peux pas attribuer une classe différente à la dernière famille, tout cela est géré en dynamique (j'avais oublié de le préciser je te demande de m'excuser). Sinon pourquoi rajouter un border ?

Akabane,
Le resultat est le meme en replacant le display:table par overflow:hidden Smiley decu

CPascal

1 Dec 2007 à 01:01

Salut,

moi pour placer des div comme ça quand je connais les dimensions j'utilise les positions relative et absolute.

y a du calcul mathématique certe. mais je trouve ça plus "stable" que les floattants.

enfin je crois que c'est aussi une question de gout.

oblik35000

1 Dec 2007 à 01:09

CPascal,

Je ne connais pas les dimensions de mes div "famille" c'est géré dynamiquement Smiley sweatdrop

La j'ai repris le problème dans un exemple mais le nombre de produit à l'intérieur est inconnu...
Modifié par oblik35000 (01 Dec 2007 - 01:12)

Heyoan

1 Dec 2007 à 01:33

oblik35000 a écrit :
Sinon pourquoi rajouter un border ?

Pour ne pas avoir à s'occuper d'un éventuel problème de fusion des marges Smiley cligne

...

Sinon c'est un peu "tordu" comme mise en page Smiley murf

... surtout le fait de ne pouvoir utiliser qu'une classe "famille" et d'avoir un comportement particulier si une famille ne comporte que 2 produits (placement inline avec un margin)...

Par ailleurs que doit-il se passer si une famille comporte plus de 4 produits ? Un scroll horizontal ? autre ?

Akabane

1 Dec 2007 à 01:37

Je pense qu'il n'a pas de cas à plus de 4 d'ou cette conception (enfin je suppose) sinon tu n'as plus qu'a revoir un autre systeme de mise en page. Le scroll horizontal c'est bien pour des portfolios originaux mais pour le genre de site que tu cherches à réaliser ... pas dit ^^

oblik35000

1 Dec 2007 à 01:45

Ce n'est pas tordu.

Tous les produits et familles sont générés dynamiquement, je ne peux donc pas choisir si tel ou tel famille aura une classe particulière.

Au cas ou il y a plus de quatre produits, le 5me et suivant retourne à la ligne ce n'est pas un problème, du moins sous firefox. Etant donné que le bloc conteneur (#container) a une largeur fixe. Vous pouvez faire le test avec l'exemple que j'ai mis à disposition.
Modifié par oblik35000 (01 Dec 2007 - 01:47)

ghost

1 Dec 2007 à 09:28

Salut,

Si tu ne donnes pas de width: 100% à ton bloc famille, IE à tendance à faire n'importe quoi, pour approcher la mise en page souhaitée, il sera peut être nécessaire d'ajouter un <div> de plus.
Une piste:


<div id="container">
	<div class="famille">
		<div class="cadre_produit">
		<div class="produit"></div>
		</div>
		<div class="cadre_produit">
		<div class="produit"></div>
		</div>
		<div class="cadre_produit">
		<div class="produit"></div>
		</div>
		<div class="cadre_produit">
		<div class="produit"></div>
		</div>
		<div class="cadre_produit">
		<div class="produit"></div>
		</div>
		<div class="cadre_produit">
		<div class="produit"></div>
		</div>
	</div>

	<div class="famille">
		<div class="cadre_produit">
		<div class="produit"></div>
		</div>
		<div class="cadre_produit">
		<div class="produit"></div>
		</div>
		<div class="cadre_produit">
		<div class="produit"></div>
		</div>
	</div>

	<div class="famille">
		<div class="cadre_produit">
		<div class="produit"></div>
		</div>
		<div class="cadre_produit">
		<div class="produit"></div>
		</div>
	</div>

	<div class="famille">
		<div class="cadre_produit">
		<div class="produit"></div>
		</div>
		<div class="cadre_produit">
		<div class="produit"></div>
		</div>
	</div>

</div>

#container {
overflow: hidden;
background:#ddd;
width:580px;
padding: 0 10px 0 10px;
}

.famille {
width: 100%;
float:left;
padding:10px;
}

.cadre_produit {
float:left;
width:120px;
height:120px;
background:#666;
}

.produit {
margin:0 auto;
margin-top: 10px;
width:100px;
height:100px;
background:#ccc;
}

oblik35000

1 Dec 2007 à 12:06

Salut ghost,

Cela ne résoud malheureusement pas mon problème. Je ne souhaite pas qu'une famille par ligne, donc pas de width:100%.

Le but est que :
- si 2 bloc "famille" ont une largeur inférieur à 50% (soit 1 ou 2 bloc produit à l'intérieur), ils se retrouvent côte à côte.
- si le bloc suivant est plus long, il retourne à la ligne.

Comme sur l'image de mon 1er post.

Firefox le fait super bien pourtant... IE fait allonger le bloc verticalement. Smiley ohwell

Modifié par oblik35000 (01 Dec 2007 - 12:08)

fvsch

1 Dec 2007 à 18:00

oblik35000 a écrit :
Firefox le fait super bien pourtant... IE fait allonger le bloc verticalement.

C'est que le comportement des flottants dans IE est un peu bugué. Cf. cette page:
http://web.covertprestige.info/test/15-organiser-serie-de-flottants-en-colonnes-1.html

CPascal

1 Dec 2007 à 18:28

Re,

comme je disais au-dessus quand on aime les math on aime les math.

absolute et relative n'empeche pas le dynamisme, loin de là.
je les ai utilisée dans des appli php ou j'ai des tripotés de div a position indeterminé. ( mais calculable )

si on reprends ton exemple de base. on voit bien que si je mets une height de 120px a ta classe famille ( les 100 de base plus 20 de la marge)
on obtient déjà un résultat plus proche de FF. si on met un width de 240px a la troisieme famille c'est good.

donc en gros moi ce que je ferais:
1/ obtenir le nombre de produits de la famille en lisant dans la base. ( j'imagine que tu as une bases de données)
2/ j'en déduis la largeur qui va bien
3/ quand je génére mes div famille dynamique. je leur attribue un style='width:xxxpx' ou xxx est la largeur qui va.

finalement je n'ai même pas besoin de rajouter des positions ni relative ni absolute et ca pourrait bien marcher.
Modifié par CPascal (01 Dec 2007 - 18:34)

oblik35000

2 Dec 2007 à 12:23

Oui exact si on peut determiner la largeur du bloc famille on arrive au résultat souhaité.
Je trouve ca un peu compliqué pour juste un bug de rendu sous IE.
Je n'ai aucune notions en javascript ni php alors les calculs comme cela, j'en suis incapable. Smiley sweatdrop

J'ai testé la solution de faire un tableau pour chaque famille, qui marche bien malgré que ce ne soit pas la plus recommandée (?)

Je reste la-dessus pour l'instant...

Merci à vous tous Smiley biggrin

Sujet clos

CSS et mise en forme, CSS3

[Resolu] Retour à la ligne du conteneur de div en float