18008 sujets

Questions générales et questions de débutants

[Résolu] Sémantique CSS

Bonjour, je suis nouveau dans le codage et il y a encore quelques points avec lesquels j'ai encore du mal..
Je suis en train de suivre une formation et il y a un élément où je rencontre une difficulté.

Dans les lignes de codes suivantes, je ne comprends pas pourquoi il faut utiliser "text-align:center" sur le conteneur du titre et pas sur le titre lui-même. Selon moi cela devrait avoir le même effet. Alors que si nous écrivons la propriété "text-align:center" sur la titre, celui-ci se place sur la gauche de la page. (et pourquoi?)

De même je ne comprends pas pourquoi il faut utiliser la propriété "display:inline-block" sur l’élément ".Titre", car encore une fois pourquoi ne pas le placer sur le conteneur ?

Je distingue très mal l’intérêt d'utiliser un conteneur pour ce genre de situation.

Quelqu'un pourrait-il m'expliquer la logique, et le lien entre les conteneurs et le contenant ?



.Conteneur du titre{
    text-align : center;
    margin-bottom : 8rem; 
    
}

.Titre{
    text-align: center;
    font-size : 4rem;
    text-transform: uppercase;
    font-weight: bold;
    display: inline-block;
    background-image: linear-gradient(to right, #373737, #c0b283);
}



Merci,
Bonne journée à tous Smiley biggrin
Nexus
Bonjour,

Pour que tu comprennes bien les explications qu'on te fournira, il faut que tu postes le contenu HTML aussi. On ne sait pas à quelles balises sont rattachées les classes css.
Administrateur
Hello Nexus Smiley smile

Il n'y a pas vraiment de rapport avec la "Sémantique" dans ta question, mais on va tâcher de trouver des réponses quand même Smiley cligne

On va commencer par les bases qui vont être nécessaires à comprendre...

Episode 1 :
1- les éléments de type Bloc (comme les titres) occupent par défaut toute la largeur disponible dans le parent. C'est l'état de départ de ton élément .Titre (a priori, en devinant le code HTML)
2- les éléments de type En ligne n'occupent que la taille de leur contenu. C'est le cas de .Titre si tu lui appliques un display: inline-block;

Premier test : actuellement, tu devrais constater que l'arrière-plan en dégradé n'occupe que la taille du contenu du titre. Si tu enlèves la partie "display: inline-block", tu devrais voir que l'arrière-plan occupe toute la largeur du conteneur.

Episode 2 :
1- text-align: center a pour effet d'aligner le contenu *à l'intérieur* d'un élément.
2- Si cette propriété est appliquée sur un élément Bloc, on verra que son contenu sera centré dans le bloc (rappel : le bloc occupe toute la largeur du parent)
3- si cette propriété est appliquée sur un élément En ligne, elle n'aura aucun effet puisque l'élément En ligne n'occupe lui-même que la taille de son contenu

Deuxième test : pour constater notre hypothèse, tu devrais pouvoir supprimer le "text-align: center;" de .Titre qui ne devrait avoir aucun effet.

Conclusion :
- text-align: center; s'applique sur .Conteneur (qui est un Block) et va aligner ce qui se trouve à l'intérieur, à savoir .Titre (qui est En ligne)
- text-align: center; *pourrait* s'appliquer sur .Titre s'il était demeuré dans son état initial (Block) mais il a été transformé en display: inline-block *sans doute* pour éviter que le dégradé en arrière plan n'occupe toute la largeur du parent. Du coup, on devrait pouvoir ôter cette ligne sans regret.

CQFD ?
Modifié par Raphael (18 Apr 2020 - 12:41)
Meilleure solution
Sujet clos
Aller à