Menu justifié et flexible

Salut à tous !

Je vous soumets mon problème, je souhaiterais créer un menu composé de trois éléments.

Jusqu'ici tout va bien !

Seulement je veux que les trois éléments du menu soient centrés et "justifiés", c'est à dire que le premier élément touche le bord gauche et le dernier le bord droit, sans possibilité de décalage.

Ca doit être tellement simple que je n'y arrive pas…

Voici une image de ce que je souhaite réaliser.


mon début de code,

  <nav class="top_nav">
    	<ul>
        	<li><a href="#">Element1</a></li>
            <li><a href="#">Element2</a></li>
            <li><a href="#">Element3</a>
                <ul>
                    <li><a href="#">sous-menu 3.1 </a></li>
                    <li><a href="#">sous-menu 3.2 </a></li>
                    <li><a href="#">sous-menu 3.3 </a></li>
                    <li><a href="#">sous-menu 3.4 </a></li>
            	</ul>
            </li>
		</ul>
    </nav>

.top_nav {
	outline: dashed thin red;
	width: 740px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.top_nav li {
	display: inline;
	list-style: none;
}

.top_nav ul {
	margin: 0;
	padding: 0;
}

.top_nav ul li {
}

.top_nav a {
	display: inline;
	text-decoration: none;
	color: #FFF;
	text-transform: uppercase;
	margin: 0 30px;
}

Merci à vous pour votre aide !
Modifié par Aessian (19 Jun 2013 - 16:19)

Salut,
Voici une réponse (non testé mais qui doit marcher) :
Dans ton code html, colle les balises li entre elles, sinon il y a un léger décalage qui se créer. Pour plus de renseignements voici un articles sur le sujet :
http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

  <nav class="top_nav">
    	<ul>
        	<li><a href="#">Element1</a>
                </li><li><a href="#">Element2</a>
                </li><li><a href="#">Element3</a>
                <ul>
                    <li><a href="#">sous-menu 3.1 </a></li>
                    <li><a href="#">sous-menu 3.2 </a></li>
                    <li><a href="#">sous-menu 3.3 </a></li>
                    <li><a href="#">sous-menu 3.4 </a></li>
            	</ul>
            </li>
		</ul>
    </nav>

.top_nav {
	outline: dashed thin red;
	width: 740px;
	margin-right: auto;
	margin-left: auto;
}

.top_nav>ul>li {
	display: inline-block;
        vertical-align: top;
	list-style: none;
        width: 33.3333333%;
}

.top_nav ul {
	margin: 0;
	padding: 0;
}
.top_nav a {
	display: block;
	text-decoration: none;
	color: #FFF;
	text-transform: uppercase;
	margin: 0 30px;
        text-align: center;
}

Salut renard13,

merci pour ta réponse, j'ai testé sur une page vierge et malheureusement ça ne fonctionne pas.
Les éléments se décalent à droite à cause des sous-menus.

J'ai un peu testé de mon côté et j'ai fait ça ;

 <nav id="top_nav">
    	<ul>
              <li class="left"><a href="#">Présentation</a></li>
              <!--
                    -->
              <li><a href="#">Visions</a></li>
              <!--
                    -->
              <li class="right"><a href="#">Explications</a></li>
              	<ul>
                  <!-- début sous-menu -->
                  <li><a href="#">Explication 1</a></li>
                  <!--
                            -->
                  <li><a href="#">Explication 2</a></li>
                  <!--
                            -->
                  <li><a href="#">Explication 3</a></li>
                  <!--
                            -->
                  <li><a href="#">Explication 4</a></li>
				</ul>
    <!-- fin sous-menu --> 
</ul>
    </nav>

#top_nav {
	outline: dashed thin red;
	width: 740px;
	margin: 0 auto;
	text-align: center;
}

#top_nav ul {
	list-style: none;
	text-align: center;
	padding: 0;
	margin: 0;
}

#top_nav li {
	display: inline-block;
	margin: 0;
}

#top_nav ul li a {
	font-family: 'numans', Verdana, Geneva, sans-serif;
	text-transform: uppercase;
	color: #FFF;
	line-height: 2.5em;
	letter-spacing: 0.1em;	
	text-decoration: none;
	display: block;
	
}

#top_nav ul ul {
	position: absolute;
	left: -999em;
}

#top_nav ul:hover ul {
	left:auto;
}

.ie li {
	display: inline;
}

.left {
	float: left;
}

.right {
	float: right;
}

Pourrais-tu tester et me dire si c'est correct stp ?

La justification est obtenue par les deux classes float.

Bonjour/bonsoir,

j'ai souvent evoqué le text-align:justify sur ce forum en alternative/attente a display:flex-justify.

Je reviens donc sur ce sujet avec a nouveu une démo, car rien ne vaut un dessin pour le petit Prince:
http://codepen.io/gcyrillus/pen/oxiwp
css associé a la structure donnée plus haut:

.top_nav {
	border: dashed thin red;
	width: 740px;
	margin:1em auto;
  text-align:center;
}
.top_nav ul , .top_nav ul li {
	margin: 0;
	padding: 0;
}
.top_nav ul {
  vertical-align:middle;
  text-align: justify;
  line-height:0;
  background:#edf;
}
.top_nav ul:after {
  content:'';
  padding-right:740px;
}
.top_nav ul ul {
  position:absolute;
  right:9999px;
  width:740px;
}
.top_nav ul li:hover ul {
  right:-1px;
  top:2em;
  border: dashed thin red;
  background:#bad;
}
.top_nav li {
	display: inline-block;
	list-style: none;
  line-height:2em;
  position:relative;	
}
.top_nav a {
  display:inline-block;
	text-decoration: none;
	text-transform: uppercase;
  background:rgba(255,255,255,0.3);
	line-height:2em;
}

dans un precedent post j'ai donné deux lien qui en parle, un en franchais et l'autre en anglais. (chercher sur mon pseudo )

CDT,

Salut gc-nomade !

Merci d'avoir pris le temps de répondre, le code fonctionne de manière optimale sur Firefox et Chrome mais est disfonctionnel sur Safari…

Le menu apparait mais les éléments sont tous collés vers la gauche, sans espacement.
Le sous-menu apparait décalé lui aussi sous Safari.

Je me demande si cela ne viendrait pas de la propriété <content> ici :

.top_nav ul:after {
  content:'';
  padding-right:740px;
}

Y aurait-il un moyen de corriger cela afin que cette astuce fonctionne aussi avec Safari ?

Je planche dessus depuis un petit moment, mais j'avoue ne pas arriver à grand chose.

Merci de ton aide.
Modifié par Aessian (19 Jun 2013 - 16:24)

arf, un safari de chez Mac j'ose imaginer ?.

essai avec un display:inline-block pour forcer le padding.
++

codepen mis a jour : http://codepen.io/gcyrillus/pen/oxiwp je suis curieux
Safari windows, les deux versions fonctionnent, la premiere est plus fiable cependant.

Modifié par gc-nomade (19 Jun 2013 - 22:51)

Le problème vient effectivement de Safari sur Mac OS.

Je vais tester ta solution pour voir si la magie opère. (thanks)


En ajoutant donc "display:inline-block" sur :

.top_nav ul:after {
  content:'';
  padding-right:740px;
  display:inline-block
}

Ca semble fonctionner pour Safari.




Modifié par Aessian (19 Jun 2013 - 22:59)

Content pour toi et merci de ton retour. ++