Bonsoir,

Sur mon site-web j'aimerais que le logo de mon site soit a gauche et le menu au center. Si j'utilise flexbox et en le mettant centrer le logo vient se coller au menu j'aimerais qu'il soit complétement a gauche. Si je mais les espaces entre le logo est bien a gauche mais le menu n'est plus centré et a droite. Merci de votre aide.

-
Edité par Jnitech 12 mai 2018 à 1:48:08

Salut ! Tu peux stocker chaque élément dans une <div> et assigner une largeur à chacune de ces <div>

<div class="conteneur">
  <div id="logo">
  ton logo
  </div>

  <div id="menu">
  ton menu
  </div>
</div>

	.conteneur{
	  display : flex ;
	}
  
  #logo {
		width : 50%;
	}

	#menu{
		width : 50%;
    }

Tu n'as plus qu'à jouer avec la taille des différentes div et d'en faire ce que tu veux pour adapter ton contenu !

Sinon tu peux également te servir de bootstrap qui est très facile à prendre en main et qui a été créé pour ce genre de situations

Attention au respect de la sémantique !

Ici pour simuler le logo et le menu j'ai utilisé un <p> par facilité.

Avec flexbox pas besoin de modifier la taille des <div> pour ça 

<header>
  <div class="logo"><p>LOGO</p></div>
  <nav><p>Item1 Item2 Item3</p></nav>
</header>

header {
  display: flex;
  justify-content: space-between;
}

nav {
  margin: auto;
}

-
Edité par Zoki_Marciano 12 mai 2018 à 10:22:15

Bonjour,

vous compliquez inutilement, nous avons un conteneur flex, qui contient le logo et la navigation, il suffit d'indiquer que la navigation occupe tout l'espace disponible (chercher la propriété à utiliser dans une doc sur flex) , et que son contenu est centré, et mettre simplement des liens standards <a> dans la navigation  avec du padding pour écarter les onglets si on veut

donc pas besoin de div supplémentaires ou autre, flex se débrouille très bien : une <img> et une <nav> dans le <header>

-
Edité par ChrisLebure 12 mai 2018 à 11:37:28

a part les div c'est exactement ce que j'ai fais en utilisant des <p> pour aller plus vite dans mon explication, si j'avais fais un menu complet évidemment que j'aurais utiliser des <a> et <img> pour l'image... après se limiter à dire cherchez dans la doc ça reviens a n'apporter aucune aide ( ici space-between fais ce que tu recommandes ) 

non pas besoin de space-between, désolé, pas de raison de se vexer
et pour vraiment aider, il ne faut pas donner le code, mais indiquer les pistes
et la manière de raisonner,
et j'ai indiqué ce qu'il fallait chercher

c'est mon avis, fin de la discussion

Détend toi champion personne est vexé à part toi visiblement, tout comme toi j'ai le droit de donner mon avis. Et quand je donne mon avis ou apporte mon aide en fournissant un code pour aiguiller j'accepte d'être contrarié sans avoir besoin de jouer le faux dur.

Bonjour jnitechjni,

Il est possible d'avoir ton code html + css pour voir ta charte

-
Edité par AliasDmc 12 mai 2018 à 12:20:43

Bonsoir,

Voici mon code le menu :

		<header>
			<div id="logo">
				<img src="logo.png" alt="logo">
			</div>

			<div id="menu">
				<nav>
					<ul>
						<li><a href="#">Acceuil</a></li>
						<li><a href="#">Téléchargement</a></li>
						<li><a href="#">Avis</a></li>
						<li><a href="#">Contacter-moi</a></li>
					</ul>
				</nav>
			</div>
		</header>

header
{
	background-color: black;
	display: flex;
}

#logo
{
	display: flex;
	flex-direction: column;
}

nav ul
{
	display: flex;
	list-style-type: none;
	padding: 0;
}

nav a
{
	font-size: 1.2em;
	color: white;
	padding: 10px;
	text-decoration: none;
	text-align: center;
	display: block;
}

nav a:hover
{
	background-color: #343434;
}

Merci de vos réponse. Mais je veux que le logo soit  a gauche complètement et le menu centrer donc le space-between ne marche puisque les deux seront chacun d'un coté. Merci de votre aide

-
Edité par Jnitech 13 mai 2018 à 1:51:15

Bonjour,

Si j'ai bien compris, tu veux que le menu soit centré dans l'espace restant à droite du logo ? donc je t'ai donné la solution

<header>
  <img>
  <nav>
    <a href="">...</a>
    <a href="">...</a>
    <a href="">...</a>
  </nav>
<header>

avec le header en flex (align-items:center pour l'alignement vertical des 2 éléments), <nav> occupant toute la place restante (propriété "flex", regarde la doc) et en text-align:center pour que les <a> soit centrés, avec du padding gauche/droite sur les <a> pour mettre un peu d'espace entre eux

Qu'est ce que tu ne comprends pas dans cette structure et dans ce que j'ai dit ? c'est simple, souple, léger, CSS réduit et facilement maintenable, inutile de compliquer avec des <div> et autres éléments. Relis la doc sur flex, tout est là

Voilà ou je veux en venir ( j'ai simplifié ton code parce que les div n'étaient pas nécessaire ) : 

HTML :

<header>
    <img src="logo.png" alt="logo">
    <nav>
      <a href="#">Acceuil</a> 
      <a href="#">Téléchargement</a> 
      <a href="#">Avis</a> 
      <a href="#">Contacter-moi</a> 
      </ul>
  </nav>   
</header>

CSS :

header{
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

img {
  align-item: center;
  margin: auto 0 auto 10px;
}

nav {
  display: flex;
  margin: auto; 
} 

nav a {
  font-size: 1.2em;
  color: white;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  display: block;
}

nav a:hover{
  background-color: #343434;
}

-
Edité par Zoki_Marciano 13 mai 2018 à 9:58:11

Bonjour JulienMantovani ,

Voila quelques exemples  :

Le menu est vraiment center par rapport la longueur de header et le logo s'adapte à la hauteur du header

https://codepen.io/Zonecss/pen/VxdPmO

Merci, j'ai choisis le inline puisqu'il était simple et répondait bien a mes besoins. Mais avec le flex j'utilisait ceci

@media all and (max-width: 440px)
{
	nav ul
	{
		flex-direction: column;
	}

	#logo
	{
		display: none;
	}
}

pour que en-dessous de 440px le menu se met en column et que le logo disparaissait mais avec la technique j'ignore comment je devrait faire cela. Merci de votre aide. 

Bonjour JulienMantovani ,

J'ai mis à jours le codepen pour l'exemple inline.

Merci sa marche mais par contre lorsque c'est en dessous de 440px le menu n'est plus center du moins ils sont tous un plus grand décalage a gauche ou est le logo c'est comme si il était encore la mais n'apparaissait pas pourtant j'ai bien mis le 

display: none

au logo. Merci

Bonjour JulienMantovani ,

Bien mettre dans le header de la page

<meta name="viewport" content="width=device-width, initial-scale=1">

Dessous de 440px il n'y a pas la place de mettre tout le menu sur une seule ligne,

c'est pour cela que j'ai ajouté dans la media query, pour que les menus soient l'un en dessous des autres

#exemple2 nav li{
        display: block;
}

Mais après on peut faire autre chose, genre deux menu par lignes !

J'ai bien fait les changements mais c'est encore espacer. Voici une image.

Merci envore.

Bonjour JulienMantovani ,

tu as bien mis le code pour supprimer padding et margin?

nav ul, nav li{ list-style:none; margin:0;padding:0;}

Merci bien tout est bien aligner. Encore merci.