[RÉSOLU] Chapo à centrer...

nicomax · septembre 2014

Salutatous,

Le chapo des articles d'une de mes catégorie contient juste une image,
comment centrer uniquement le contenu de ce chapo, donc de cette image ?

J'arrive par contre à centrer le texte "Publié le ..." ainsi que le lien "Lire la suite de ..."

Merci de vos lumières

Pio154 · septembre 2014

Un petit text-align:center ? ou dans le css : .tonBlocArticle img { text-align: center; }
ou alors tu rajoutes du contenu en mode source (si tu utilises un éditeur) avec <p style="text-align:center;"><img src="" alt="" /></p>

joebart · septembre 2014

Avec le plugin de JE qui remplit très bien cette fonction : ICI

nicomax · septembre 2014

En fait ce que je souhaite c'est que :

1 / Pour l'affichage de ma catégorie (categorie-collection.php), ces trois éléments soient centrés horizontalement les uns en dessous des autres :

Image
Publié en ...
Lire la suite"

2 / Et que pour l'affichage des articles (article-collection.php), l'image soit alignéee à gauche du texte complet.
Pour ce second point pas de souci

Par contre pour le point 1,
je n'arrive toujours pas à centrer l'image en provenance de mon chapeau !

J'utilise le plugin CKEditor - Version 1.4.10 (01/02/2013) (CKEditor 3.6.4 + KCFinder 2.51) et effectivement avec ce plugin, dans le chapeau je peux centrer du texte mais pas l'image (le bouton Centrer se grise !)

Même en mode code dans CKEditor, si j'ajoute une classe à l'image, comme ceci :

[== HTML ==]
<p>
<img class="centrage-image" alt="nom image" src="http://www.site.com/data/images/image.jpg" style="width: 117px; height: 170px; margin-left: 10px; margin-right: 10px;" /></p>

j'ai bien sûr créé le style dans le fichier style.css, comme ceci :

[== CSS ==]
img.centrage-image {
    display: block;
    margin-left: auto;
    margin-right: auto
}

Et bien ça ne fonctionne pas !!!

Dans mon fichier categorie-collection.php j'ai bien ce code,
mais même en l'encadrant de balise de centrage, ça ne fonctionne pas non plus !

[== Indéfini ==]
<div class="post-content clearfix">
   <?php $plxShow->artChapo(); ?>
</div>

Je suis un peu largué là :rolleyes:

nicomax · septembre 2014

j'ai également essayé ceci SANS SUCCÈS :

Dans mon fichier style.css :

[== CSS ==]
#centragecontenu {text-align:center;}

Dans l'admin de Pluxml, dans le chapo de mon article, en mode source :

[== HTML ==]
<div id="centragecontenu">
<p>
<img alt="nom image" src="http://www.site.com/data/images/image.jpg" style="width: 117px; height: 170px; margin-left: 10px; margin-right: 10px;" />
</p>
</div>

nicomax · septembre 2014

Pour que cela soit plus pratique, je souhaiterai forcer le centrage du chapo,
non pas au moment de la rédaction de l'article (en mode source),
MAIS PLUTÔT au niveau de mon template "categorie-collection.php"...

je-evrard · septembre 2014

Pour les éléments de type block.

[== Indéfini ==]
#centragecontenu {
  margin-left: auto;
  margin-right: auto;
  width: ...; /* largeur obligatoire pour être centré */
}

nicomax · septembre 2014

ça marche pô !

dans mon fichier "categorie-collection.php", je sais que le chapo s'affiche grâce à ce bout de code :

[== PHP ==]
<div class="post-content clearfix">
   <?php $plxShow->artChapo(); ?>
</div>

