Alignement vertical
Fermé
RomainGA
Messages postés
110
Date d'inscription
mardi 4 juillet 2017
Statut
Membre
Dernière intervention
19 mai 2024
-
27 nov. 2021 à 19:07
Narwaoudi - 29 nov. 2021 à 05:25
Narwaoudi - 29 nov. 2021 à 05:25
1 réponse
salut,
il y a une erreur dans votre CSS, chaque règle(jeu de règle) doit être correctement indiqué entre les accolades après son sélecteur.
On peut voir rien qu'à l'indentation que ça ne va pas, .slogan et .others sont des classes au même titre que .toolbar et ne peuvent pas être incluses l'une dans l'autre.
Si vous utilisez la console du navigateur ce genre d'erreur est vite remarquée car il y aura une notification sur les erreurs CSS.
Ensuite une fois corrigé vous utilisez des comportements flex qui indiquent un jeu d'éléments qui doivent avoir la même taille. Ce qui ne semble pas le cas sur la mise en page que vous montrez donc pas vraiment adapté ici.
Le plus simple est d'utiliser les dimensions et marges avec un comportement inline(display) pour décaler en proportion et par rapport à son prédécesseur.
Par exemple :
ps: les DIV ne sont pas à utiliser pour les contenus qui ont du sens(voir la sémantique HTML5 et le WAI )
ps2: il existe plein d'autres façon de gérer le positionnement. Les marges c'est quand même la base et le plus simple. J'ai supprimer ici les éléments superflus pour regrouper en une entité car le texte "La passion du ping" est bien relatif (ou en tout cas va avec) les liens qui le suivent = c'est plus rapide à écrire et lire(et donc modifier) et plus proche du sens/structure de cet élément dans la page(où dans votre modèle initial le titre et les liens sont 2 éléments dans un container différent).
il y a une erreur dans votre CSS, chaque règle(jeu de règle) doit être correctement indiqué entre les accolades après son sélecteur.
On peut voir rien qu'à l'indentation que ça ne va pas, .slogan et .others sont des classes au même titre que .toolbar et ne peuvent pas être incluses l'une dans l'autre.
Si vous utilisez la console du navigateur ce genre d'erreur est vite remarquée car il y aura une notification sur les erreurs CSS.
Ensuite une fois corrigé vous utilisez des comportements flex qui indiquent un jeu d'éléments qui doivent avoir la même taille. Ce qui ne semble pas le cas sur la mise en page que vous montrez donc pas vraiment adapté ici.
Le plus simple est d'utiliser les dimensions et marges avec un comportement inline(display) pour décaler en proportion et par rapport à son prédécesseur.
Par exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<style type="text/css" rel="stylesheet">
#slogan{
border:1px dashed red;
display:inline;
width=70%;
margin-left:20%;
padding-right:39%;
}
.lien-menu{
padding-left:1%;
}
</style>
</head>
<body>
<article id="menu">
<h4 id="slogan">La passion du ping</h4>
<a href="#" class="lien-menu">notre boutique</a>
<a href="#" class="lien-menu">contact</a>
<a href="#" class="lien-menu">cgv</a>
</article>
</body>
</html>
ps: les DIV ne sont pas à utiliser pour les contenus qui ont du sens(voir la sémantique HTML5 et le WAI )
ps2: il existe plein d'autres façon de gérer le positionnement. Les marges c'est quand même la base et le plus simple. J'ai supprimer ici les éléments superflus pour regrouper en une entité car le texte "La passion du ping" est bien relatif (ou en tout cas va avec) les liens qui le suivent = c'est plus rapide à écrire et lire(et donc modifier) et plus proche du sens/structure de cet élément dans la page(où dans votre modèle initial le titre et les liens sont 2 éléments dans un container différent).
