Grid CSS - code manquant

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Grid CSS - code manquant

Message par L'ange noir Mar 4 Jan 2022 - 12:59

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome, Opera
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://vampires-kingdom.forumactif.com/

Description du problème

Bonjour et bonne année à tous,

Pour ceux qui suivent mes aventures de codeuses, j'ai terminé l'édition d'avril et me voilà à refaire cette de l'année dernière pour qu'elle soit lisible. Une grid css classique, j'arrive à maîtriser maintenant mais me voilà face à un nouveau défi pour lequel je n'ai trouvé aucune explication de codage dans le grid css.

Je vous joins la capture d'écran :

Capture écran:

En fait, c'est la partie où il est écrit : Edition spéciale. C'est à la fois penché et en même temps ça mord sur deux lignes, celle où est écrit le titre du journal et celle d'en dessous. Sans compter la date dans l'angle. Et là, je ne vois pas du tout comment faire pour créer cet effet avec du code grid css.

Merci par avance pour votre aide.
L'ange noir

L'ange noir
****

Messages : 294
Inscrit(e) le : 17/05/2016

Voir le profil de l'utilisateur https://vampires-kingdom.forumactif.com/
L'ange noir a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Grid CSS - code manquant

Message par Oka.mi Mar 4 Jan 2022 - 18:03

Bonjour,

Pour cela, je vous invite à découvrir la propriété "transform" et plus précisément la fonction rotate : https://developer.mozilla.org/fr/docs/Web/CSS/transform-function/rotate()
Et pour que les coins ne dépassent pas du cadre, il faut ajouter un overflow: hidden au cadre en question : https://developer.mozilla.org/fr/docs/Web/CSS/overflow


Grid CSS - code manquant 1213Donnez un titre explicite Grid CSS - code manquant VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Grid CSS - code manquant 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Grid CSS - code manquant FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2776
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Grid CSS - code manquant

Message par L'ange noir Mar 4 Jan 2022 - 18:35

Merci Oka.mi. Me revoilà plongé dans les études. Very Happy Very Happy

Et c'est parti....
L'ange noir

L'ange noir
****

Messages : 294
Inscrit(e) le : 17/05/2016

Voir le profil de l'utilisateur https://vampires-kingdom.forumactif.com/
L'ange noir a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Grid CSS - code manquant

Message par L'ange noir Mer 5 Jan 2022 - 14:26

Bonjour,

J'ai terminé d'étudier ce que tu m'as donné. J'ai appliqué le code suivant :

Code:
.edition
{background-color:blue;
 grid-area:edition;
 transform: rotate(-45deg);
width:150px;}

Et ça fonctionne parfaitement. Je n'ai pas eu besoin d'utiliser l'overflow par contre. Le contenant dépasse naturellement. J'ai ajouté un width pour qu'il ne sorte pas du cadre.

Voilà, merci encore pour ton aide. Sujet résolu.
L'ange noir

L'ange noir
****

Messages : 294
Inscrit(e) le : 17/05/2016

Voir le profil de l'utilisateur https://vampires-kingdom.forumactif.com/
L'ange noir a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum