Titre et items d'un menu tout sur une ligne

**alex2746** · 04/09/2013, 22h05

Bonjour,
Voici un document CSS et le HTML. Tout fonctionne comme je le souhaite mis à part deux détails : dans le "menu", nommé "navigation", je veux que le titre(h2) soit sur la même ligne que les éléments du menu (pour le moment le titre s'affiche puis à la ligne suivante les item du menu).

CSS:

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#global {
	width: 100%;
	max-width: 90em;
	min-width: 850px;
	margin-left: auto;
	margin-right: auto;
}
 
#entete {
	padding: 20px 0;
}
#entete h1 {
	margin: 0;
}
 
#secondaire {
	float: left;
	width: 180px;
}
 
#navigation {
	padding: 12px 15px;
}
#navigation ul {
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
#navigation li {
	float: left;
	margin-right: 10px;
	font-size: 1.4em;
	font-style: italic;
}
 
#principal {
	margin-left: 200px;
	margin-right: 0px;
	padding: 10px 20px;
}
 
#pied{
	margin-left: 200px;	
}

Html :

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
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
	<div id="global">
		<div id="entete">
			<h1>Ceci est un entete</h1>
		</div>
		<div id="navigation">
			<h2>Voici un menu:</h2>
			<ul class="menuprincipal">
				<li><a href="">Li un</a></li>
				<li><a href="">Li deux</a></li>
			</ul>
 		</div>
		<div id="secondaire">
			<h2>Secondaire</h2>
			<p class="description">
				description....
			</p>
		</div>
		<div id="principal">
			<h2>Principal</h2>
			Un petit texte... 
		</div>
	        <div id="pied">
		        <h2>Pied:</h2>
		        <p>texte du pied</p> </div>
	        </div>
</body>

Pareil pour le "pied", le titre sur la même ligne que le contenu du "pied".

J'ai essayé de rajouter h2{display:inline} mais ça ne change rien... Pourriez vous m'aider?

Merci d'avance :-)

**rodolphebrd** · 04/09/2013, 23h50

Bonjour,

rapidement :

1 - vous pouvez jouer sur le display des éléments

Code :

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

1
2
3
h2, p, ul {
     display: inline;
}

2 - faire flotter les LI à droite

Code :

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

1
2
3
#navigation li {
     float: right;
}

3 - définir une largeur au menu

Code :

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

1
2
3
#navigation {
      width: 300px;
}

http://codepen.io/anon/pen/xgpao

**alex2746** · 05/09/2013, 10h22

Merci pour votre aide.

Pour la partie "pied" tout est en ordre.
Mais pour le menu il me reste un petit problème :

En rajoutant ceci:

Code :

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

1
2
3
4
 
#navigation h2, p, ul {
     display: inline;
}

Le titre se met bien sur la même ligne que les items du menu mais il se met APRèS les items, ce qui n'est pas normal.

Donc j'ai rajouté la deuxième partie que vous m'avez proposée :

Code :

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

1
2
3
4
 
#navigation li {
     float: right;
}

La titre et items sont bien sur la même ligne, titre est bien à gauche des items mais il y a un énorme espace blanc entre le titre et les items...

Ce qui pourrait se régler avec votre troisième partie mais je ne peux pas donner une petite largeur au menu, il doit occuper toute la largeur de l'écran.

Est ce qu'il existe une solution pour enlever cet espace tout en gardant un menu qui prend toute la largeur de l'écran?

Merci d'avance.

Invité · 05/09/2013, 10h36

Bonjour,

Code :

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

1
2
3
4
5
6
#navigation h2, #navigation ul, #navigation li { display:inline; }
#principal h2, #principal p { display:inline; }
#secondaire h2, #secondaire p { display:inline; }
#pied h2, #pied p { display:inline; }
 
#navigation h2, #principal h2, #secondaire h2, #pied h2 { margin-right:10px; }

et enlever float:left; sur les <li>

**rodolphebrd** · 05/09/2013, 10h40

Sinon pourquoi ne pas mettre le H2 dans un LI ?

Code html :

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

1
2
3
4
5
6
7
<div id="navigation">
			<ul class="menuprincipal">
        <li><h2>Voici un menu:</h2></li>
	<li><a href="">Li un</a></li>
	<li><a href="">Li deux</a></li>
			</ul>
 		</div>

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
22
#navigation {
	padding: 12px 15px;
 
}
#navigation ul {
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
 
}
#navigation li {
	float: left;
	margin-right: 10px;
	font-size: 1.4em;
	font-style: italic;
}
h2 {
  margin:0;
  padding:0;
}