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;
}
http://hpics.li/99d891e
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