Discussion :

[RootsRagga]

Bonjour,

Je découvre Joomla et je m'essaie à faire un site


Mais je n'arrive pas à centrer les images en largeur.

L'image est placée dans le tableau suivant:

Code :

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

1
2
3
4
5
6
7
8
9
<table class="contentpaneopen">
<tbody><tr>
<td valign="top">
<div style="text-align: center;">
<div class="img_caption null" style="width: 381px;">
<img border="0" title="Et mon coeur saigna..." alt="Et mon coeur saigna..." src="/images/stories/galerie/et%20mon%20coeur%20saigne.jpg" class="caption"/><p>Et mon coeur saigna...</p></div></div>
</td>
</tr>
</tbody></table>

Les CSS s'y rapportant que j'ai trouvé:
template.css

Code :

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
/* contents */
#content-outer {
	float: left;
	width: 700px;
	margin: 0; padding: 0;
	background: #eadacb url(../images/content.jpg) repeat-y;
 
}
#content-wrap {
	float: left;
	width: 700px;
	background: url(../images/content-top.jpg) no-repeat;
	padding: 35px 0;	
 
}
 
.content {
	float:left;
	width:650px;
	margin-left: 25px;	
	display: inline;
}

systeme.css

Code :

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

1
2
3
4
5
 
.contentpaneopen fieldset{
	padding: 5px;
	margin-bottom: 10px;
}

joomla.css

Code :

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

1
2
3
4
 
div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #666; text-align: center; }

J'ai d'abord centré les images à l'aide de l'éditeur en back-end mais je pense qu'il doit être annulé par une CSS.

Vous avez une idée?

[Doki95]

Salut,

Dans ton fichier joomla.css, si tu ajoutes à la class caption un margin: auto ?

[Macmillenium]

Bonsoir,

Par défaut, un tableau s'adapte à la taille de son contenu.
Attribue un width:100% à .contentpaneopen et ensuite un margin:auto à .img_caption.

@Doki95 : margin:auto ne fonctionne que si le width est renseigné, ce qui n'est pas le cas pour images .caption.

[Doki95]

@Doki95 : margin:auto ne fonctionne que si le width est renseigné, ce qui n'est pas le cas pour images .caption.

J'étais quand même pas loin de la bonne réponse. Mais je te remercie pour cette info. J'ai encore beaucoup de chose a apprendre

[RootsRagga]

Merci pour votre aide,

J'ai mis un width:100% au tableau.
J'ai mis un margin:auto à l'image...
Mais rien n'y fait, l'image est toujours plaquée à gauche!

Ce template est joli mais vraiment mal fichu!

Pour régler le problème, je voudrais intervenir sur le HTML du corps de page.

Sur le fichier index.php du template grungea, ce corps de page est appelé par ce code :

Code :

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

1
2
 
	<div><jdoc:include type="component" /></div>

Mais impossible de retrouver le HTML qui amène <table class="contentpaneopen">

Je reste perplexe...

[Macmillenium]

J'ai mis un margin:auto à l'image...
Mais rien n'y fait, l'image est toujours plaquée à gauche!

Pas l'image mais son parent direct !

Mais impossible de retrouver le HTML qui amène <table class="contentpaneopen">

Il faut utiliser le add-on FF Firebug pour inspecter le DOM et pouvoir choper les classes générées par ton tpl.

Si tu as mis un width:100% sur le tableau, il ne reste plus qu'à copier :

Code css :

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

1
2
 
.img_caption { margin:auto; }

Dans ton fichier CSS.
Pense à mettre à jour ta page pour qu'on puisse tester