Remonter deux blocs avec flexbox

Sujet résolu

27 août 2021 à 18:15:52

Bonjour à tous, alors voilà, je fais le site du cours sur css et html, vers la fin, et j'ai un bug dont je ne trouve pas la solution:

Deux blocs dans un conteneur, l'un à côté de l'autre, qui ne sont pas exactement alignés, l'un est plus haut que l'autre.

Voilà mes codes html et css, merci d'avance!

<!DOCTYPE html>

<head>
	<meta charset="utf-8">
     <link rel="stylesheet" href="totaltest.css">
</head>
<html>
<body>

<header>

			<div id="conteneur1">
				
				<h1 class="titre1">Voici un grand titre!</h1>
	
	<nav class="menu1">
		<a href="codetest.html">Acceuil</a>
		<a href="codetest2.html">Blog</a>
		<a href="project1.html">Contact</a>
	</nav>
</div>

</header>






<div id="pont">
	<img src="images/sanfrancisco.jpg" alt="bannière" title="Bienvenue!"/>
</div>


</body>
</html>

#conteneur1
{
	display: flex;
}


.titre1
{
	border: black 3px solid;
	width: 350px;
	height: 60px;
}


.menu1
{
	border: black 3px solid;
	height: 60px;
	width: 200px;

}

zvheer

27 août 2021 à 18:31:59

Tu dis beaucoup sauf quelle est le bug en queston ? la ce que ton code doit faire c'est mettre h1 et nav cote a cote et c'est tout. Il mettra une bordure sur le h1 et nav ainsi que les dimensions que tu leurs a donné je ne sais pas quel est le bug ?

yasakani no magatama

Lord Morpheus

27 août 2021 à 18:54:08

Bonsoir,

+1 aveec zvheer

Soit il manque du code, soit tu n'as pas clairement expliqué ton problème.

Sinon, j'ai quand même une piste à te proposer : applique un margin: 0 sur ton h1 et dit nous si maintenant tu as la même hauteur?

Par défaut, les h1 ont une margin top et bottom, qu'il faut au préalable retirer. Renseigne toi rapidement sur ce que se sont les "reset css".

-
Edité par Lord Morpheus 27 août 2021 à 18:54:35

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

RayanHn1

5 septembre 2021 à 11:36:32

Bonjour, pourrais tu renseigner quel sont les deux blocs à aligner dont tu parles cela pourrais m'aider à comprendre le problème.

Merci

RHN ( Un site important à visiter )