Bonjour, je suis développeur Web (enfin presque) et aujourd'hui j'ai un colle qui se pose à moi, j'ai une bande qui mesure toute la largeur de l'écran, 42px de hauteur, un div pour les fonctions d'authentification et un div qui sert de menu de navigation, en voici le code

Header_Band : 

#header_band
{
  height:42px;
  width:100%;
  background-color:rgb(0, 0, 0);
  opacity:0.8;
  display:flex;
  position:fixed;
}

Div des functions d'authentification : 

#account_functions
{
  width:250px;
  height:42px;
  display:flex;
  margin-left:auto;
  background-color:rgb(77, 128, 43);
}

Div de menu de navigation : 

#navigation_main
{
  width:450px;
  height:42px;
  margin-left:auto;
  background-color:red;
}

Ce qui me donne comme résultat : 

Hors j'aimerais plutot que le menu de navigation se retrouve au milieu du header_band/que le div des fonctions d'authentification ne soit pas pris en compte lors d'un "margin-left" merci de bien vouloir m'aider en vous souhaitant une bonne journée.

Salut, 

Tu dois mettre un display: inline-flex; align-content: center; et un justify-content: center sur ton parent, tu rajoute un .push entre ton navigation_main et ton account_functions qui a pour valeur margin-left: auto; ce qui permettra à ton account_functions de se coller à droite.

Dis moi si ça marche

Est-ce que on pourrait avoir le code HTML?

-
Edité par Guklam 11 juin 2018 à 19:29:43

En fait ce code n'est pas la solution à mon problème :

Voici le resultat esconté pour le nav_main : 

Voilà ce que j'aimerais obtenir mais avec le div des functions d'authentifications

-
Edité par Anonyme 11 juin 2018 à 19:40:11

Avec un position:relative; sur le parent, une position absolute sur les deux éléments, un top: 50%, left: 50%; transform: translate(-50%, -50%); sur le navigation_main et un right: 0; sur le account_functions ça marche non?

-
Edité par Anonyme 11 juin 2018 à 19:50:17

Salut,

Avec grid c'est plus simple. https://jsfiddle.net/t85vduhz/17/ 

Wow, merci beaucoup =)