Discussion :

[francky74]

Bonjour,

Je suis tombé sur un problème qui à l'air simple à résoudre mais dont je ne trouve pas l'énigme ....

Voici, je souhaite faire une navbar avec, de chaque côté, un logo, et au milieu une série de liens qui construiraient le chemin de la page actuelle dans le site.
Pour faire ces liens, j'ai fait avec des <span>, et des <a>.
j'utilise bootstrap et le dernier jquery qui ont bien été importés au chargement de la page, donc pas de problèmes de ce côté là.

Si quelqu'un a une idée pour moi, merci

Voici la partie de code html que j'ai construit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<nav class="navbar navbar-inverse">
	<div class="container-fluid">
		<ul class="nav navbar-nav navbar-left">
			<li class="active"><a href="index.html"><img src="../images/logo.jpg" class="img-responsive center-block"/></a></li>
		</ul>
		<div class="navbar-center navbar-brand">
			<ul class="nav navbar-nav navbar-center">
				<li class="active navbar-center" style="text-align:center;color:yellow;">
					<h2>
						<span><a href="index.html" class="navbar-brand" style="color:yellow;">ACCEUIL</a></span>
						<span class="navbar-brand"> / </span>
						<span><a href="index.html" class="navbar-brand" style="color:yellow;">GESTION CLIENTS</a></span>
					</h2>
				</li>
			</ul>
		</div>
		<ul class="nav navbar-nav navbar-right">
			<li class="active"><a href="index.html"><img src="../images/logo.jpg" class="img-responsive center-block"/></a></li>
		</ul>
	 </div>
</nav>

et voici ce que j'obtiens avec ce code html ci-dessus, je voudrais que le chemin "ACCEUIL / GESTION CLIENTS" soit centré dans le navbar :

[danielhagnoul]

C'est un problème CSS pas jQuery.

Faites un test en déplaçant le "text-align:center" sur le H2 au lieu du LI.

[francky74]

Bonjour,

Merci pour votre réponse.

En fait j'ai essayé beaucoup de choses et j'ai opté pour une épuration du code. J'ai enlevé pas mal de container pour me retrouver avec juste des span. Mais là aussi, je ne parviens pas à centrer ces trois textes.
voici ce que j'ai codé à présent :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav class="navbar navbar-inverse">
	<div class="container-fluid">
		<ul class="nav navbar-nav navbar-left">
			<li class="active"><a href="index.html"><img src="../images/logo.jpg" class="img-responsive center-block"/></a></li>
		</ul>
		<span style="text-align:center">
			<span><a href="index.html" style="color:yellow;">ACCEUIL</a></span>
			<span style="color:yellow;"> / </span>
			<span><a href="index.html" style="color:yellow;">GESTION CLIENTS</a></span>
		</span>
		<ul class="nav navbar-nav navbar-right">
			<li class="active"><a href="index.html"><img src="../images/logo.jpg" class="img-responsive center-block"/></a></li>
		</ul>
	 </div>
</nav>

[NoSmoking]

Bonjour,

j'ai opté pour une épuration du code...

visiblement pas assez quand on observe un

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span><a href="index.html" style="color:yellow;">ACCEUIL</a></span>

on peut se demander à quoi sert le SPAN.

Comme le dit danielhagnoul, c'est un problème HTML/CSS

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span style="text-align:center">

le text-align:center ne peut pas s'appliquer à un élément en display:inline, ce qu'est par défaut un SPAN, car celui ci n'occupe que la place nécessaire à afficher son contenu.

Peut être devrais tu revoir ta structure HTML et intégrer ton menu dans une liste UL.

PS : Je déplace sur le Forum CSS

[Invité]

Bonjour,

Que tout ceci est moche...

Voilà le HTML nécessaire et suffisant : http://codepen.io/jreaux62/pen/mPdWBM

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<nav id="mainnav">
  <div class="navlogo">
    <a href="index.html"><img src="../images/logo.jpg" class="img-responsive" /></a>
  </div>
 
  <div class="navcenter">
    <a href="index.html">ACCUEIL</a> &nbsp;/&nbsp;
    <a href="index.html">GESTION CLIENTS</a>
  </div>
 
  <div class="navlogo">
    <a href="index.html"><img src="../images/logo.jpg" class="img-responsive" /></a>
  </div>
</nav>

Et le CSS, lui aussi nécessaire et suffisant :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#mainnav {
  display: table;
  width: 100%;
  background: #333;
}
 
#mainnav > div {
  display: table-cell;
  vertical-align: middle;
}
 
#mainnav .navcenter {
  width: 100%; /* on lui fait prendre le max de place, pour repousser les logos sur les cotés */
  text-align: center;
  color: yellow;
}
 
#mainnav .navcenter a {
  color: yellow;
}
 
#mainnav .navlogo {
  display: block;
  padding: 1em;
  background: black;
}
 
#mainnav .navlogo img {
  display: block; /* on met les images en block, pour éviter l'espace créé après un élément inline */
}

Ah oui, j'ai corrigé : "ACCUEIL"

...une série de liens qui construiraient le chemin de la page actuelle dans le site....

Pour info, ça s'appelle un "fil d'Ariane", ou breadcrumb en anglais.