- Statut : non résolu
- Ce sujet contient 5 réponses, 1 participant et a été mis à jour pour la dernière fois par
, le il y a 12 années et 6 mois.
-
Messages
-
Bonjour,
Ma configuration WP actuelle :
– Version de WordPress : 3.4.1
– Version de PHP/MySQL : 5.1.3RC4-dev / 5.0.83
– Thème utilisé : TwentyTenDailyGood
– Extensions en place : Antispam Bee (2.4.3), Cimy Counter (1.1.1), Clean UP (3.00), Cookies for Comments (0.5.4), Daily Stat (1.4), Forum_wordpress_fr (3.1), WP-Memory-Usage (1.2.1), WP-Optimize (0.9.4)
– Adresse du site : http://additifstabac.free.fr
– Nom de l’hébergeur : Apache/ProXad [Apr 20 2012 15:06:13]Problème(s) rencontré(s) :
Bonjour, dans cet article je n’arrive pas à faire se succéder des photos et du texte. J’explique ce que je voudrais :
La page Augmentation annoncée du prix du tabac : les organisations mafieuses rassurées ! est une succession de texte de présentation de photos suivie des photos présentées.
On ainsi le schéma :
– texte de présentation
– photosLe tout devant former un block, et plusieurs block devant s’afficher les uns sous les autres.
Malheureusemnt, à l’affichage, comme les photos ne prennent pas exactement toute la largeur de la page, le texte, vient s’insérer à la droite des photos et non pas en dessous en changeant de ligne comme je le voudrais.
J’ai tenté beaucoup de manipulations, aucune n’a fonctionné, je suis désespéré.
J’explique ce que j’ai tenté :
– encadrer le texte+photo dans une < div > : n’a pas fonctionné,
– toujours la même div + balise < p > encadrant le texte seul : n’a pas fonctionné
– le même schéma < div > + < p >, mais cette fois-ci en précisanten esp’arant centrer les photos, cela ne centre pas les photos qui sont toujours à gauche du block et le texte à droite.
– toujours pareil avec en plus une balise < p style="text-align:center;width:100%" > encadrant le texte, cela ne change rien.Où se trouve l’erreur ?
Je tente par tous les moyens d’éviter de mettre une succession de balise < / br> après les photos (comme le préconise le CSS) mais je n’y arrive pas.
Au secours !
Je viens de tenter de mettre 2 class dans les balises block
, la première pour afficher le texte sur une ligne de 100% de large, la deuxième pour centrer les photos et ni l’une, ni l’autre ne sont prises en compte :
Qu’est-ce que je loupe ?
Bon, en testant toutes les possibilités possibles et imaginable, je suis arrivé à en trouver une qui fonctionne pour le texte qui se palce sur une ligne puis les photos etc :
le texte étant précédé de la balise
avec la class « bloc-ligne » précedemment définie.Il reste à centrer les photos !
Je ne sais pas s’il est seulement possible de centrer le block photo !
En effet, entre chaque texte de présentation, les photos sont insérées en les alignant à gauche.
Et il y en a 3 par ligne (car il n’y a pas la place pour y en avoir 4 tout simplement).
Ainsi, l’espace vide à droite de chaque ligne de photo est contenu dans le block. L’espace vide est donc un élément à part entière du bloc.Je crois que la seule possibilité serait de faire des blocks de 3 photos, mais du coup, cela complique beaucoup la mise en page HTML de l’article et empêchera la transportabilité de la page selon les thèmes WP (si je décide d’en changer, par ex).
Je voudrais pouvoir centrer les photos sans que l’on tienne compte de l’espace vide à droite. C’est à dire que cet espace vide se répartisse également du chaque côté des photos.
Je ne sais pas si cela est seulement possible avec le CSS ?
Quelqu’un a-t-il une idée ?
En tous cas, le problème posé dans le sujet du message est ✅
Je vais ouvrir un autre fil pour le deuxième problème.
Bon, je suis aussi arrivé à centrer les photos qui sont chacune alignées à gauche !
J’ai dû prendre la calculette :
Chaque miniature mesure 160×160 pixels.
En largeur, le short-code [ wp-caption ] ajoute 10px, soit 160 px.
Et s’ajoute à cela une bordure de 1px qui entoure chaque photo, ainsi, chaque photo a une largeur de 162px.Avec Firebug, j’ai vu que le block dans lequel sont placées les photos mesure 640px.
Or, il s’affiche 3 photos par ligne, donc 3×162 = 486px.J’ai créé une classe appelée centrer-photo de largeur 486px que j’ai simplement centrée.
Le code est le suivant :
il existe peut-être d’autres façons de faire plus simple, mais je ne les ai pas trouvées.
J’ai simplement ajouté dans chaque série de photo dans la page une balise
et je clos cette balise à la fin de la série.Ainsi, si je change de thème ou de dimension, je n’ai qu’un calcul à refaire. Je n’aurais pas modifier le code HTML de la page. C’est mieux que rien.
Je progresse en CSS, à force je vais y prendre goût ! :fouet:
✅
- Vous devez être connecté pour répondre à ce sujet.