Problème d'affichage des divs

[DiidY78]

Bonsoir à tous,

Voici mon problème :

Je suis entrain de travailler sur l'affichage d'un catalogue sous le plugin e-commerce de wordpress. Mais petit problème ... Ma div principal (zone ici 'pink') qui doit contenir mes produits sous forme de block n'en contient seulement deux et les autres sont chassées de la principale que faire ?

Aperçu :



Comment j'ai procédé pour l'instant :

J'ai déclaré chaque block produit par une span qui contient l'aperçu, une balise h1 pour le titre, et une balise p pour la description avec un float left le tout pas en ID="" mais en Class=""

Mon code CSS :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/* CONFIG CATALOGUE */
 
span.l-produits-catalogue {
	position: relative;
	top: 0;
	right: 0;
	float: left;
	height: auto;
	width: 310px!important;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 18px;
	margin-right: 18px;
	border: 1px solid #CF5788;
	padding: 10px;
}
 
.l-produits-catalogue img {
	display: block;
	float: left;
	max-height: 130px!important;
	max-width: 70px!important;
	margin-right: 10px;
}
 
.l-produits-catalogue h2 {
	float: none;
	height: auto;
	font-family: Myriad pro;
	font-size:14px;
	font-weight: normal;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	color: #CF5788;
	text-transform: uppercase;
	font-variant: normal;
}
 
a.titre-l-produits-catalogue {
	float: none;
	height: auto;
	font-family: Myriad pro;
	font-size: 14px;
	font-weight: bold;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	color: #CF5788;
	text-transform: uppercase;
	font-variant: normal;
}
 
a.titre-l-produits-catalogue:hover {
	float: none;
	height: auto;
	font-family: Myriad pro;
	font-size: 14px;
	font-weight: bold;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	color: #CF5788;
	text-transform: uppercase;
	font-variant: normal;
}
 
.l-produits-catalogue p {
	float: none;
	height: auto;
	width: 100%;
	font-family: Myriad pro;
	font-size:14px;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 0;
	color: #000;
	text-align:justify!important;
}
 
span.lien-l-produits-catalogue {
	float: right;
	margin-left: 20px;
	font-family: Myriad pro;
	color: #CF5788;
	margin-top: 10px;
}
 
span.c-text-produits-catalogue {
	width: 210px;
	float: left;
	padding-left: 10px;
	margin-left: 10px;
}

Mon code simplifié :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
			<span class="l-produits-catalogue product_view_<?php echo wpsc_the_product_id(); ?> <?php echo wpsc_category_class(); ?>">      
							<a href="<?php echo wpsc_the_product_permalink(); ?>">
									IMG
							</a>		
				<span class="c-text-produits-catalogue">
						<h2>
								<a href="<?php echo wpsc_the_product_permalink(); ?>" class="titre-l-produits-catalogue" >
									TITRE
								</a>
						</h2>
						<p>DESCRIPTION</p>						
				</span>
			</span>

Quelqu'un aurait-il une solution ?

Merci d'avance à vous.
Adrien.

[Tsilefy]

Tu as un lien?

[e-fitz]

Bonsoir,

a vue d'oeil cela ressemble à un problème de float (non "fermé", mal interpreté (ou plutot qui ne correspond pas a ce que l'on desire faire)...).

Mais cela peut venir de beaucoup d'autre chose,
donc je confirme un lien serait le bienvenue, dans le pire des cas le code généré complet + le code générant.

Bonne soirée

ps: tu peux essayer (à tout hazard), pour tester, de mettre un <br style="clear:both; margin-bottom:-1px; padding-bottom:1px" /> après le dernier span de produit et aprés le conteneur de ces span.

[DiidY78]

Bonjour à vous deux,

@e-fitz, @Tsilefy donc pour le lien => http://mod1.e-fc2.fr/?page_id=4

@e-fitz je test de suite te dit si ça fait un bon truc ou pas

EDIT : Cela me met tout sur une seule colonne

[e-fitz]

Bonjour,

j'ai des droles de choses qui ne correspondent pas à ton screenshot.

La zone que tu appelles pink est laquelle sur mon screenshot ?


Edit : j'ai oublié le lien de l'image : http://img94.imageshack.us/img94/7366/screengmf.jpg

[DiidY78]

@e-fitz Bien moi je t'avoue que sa m'affiche ça maintenant je viens de faire tellement de modifications que je pourrais pas te dire comment j'ai fait mais ça marche http://img810.imageshack.us/i/sanstitre4jq.jpg/

[e-fitz]

Bonjour,

je dirais qu'une chose, tant mieux si ca marche !

Enfin, j'en rajoute une autre, ca serait bien que tu comprennes pour ne pas avoir les mêmes problèmes ailleurs ^^

[DiidY78]

@e-fitz Sachant que j'en est 20 autres a faire avec la même mise en page mais Template différent je penses que j'aurais compris au bout du 15eme :$

[e-fitz]

Je pense que tu as fait à peu près ce que je t'ai dis sans t'en rendre compte.

L'idée est de bien penser à terminer tes float sinon ils ne "re"rentrent pas dans le flux et forcement le conteneur ne prend pas la bonne taille.