Mais je n'arrive pas à lui appliquer le style "centragecontenu" déclaré dans ma feuille de style !
Je bloque... 8.(

Pio154 · septembre 2014

T'as vérifié avec les outils de développement de ton navigateur si le style n'était pas écrasé ? (file moi l'adresse de ta page)

Stéphane · septembre 2014

Peux-tu nous donner un lien pour voir ta page, car sinon on risque de chercher longtemps car ça dépend pas mal du thème utilisé et de ckeditor pour voir s'il n'ajoute pas du code ou des balises qui interfèrent avec tes règles css. Sans connaitre la structure html de ta page on peut te donner plein de solutions sans qu'elles fonctionnent.

nicomax · septembre 2014

Voici l'article en lui-même :
Lien fermé

Et voici la catégorie :
Lien fermé

Je souhaite que la présentation de l'article reste identique (image (déclarée dans le chapo) alignée à gauche du texte),
mais que pour la présentation de la catégorie, l'image, "Publié en ..." et + "d'infos" soient centrés.

Merci à vous...

Pio154 · septembre 2014

J'crois comprendre, il y a un float:left sur ton image, ça annule le text-align vu que flottant prend le dessus.
Il faudrait que tu rajoutes à ta feuille CSS et ta page catégorie spéciale une nouvelle classe pour ton DIV après post-content clearfix

De plus j'ai remarqué que le span aligncenter est mal placé, il ne devrait pas être avant une balise P ou DIV

(un container quoi)

[== CSS ==]
div.imgAlignCenterCategory p img { float: none; }

Ou voir si ça marche à mettre text-align: center; après float: none; sinon faire comme ci-dessous

[== HTML ==]
<div class="post-content clearfix aligncenter imgAlignCenterCategory">
<p>
 <img src="" alt="" />
</p>
</div>

nicomax · septembre 2014

Donc j'ai ajouté ceci dans "style.css" :

[== CSS ==]
div.imgAlignCenterCategory p img { float: none; }

et j'ai encadré $plxShow comme ceci dans "categorie-collection.php" :

[== PHP ==]
<div class="post-content clearfix aligncenter imgAlignCenterCategory">
	<?php $plxShow->artChapo(); ?>
</div>

>>> rien ne change !

Si je rajoute "text-align: center;" comme ceci :

[== CSS ==]
div.imgAlignCenterCategory p img { float: none; text-align: center; }

>>> ça ne centre pas l'image non plus

Si je vais dans l'admin, dans le champ du chapo, en mode code, que je supprime le "float: left;",
mon article s'affiche avec le texte sous l'image alors que je souhaite que l'image reste alignée à gauche du texte.

Et au niveau de la page catégorie, l'image de la couverture "Fleurs des vignes" reste toujours calée à gauche mais remonte légèrement par rapport aux autres !

Comment faire pour, dans l'article, garder l'alignement de l'image à gauche du texte,
mais que cette même image soit centrée dans la page catégorie ? :rolleyes:

Pio154 · septembre 2014

Ah oui pardon, mets plutôt float: none !important;
En fait le style CSS dans le HTML prime sur ta feuille, et normalement le important devrait prendre le dessus. (Mais apparemment ça ne marche pas non plus de ce que j'ai essayé avec les outils)
Ps: supprime la balise span ayant la classe aligncenter, elle ne sert plus à rien

nicomax · septembre 2014

l'image ne se centre toujours pas !

Pourtant au niveau Admin,
dans le champ du chapo, en mode code,
j'ai remis le "float: left;" puisqu'il devrait passer après le "!important" placer dans le style ci-après.

Ensuite dans le fichier "style.css" j'ai bien :

[== CSS ==]
div.imgAlignCenterCategory p img { float: none !important; text-align: center; }

Puis dans mon fichier "categorie-collection.php" j'ai :

[== PHP ==]
<div class="post clearfix">

	<div class="post-content clearfix aligncenter imgAlignCenterCategory">
		<?php $plxShow->artChapo(); ?>
	</div>


	<span class="aligncenter">
		<?php echo 'Publi&eacute; en ' . plxDate::formatDate($plxMotor->plxRecord_arts->f('date'), '#num_year(4)'); ?>
	</span>

	<span class="moreperso aligncenter">
		<a  title="suite" href="<?php $plxShow->artUrl('absolu'); ?>">+ d'infos</a>
	</span>

</div>

La date et le lien "+ d'infos" sont bien centrés... mais pô l'image !
Bigre... compliqué juste pour un centrage :rolleyes:

Pio154 · septembre 2014

MAIS BIEN SÛR ! ROFL, pardon.
Ta balise p, modifies ceci dans le css :

[== CSS ==]
div.imgAlignCenterCategory p img { float: none !important; }
div.imgAlignCenterCategory p { text-align:center; }

C'était parce qu'il y avait encore une fois, un alignement du texte sur ta balise P.

nicomax · septembre 2014

Hourra c'est centré

J'en aurais appris sur les css
Vraiment merci

[RÉSOLU] Chapo à centrer...

Réponses