Discussion :

[steph68b]

Hello ,

Je suis entrain de faire un menu, menu auquel je ne voudrais pas donner de largeur fixe (ni %, ni px)
-> je voudrais qu'il s'adapte automatiquement au nombre d'items du menu

menu.php

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
<ul id="main-navigation" style="border: 2px solid red;">
 
		<li>
			<a href="index.php">Menu1</a>
			<ul>
				<li><a href="index.php">sous-menu1</a></li>
				<li><a href="index.php">sous-menu2</a></li>
				<li><a href="index.php">sous-menu3</a></li>
			</ul>
		</li>
 
                <li>
			<a href="index.php">Menu2</a>
			<ul>
				<li><a href="index.php">sous-menu1</a></li>
				<li><a href="index.php">sous-menu2</a></li>
			</ul>
		</li>
 
		<li>
			<a href="index.php">Menu3</a>
		</li>
 
		<li>
			<a href="index.php">Menu4</a>
		</li>
	</ul>

css:

Code :

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

1
2
3
4
5
6
7
8
9
10
#main-navigation {
	background: #484848;
	width: 60%;
	text-align: center;
	height: 65px;
	margin: auto;
	margin-top: 20px;
        font-size: 17px;
	font-underline: none;
}

Ma question:
-> avec un width: 60%; , mon menu est correct: ok

-> mais l'idée était de faire une structure qui passerait automatiquement à 70, ou 80% (voire 100%) SI je rajoutais des items dans mon code PHP, sans avoir à modifier le .css, bien sûr

-> un peu comme un menu standard pour les users lambda, menu qui serait complété par un autre item pour les admin, par exemple, vous voyez?


J'ai donc de suite pensé à l'attribut min-width.......... mais ça ne fonctionne pas!
J'ai regardé en ligne http://www.w3schools.com/cssref/pr_dim_min-width.asp, mais on ne parle que d'une utilisation pour un <p>... étrange à mes yeux, mais soit!


J'ai donc englobé mon menu dans un <p style="min-width: 50%; border: 2px solid blue;"> </p>
-> marche pas mieux
-> pire: mon cadre bleu de débug fait 100% de la largeur ET en plus mon menu se trouve en dessous, et non à l'intérieur


Donc:
-> est-ce-que qq'un aurait une idée?
-> je ne peux pas croire que c'est impossible à faire, c'est donc forcément moi qui merde qq part...

Merci.

[Amnael]

Tu ne pourrais pas faire un script Js qui calcule la taille optimale en fonction du nombre d'item de ton menu ?

Tu fais un css de base, et sous certaine condition tu le modifie par ton js.

[steph68b]

ça doit bien être possible oui, mais je ne peux pas croire que ce n'est pas faisable nativement en css.
-> après, si tu donne un height à un <div> et que son contenu "dépasse", la hauteur s'adapte bien......

[Invité]

Bonjour,

je ne vois pas le rapport entre la largeur et l'ajout d'items...

Le bout de code CSS que tu montres n'aide pas beaucoup à la compréhension.
On n'y voit qu'un menu vertical avec sous-menus visibles.

D'autre part, où as-tu été pêcher "font-underline" ??

Donc, au hasard, je dirais :

Code html :

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

1
2
3
4
5
<nav id="main-navigation">
  <ul>
....
  </ul>
</nav>

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
#main-navigation { 
  text-align:center; 
}
#main-navigation > ul {
	background: #484848;
  border: 2px solid red;
  display:inline-block;
  min-width:50%;
	margin: 20px auto 0;
  padding:0;
  font-size: 100%;
}
#main-navigation li  { 
  list-style-type:none; 
  text-align:center; 
  padding:0; margin:0; 
}
#main-navigation li a { 
  display:block; 
  padding:5px 20px; 
  color:#fff; 
  text-decoration:none; 
}

[steph68b]

alors:

1. font-underline
   un vieux truc de test qui trainait, en effet
   
   
2. code complet
   effectivement, il manquait des choses...
   
   

   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
   #main-navigation {
   	background: #484848;
   	text-align: center;
           width: 60%;
   	height: 65px;
   	margin: auto;
           padding: 0;
   	margin-top: 20px;
           font-size: 17px;
   }
    
   #main-navigation ul {
       padding:0;
       margin:0;
   }
    
   #main-navigation li {
       float:left;
       list-style: none;
       padding:0;
       margin:0;
   }
    
   #main-navigation li a {
       position:relative;
       color:white;
       background: url('../images/menu/main-navigation-separator.gif') top right no-repeat;
       display:block;
       width:144px;
       height: 65px;
       display: table-cell;
       vertical-align: middle;
   }

   voilà donc le css complet, que je vais comparer avec ton code
   

[Invité]

• http://codepen.io/jreaux62/pen/Qyxqjv

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#main-navigation { 
    text-align:center; /*centrage du menu*/ 
}
#main-navigation ul {
    padding:0;
    margin:0;
}
#main-navigation li {
    list-style: none;
    padding:0;
    margin:0;
  text-align:center;
}
/* niveau 1 : menu horizontal */
#main-navigation > ul {
	background: #484848;
	text-align: center;
  display:inline-block;
	height: 65px;
	margin: 20px auto;
  padding: 0;
  font-size: 17px;
}
#main-navigation > ul > li {
  position:relative; 
  float:left;
}
#main-navigation li a {
  position:relative;
  color:white;
  background: url('../images/menu/main-navigation-separator.gif') top right no-repeat;
  display:block;
  text-decoration:none;
  padding:3px;
}
#main-navigation li:hover {
  background-color:grey;
}
#main-navigation li a:hover {
  color:yellow;
}
#main-navigation > ul > li > a {
  width:144px;
  height: 65px;
  display: table-cell;
  vertical-align: middle;
  padding:0;
}
/* niveau 2 : sous-menus */
#main-navigation > ul ul { 
  position:absolute; 
  top:100%; 
  width:100%;
  display:none; 
  background: #484848;
}
#main-navigation > ul ul a { color:white; }
#main-navigation > ul li:hover > ul { display:block; }

[steph68b]

Voilà c'est ça oui!

J'avoue, depuis hier, je suis sur 12 trucs en même temps donc je n'ai pas été super clair, mea culpa!

Mais merci.