Haestan
Bonjour à tous !
J'suis nouveau ici et ça m'embête de commencer directement par un post comme celui-là !
Donc par politesse je me dis que je dois me présenter un peu :)
Ludo, 29 ans et en pleine formation pour devenir dev web. La route est longue je sais, mais j'espère qu'à mon âge c'est pas trop tard !
Je suis actuellement en pleine formation HTML5 et CS3S3. Je pars pas spécialement de zéro, je baigne depuis longtemps dans l'informatique. Donc j'avance à un rythme assez correct. Je fais beaucoup de veille techno depuis bien longtemps, donc je suis habitué aux termes du web.
Seulement voilà, comme je suis encore débutant dans le codage (les débutants sont acceptés ici ? J'veux pas vous faire chier moi ^^) j'ai un gros problème de compréhension du positionnement des blocs.
J'ai suivi pas mal de fois le tuto de Grafikart sur les flexbox et ça m'a sauvé la vie. Merci encore.
Donc voilà l'idée. Je prépare un site perso pour bidouiller et me familiariser avec le codage.
Je souhaite avoir une barre en haut du site qui occupe toute la longueur et une certaine hauteur. On est d'accord par défaut un bloc occupe tout l'espace dispo ? Donc je mets pas de "witdh" sur la div.
Maintenant je veux mettre mon nom à gauche puis mon menu à droite. Donc pour chaque chose j'ai un DIV dans le bloc header, j'entoure d'une couleur pour essayer de comprendre comment bouge les blocs mais voici ce que j'obtiens
CODE HTML
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ludovic WEBER</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:300,400,700" rel="stylesheet">
</head>
<body>
<div id="header">
<h1>Ludovic WEBER</h1>
<nav class="nav-header">
<ul>
<li><a href="#">ACCUEIL</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
<script src="js/main.js"></script>
</body>
</html>Puis le CSS
body
{
padding: 0;
margin: 0;
color: white;
font-family: 'Saira Extra Condensed', sans-serif;
}
#header
{
display: flex;
align-content: center;
justify-content: space-between;
background-color: grey;
height: 150px;
}
h1
{
background: green;
margin-left: 10%;
}
nav
{
background: yellow;
margin-right: 10%;
width: 30%;
font-size: 25px;
}
a
{
color: white;
}
ul
{
display: flex;
justify-content: space-around;
align-content: center;
}
li
{
list-style: none;
}Maintenant place aux questions stupides ...
Pourquoi mon bloc jaune (donc nav) se comporte comme ça ?
Pourquoi il prend toute la hauteur du parent (div header) alors que le H1 lui même ne prend pas toute la hauteur ?
Pourtant le h1 lui aussi fait parti du div header non ? Du coup il devrait se comporter tous de la même façon ?
J'suis vraiment désolé pour les questions connes comme ça... ça doit vous paraître tellement bateau !
Merci d'avance pour votre aide !
Ludo
2 réponses
Pour que dans ton bloc parent, tous les éléments ce centre, il vaut mieux utiliser ce qui suit (1). Actuellement, tu ne centre que le contenu ce qui ne fonctionne pas forcément. Et si tu veut que les blocs fassent toute la hauteur du bloc parent ce sera la solution 2. Je pense que ceci devrait t'aider aussi !
/* (1) */
#header {
align-items: center;
}
/* (2) */
#header {
align-items: stretch;
}Ensuite, le h1 a, de base, des marges de tous les côté, il faut donc faire un petit :
h1 { margin: 0; padding: 0; margin-left: 10%; }Voilà... en espérant t'avoir éclairé un peu ^^ !
Bienvenue dans le développement web, ou tu vas découvrir les margin et les padding et toutes les embrouilles qui viennent avec ^^
Pour supprimer les comportements des navigateurs (car chaque navigateur à sa feuille de style interne), tu peux utiliser un petit hack nommé reset.css (pas forcément apprécié par tout le monde) https://meyerweb.com/eric/tools/css/reset/, mais ces quelques lignes de CSS permettent de mettre tous tes élements au même niveau et ainsi le plus souffrir des problèmes de marge