27314 sujets

CSS et mise en forme, CSS3

Bonjour,
J'utilise un cms avec un extension agenda. Je souhaiterai améliorer la présentation de l'affichage d'un événement sans modifier le layout en php (ce que suggère le développeur).
Pouvez-vous me dire comment mettre en css les 2 éléments en colonne et non à la suite (cf image jointe upload/1574935368-58614-dpcalendareve-alignement-img.jpg ) en regardant un événement https://www.onsort.eu/fr/agenda/samedi-biodanza-vivre-debout-entre-terre-et-ciel
Bonne journée
Modifié par HDcms (28 Nov 2019 - 11:02)
Bonjour,
Voici le css :

..com-dpcalendar-event {
display: flex; flex-wrap: wrap;}

.com-dpcalendar-event, .com-dpcalendar-event__header {
width: 50%;}

A voir maitnenant comment est géré l'ajout de style dans le css et si besoin préciser d'avantage les sélecteurs

Bien à vous
Bonjour
merci d'avoir répondu. Cela n'a pas fonctionné directement mais à après j'ai réussi avec ce code
.com-dpcalendar-event {
display: flex; flex-wrap: wrap;}
.com-dpcalendar-event__information, .com-dpcalendar-event__header {
width: 50%;}

car si je comprends le bloc avec titre et l'image, c'est .com-dpcalendar-event__header
et le blog avec les infos complémentaires, c'est .com-dpcalendar-event__information

L'effet de bord, c'est qu'une tant que membre connecté, il y a d'autres boutons qui apparaissent sur la droite (voir l'image) et le code html du rendu (en tant que connecté) si ça aide car cela devient plus compliqué. J'ai donc du abandonné cette piste car plusieurs cas à gérer.

J'avai un 2ème point à aborder pour améliorer l'ergonomie de l'affichage.
En effet le layout du développeur tronque les libellés des champs.
Exemple sur l'image: "catégorie them..." pour "catégorie thematique"
J'ai cherché du coté css3 à after: mais je ne suis pas sûr de pouvoir faire quelques chose.
L'idée serait soit d'allonger la colonne ou mieux faire un retour à la ligne car comme cela jen'ai plus à me retrouver dans d'autres cas.
Bonne journée
Bonjour,

Content que votre premier point soit résolu.
Pour votre seconde demande, vous pouvez augmenter la taille de l'élément dp-description__label.
Il est mis à 160px donc, il est caché mais si vous augmentez la taille ça devrait régler le problème (jusqu'à ce que vous ayez un mot trop long comme vous dites)
Pour le remettre à la ligne :

.com-dpcalendar-event .dp-description__label {
float: none;
}
.com-dpcalendar-event .dp-description__description {
margin-left: 0;
}

Bien à vous
Modifié par Gus (29 Nov 2019 - 12:15)
Meilleure solution
Bonjour,
Ok cool, j'ai adapté aux 2 cas différents.
Plus simple que je pensais après l'aide!
Merci
Bonne journée