IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Centrer un div dans un template Joomla


Sujet :

Centrer un élément en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    115
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 115
    Par défaut Centrer un div dans un template Joomla
    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?

  2. #2
    Membre éprouvé
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    167
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 167
    Par défaut
    Salut,

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

  3. #3
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    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.

  4. #4
    Membre éprouvé
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    167
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 167
    Par défaut
    Citation Envoyé par Macmillenium Voir le message
    @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

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    115
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 115
    Par défaut
    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...

  6. #6
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    Citation Envoyé par RootsRagga Voir le message
    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 Voir le message
    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

Discussions similaires

  1. Centrer une div dans un li
    Par baouk2000 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 10
    Dernier message: 16/03/2009, 19h18
  2. Comment centrer plusieurs div dans une page.
    Par solorac dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 20/11/2008, 14h06
  3. [FF vs IE] centrer un div dans un div
    Par bkadoum dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 09/12/2007, 15h02
  4. centrer un DIV dans IE. Comment faire?
    Par samsso2005 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 31/03/2006, 14h49
  5. [HTML] Centrer une DIV dans une autre
    Par graphicsxp dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 22/02/2006, 17h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo