Discussion :

[alaninho]

Bonjour,

j'ai un menu horizontal avec un nombre d'onglet qui peut varier, est ce qu'il est possible que la taille des onglets s'adapte automatiquement à la largeur du <ul> sur une ligne ?

code 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
<ul id="menu">
	 <li class="onglet" id="home_page">
	    <a href="/" class="mc" >home page</a>
	 </li>
   	 <li class="onglet" id="home">
	    <a href="?soft=test" class="mc aLoad" >home</a>
	 </li>
	 <li class="onglet" id="web_server">
	    <a href="?soft=test&onglet=form" class="mc aLoad" >web server</a>
	 </li>
	 <li class="onglet" id="help">
	     <a href="?soft=test&onglet=help" class="mc aLoad">help</a>
	 </li>
	 <li class="onglet" id="download">
	     <a href="?soft=test&onglet=download" class="mc aLoad">download</a>
	 </li>
	 <li class="onglet" id="example">
	     <a href="?soft=test&onglet=example" class="mc aLoad">iedera</a>
	 </li>
	 <li class="onglet" id="tuto">
	     <a href="?soft=test&onglet=tuto" class="mc aLoad">hedera</a>
	 </li>
	 <li class="onglet" id="id">
	     <a href="?soft=test&onglet=id" class="mc aLoad">result with an ID</a>
	 </li>
</ul>

code 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
#menu_central{
    font-size: 14px;
    font-weight:bold;
    width:100%;
    display:none;
    float:right;
}
#menu_central ul#menu{
    margin:0;
    padding:0;
    list-style-type:none;
}
#menu_central ul#menu li.onglet{
    border-left:1px solid white;
    float:left;
    width:14.15%;
}
#menu_central ul li a{
    color:#555;
    display:block;
    float:left;
    line-height:35px;
    text-align:center;
    text-decoration: none;
    width:100%;
}

Je ne vois pas comment je peux faire à part utiliser du javascript qui change la taille du width du <a> dans le <li>.

Petite complication, ça doit fonctionner sur ancien IE!!

Merci

Alaninho

[francky74]

Salut,

Je pense qu'en JQUERY cela pourrait se faire ... mais j'ai pas trop le temps de me lancer dans un test là.

Mon idée est que si tu peux récupérer le nombre d'onglet présents (disons var nbreOnglets), tu peux paramétrer la largeur (ou hauteur si on met les onglets à la verticale) comme ceci :
width: "100%" divisé par le nbreOnglets

En résumé, cela revient à diviser les 100% de la largeur du div où sont les onglets par le nombre d'onglets.
Donc, si tu as 4 onglets tu auras des largeurs égales chacune à 15% de la largeur totale du div ...

Ca pourrait peut-être fonctionner .... à essayer !

[Invité]

Bonjour,
c'est possible en full CSS :

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
#menu_central{
    font-size: 14px; /* => en "responsive", éviter les px ! Préférer les % ou em */
    font-weight:bold;
    width:100%;
    /* xxxdisplay:none; ??? */
    /* xxxfloat:right; ??? */
}
#menu_central ul#menu{
    margin:0;
    padding:0;
    list-style-type:none;
	display:table; /* AJOUTER */
    width:100%; /* AJOUTER */
}
#menu_central ul#menu li.onglet{
    border-left:1px solid white;
    /* xxxfloat:left; supprimer */
    /* xxxwidth:14.15%;  supprimer */
	display:table-cell; /* AJOUTER */
}
#menu_central ul li a {
    color:#555;
    display:block;
    /* xxxfloat:left; ??? */
    line-height:35px;
    text-align:center;
    text-decoration: none;
    /* xxxwidth:100%; ??? */
 
}

[NoSmoking]

Bonjour,

display:table; /* AJOUTER */

attention aux contraintes de départ

Petite complication, ça doit fonctionner sur ancien IE!!

[alaninho]

Merci pour vos solutions, j'avais en effet pensé à l'idée du jQuery. Mes supérieurs m'ont recommandés pour le moment, de mettre une taille fixe et de boucher le trop à droite!!