Discussion :

[flosouillard]

Bonjour à tous,

Je rencontre un petit problème.

J'aimerais centrer les vignettes (de l'image ci dessus) 2 à 2.

Voici mon code :


et le CSS :


Merci d'avance pour votre aide.

[vermine]

Bonjour,

A la place de faire des images de votre code, vous pouvez copier/coller votre code ici entouré des balises [ code ] le code [ /code ] (sans les espaces).

Et donc [ code=html ] le code HTML [ /code ].
Ou [ code=css ] le code CSS [ /code ].

[flosouillard]

Voila mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!-- Subcategories -->
		<div id="subcategories">
			<ul id="subcategorie_list"class="clear">
			{foreach from=$subcategories item=subcategory}
				<li>
					<div class="center_block">
					<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="category_img_link" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
						{if $subcategory.id_image}
							<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category')}" alt="" width="{$categorySize.width}" height="{$categorySize.height}" />
						{else}
							<img src="{$img_cat_dir}default-category.jpg" alt="" width="{$categorySize.width}" height="{$categorySize.height}" />
						{/if}
					</a>
					<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
					</div>
				</li>
			{/foreach}
			</ul>
			<br class="clear"/>
		</div>

Et mon CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
/* category.tpl */
ul#subcategorie_list { margin-top: 2em; list-style-type: none }
ul#subcategorie_list li { height: 200px; margin: 0 10px; padding: 0 0 12px; width: 270px; border-bottom: 1px solid #ddd; float:left }
div.cat_desc { margin: 0 1em }
ul#subcategorie_list li a { font: bold 12px Arial, Helvetica, sans-serif; color:#5d717e; text-decoration: none}
ul#subcategorie_list a.category_img_link { 
    -khtml-border-radius:5px;
	-ms-border-radius:5px; 
	-o-border-radius:5px; 
	-moz-border-radius:5px; 
	-webkit-border-radius:5px; 
	border-radius:5px;
	-khtml-box-shadow:rgba(0,0,0,0.3) 0 2px 3px;
    -ms-box-shadow:rgba(0,0,0,0.3) 0 2px 3px; 
	-o-box-shadow:rgba(0,0,0,0.3) 0 2px 3px; 
	-moz-box-shadow:rgba(0,0,0,0.3) 0 2px 3px; 
	-webkit-box-shadow:rgba(0,0,0,0.3) 0 2px 3px; 
	box-shadow:rgba(0,0,0,0.3) 0 2px 3px;
	float : left
	}
 
ul#subcategorie_list a.category_img_link img { vertical-align: bottom }
 
ul#subcategorie_list li div.center_block {
	position:relative;
	text-align:center
}
 
ul#subcategorie_list li div.center_block img:hover { filter: Alpha(opacity=10);-moz-opacity:.1;opacity:0.6 }

Entre temps, j'ai obtenu une réponse sur un autre forum.
J'avais fait une erreur de calcul de la largeur du bloc encadrant mes li.