28172 sujets

CSS et mise en forme, CSS3

Alignement simple CSS Wordpress

Bonjour !

Je suis novice et en train de bricoler un site sur Wordpress.
J'aimerais faire une mise en page très simple mais je pense que je ne la fais pas correctement car cela ajoute beaucoup de code sur le contenu.

Voici ce que j'aimerais obtenir :
upload/1575229505-16605-1575126296-16605-sanstitre-1.jpg

Mon texte s'étend sur 50% de la fenêtre, les images sont au centre de la fenêtre, les crédits de l'image sont en dessous de l'image, alignés au bord gauche de l'image.

Voici comment j'ai procédé :
Pour chaque post, j'édite le contenu en ajoutant des class à chaque partie de texte entre les images afin qu'elles soient à 50% de la fenêtre et des class à chaque image pour qu'elles soient au centre. Pour que les crédits de l'image soient alignés au bord gauche, j'ai mis le tout dans une div et c'est elle qui est centrée.

J'ai essayé de mettre simplement tout le post à 50% de la fenêtre mais alors je n'arrive pas à centrer les images sur la fenêtre.

Help !
Modifié par Benoit / (01 Dec 2019 - 20:54)
Bonsoir,
Effectivement, tu surcharges inutilement en mettant des classes à chaque élément.
Ces éléments sont déjà identifiables de façon générale ; à priori ce que tu cherches devrait se faire avec un simple:

figure{
float: none;
margin: auto;
}

(si ton thème est bien conçu, <figure> contient l'image et son texte propre (<figcaption>)
et pour le texte:
p{margin-right:50%;}


Tu ne dis pas si tu veux appliquer cela à une page ou aux articles de ton site.
Tu peux mettre ces codes dans le menu de personnalisation en précisant l'id de la page visée (que tu trouves avec l'inspecteur dans <body ...page-id-XXXX...>) ou bien la classe .post par exemple (qui peut toutefois ne pas fonctionner si tes articles sont affichés par une extension).
Modifié par Philiga (27 Dec 2019 - 18:35)
Sujet clos
Aller à