18100 sujets

Questions générales et questions de débutants

Menu et logo aligner avec flexbox

Bonjour,
Je m initie dans le monde du code et je souhaite vos lumières je voudrais aligner mon logo et mon menu de maniere horizontale avec flex box
Soucis :
1)Impossible de mettre le menue et le logo sur la meme ligne(aligner)
2) décaler un peu le menu sur la gauche

je vous envoie une image de ce que je cherche à faire avec donc le logo à gauche et le menu à droite mais pas complètement 
	
<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>WebAgency: L'agence de tous vos projets</title>
		
		<link rel="stylesheet" type="text/css" href="test1.css"> 

	</head>
	<body> 

		<header> <!--en tête--> 
			<div class="logot">
				<img src="image/logo.png" alt="logo WebAgency"class="logo"> <!-- put or not class ?-->
			</div>
			<nav class="nav">
				
				<ul class="menu">
					
					<li> <a href="accueil.html">Accueil</a></li>
					<li> <a href="service.html">Service</a></li>
					<li> <a href="portfolio.html">Portfolio</a></li>
					<li> <a href="contact.html">Contact</a></li>
				</ul>
			</nav>
		</header>
		<main> <!-- --> 
			<section>

				<aside>  </aside>
			</section>
		</main>	
		<footer> </footer>
	</body>

	</html>




body
{
	background:white;
	font-family: roboto, sans serif	

}

.nav ul
{
	margin: 0px;
	padding:0px;
	background: white;
	list-style: none;

}

.nav a
{   margin-top:0px;
	padding: 10px;
	display: block;
	text-align: justify;
	text-decoration: none;
	color: #444D56;
	font-size: 20px;
}

.nav .menu
{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;

}

.logot
{
	display: flex;
	flex-direction: row;
	margin: 0px;
	padding:0px;
}
.logo
{   display: block;
	text-align: left;
	text-decoration: none;

}

Modifié par niny (27 Apr 2019 - 19:19)
Administrateur
Bonjour,

il te faut appliquer display: flex; sur le parent direct du logo et de la navigation, donc sur header qui a bien pour enfants .logot et .nav
EDIT: ensuite tu peux appliquer toujours sur header (le flex container) un align-items: center; pour centrer (edit) VERTICalement ses flex items.
Pour décaler un peu le menu à gauche, une marge droite sur .nav devrait suffire.

Le ou les display: flex déjà présents pourraient poser problème, j'ai pas regardé assez en détail.
Attention à l'espace manquant devant class="logo" et à la mauvaise pratique d'oublier le ; sur la dernière déclaration d'une règle CSS (oui ça fonctionne très bien à cet endroit-là mais non ce n'est pas souhaitable de prendre cette habitude Smiley cligne Mieux vaut ne pas avoir à réfléchir pour tous les cas où l'on rajoute une déclaration 5 minutes ou 2 mois après…). Autre habitude à prendre : il n'y a jamais besoin de l'unité derrière la valeur 0. Écrire 0px b0f b0f b0f Smiley confused

edit: align-items agit sur l'axe secondaire donc verticalement ici, je m'étais planté (et justify-content sur l'axe principal ici gauche-droite horizontal). Merci au membre qui me l'a signalé par MP Smiley cligne
Modifié par Felipe (30 Apr 2019 - 15:00)
Sujet clos
Aller à