Alignement vertical
RomainGA
Messages postés
110
Date d'inscription
Statut
Membre
Dernière intervention
-
Narwaoudi -
Narwaoudi -
Bonsoir,
un ami m'a demandé une page internet, il m'a donc envoyé la maquette du site qu'il voulait. Et j'ai donc commencé à le coder en sass. Mais je bloque à la fin:'(
il désire une Toolbar de ce style:
le fait est que je n'arrive pas je n arrive pas a gerer ni l'espacement entre les div, ni leurs alignement vertical.
Après plusieurs tentatives, le meilleur résultat que je puisse obtenir est:
j 'ai essayé de faire:
please help
un ami m'a demandé une page internet, il m'a donc envoyé la maquette du site qu'il voulait. Et j'ai donc commencé à le coder en sass. Mais je bloque à la fin:'(
il désire une Toolbar de ce style:
le fait est que je n'arrive pas je n arrive pas a gerer ni l'espacement entre les div, ni leurs alignement vertical.
Après plusieurs tentatives, le meilleur résultat que je puisse obtenir est:
j 'ai essayé de faire:
<div class="toolbar">
<div class="slogan">
<p>la passion du ping</p>
</div>
<div class="others">
<a href="#">notre boutique</a>
<a href="#">contact</a>
<a href="#">cgv</a>
</div>
</div>
.toolbar{
background-color: #446084;
width: 100%;
display: flex;
flex-direction: row;
color: white;
.slogan{
justify-content: flex-end;
}
.others{
color: white;
}
}
please help
A voir également:
- Alignement vertical
- Powerpoint vertical - Guide
- Barre vertical mac ✓ - Forum MacOS
- Trait vertical clavier - Forum Clavier
- Trait vertical sur écran tv samsung ✓ - Forum Téléviseurs
- Tiret vertical - Forum Windows
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).
