Centrer un div dans un template Joomla

Version imprimable

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:

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:

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:

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

joomla.css

Code:

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?

06/08/2009, 20h57
Doki95

Salut,

Dans ton fichier joomla.css, si tu ajoutes à la class caption un margin: auto ?
07/08/2009, 00h12
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.
07/08/2009, 08h19
Doki95

Citation:

Envoyé par Macmillenium

@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 ;)
07/08/2009, 12h06
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:

1 2 <div><jdoc:include type="component" /></div>
Mais impossible de retrouver le HTML qui amène <table class="contentpaneopen">

Je reste perplexe...
07/08/2009, 12h15
Macmillenium
Citation:

Envoyé par RootsRagga

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 !

Citation:

Envoyé par RootsRagga

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:

1 2 .img_caption { margin:auto; }
Dans ton fichier CSS.
Pense à mettre à jour ta page pour qu'on puisse tester ;)

Je crois que ce que j'ai mis est bon :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .contentpaneopen{ /**/ width:100%; } .contentpaneopen fieldset{ padding: 5px; margin-bottom: 10px; width:100%; /**/ } .contentpaneopen .img_caption { /**/ margin:auto; } .caption { /**/ margin:auto; }
Les /**/ correspondent aux lignes que j'ai ajoutées ou modifiées.

Sinon, j'utilise effectivement Firebug (sans le maitriser), c'est avec lui que j'ai repéré le HTML du premier post.
Mais le HTML de la page affichée est créé de façon dynamique, à partir de index.php qui contrôle les inclusions.
Donc, avec Firebug, je vois que l'image est dans le tableau "contentpaneopen" mais, sur le fichier index.php, j'ai juste une ligne qui inclut ce tableau:

Code:

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

le HTML se trouve parmi les 4000 fichiers de Joomla!

Je ne pense pas que Firebug puisse me trouver le dossier dans ces conditions ?!? si ?

PS: ton site est superbe...bsartik!

08/08/2009, 13h23
Macmillenium

Ton code n'est pas chargé.
Es-tu sûr de travailler sur le bon fichier CSS ?