background et transparence sur menu extensible avec une liste

Version imprimable

25/10/2015, 19h24
Cyberdome

background et transparence sur menu extensible avec une liste

Bonjour

je vais essayer d'exposer mon casse-tête le plus simplement possible,

J'ai mis une photo en background du body.

J'ai un menu à onglet horizontal que j'ai réalisé avec une liste.

Je veux que ce menu soit extensible donc j'ai appliqué un width:100% à ul.

J'ai fais des boutons noir en appliquant un background:black aux balises li. Les boutons ont un width:auto.

Puis j'ai appliqué une couleur rgb transparente à li:hover de façon à ce que l'on voit la photo du background au survol de la souris.

Mon problème est que comme le background:black n'est pas appliqué au ul, techniquement mon menu est bien extensible mais visuellement il s'arrête là ou les boutons noir s'arrêtent. Je ne peux pas appliquer de background:black au ul sous peine de ne plus voir la transparence du li:hover. La solution à laquelle j'ai pensé est tout simplement de rajouter un dernier li avec un id spécifique pour qu'il reste noir au passage de la souris et qui remplirait tout l'espace vide sur la droite. Le problème est que je peux lui appliquer une largeur fixe, ou auto vers le minimum mais pas auto vers le maximum, du moins à ma connaissance.

Est ce que vous auriez des combines ou est ce que je dois tout refaire avec des div?

Merci
26/10/2015, 02h11
Invité

Bonjour,

Les explications sont claires...
...mais que veux tu qu'on te dise si tu ne montres pas tes codes (HTML + CSS) ? :koi:

Le principe est très simple j'ai un menu horizontal à gauche en auto pour qu'il s'adapte à la taille du contenu et il me faut une partie extensible à droite qui occupe l'espace restant et à laquelle je puisse appliquer un autre background. Donc j'aimerai simplement savoir quels paramètres ou attribut donné à cette partie de droite pour quelle occupe l'espace vide quelque soit la taille de l’écran, peu importe que ce soit réalisé avec un li, des div, ou un tableau. Je ne sais pas ce qui est le mieux. Le principe de comment réaliser un tel menu n'est pas dans mon code, c'est pour ça que je ne l'ai pas mis, je pourrai tout aussi bien avoir envie de réaliser un tel menu sans l'avoir déjà coder et me poser la même question.

Par exemple si je fais ça:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 #menu{ width:100%; background-color:blue;} #menugauche{ width:auto; } #menugauche li{float:left;} #menugauche a{display:block; width:auto; padding:15px; height:20; background-color:black;} #menugauche a:hover{display:block; width:auto; padding:15px; height:20; background-color:transparent;} #menudroite{ height:50px; background:black; } <div id="menu"> <div id="menugauche"> <ul> <li><a href="#">blablaba</a></li> <li><a href="#">blablaba</a></li> <li><a href="#">blablaba</a></li> <li><a href="#">blablaba</a></li> <li><a href="#">blablaba</a></li> </ul> </div> <div id="menudroite"> </div> </div>
Comment faire pour réduire menudroite à l'espace vide à droite et que je puisse voir le bleu au hover?

Ou bien ca:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ul{ width:100%; background-color:blue;} li{float:left; width:auto;} li a{display:block; width:auto; padding:15px; height:20; background-color:black;} li a:hover{display:block; width:auto; padding:15px; height:20; background-color:transparent;} #menudroite{ height:50px; background:black; } <ul> <li><a href="#">blablaba</a></li> <li><a href="#">blablaba</a></li> <li><a href="#">blablaba</a></li> <li><a href="#">blablaba</a></li> <li><a href="#">blablaba</a></li> <li id="menudroite"></li> </ul>
ou ca:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ul{ width:100%; background-color:blue;} li{float:left; width:auto;} li a{display:block; width:auto; padding:15px; height:20; background-color:black;} li a:hover{display:block; width:auto; padding:15px; height:20; background-color:transparent;} #menudroite{ height:50px; background:black; } <table><tr><td> <ul> <li><a href="#">blablaba</a></li> <li><a href="#">blablaba</a></li> <li><a href="#">blablaba</a></li> <li><a href="#">blablaba</a></li> <li><a href="#">blablaba</a></li> </ul> </td> <td id="menudroite"></td> </tr></table>
Il y a quelques années je crois qu'il n'était pas possible d'avoir un élément qui occupe tout l'espace restant à partir du moment ou aucun des deux éléments n'avait une largeur fixe, je pourrai chercher la largeur totale de mon menu mais le jour ou je décide d'ajouter un bouton alors je dois re-éditer toutes les pages du site et ça c'est pas cool.

Bien finalement après avoir écrémer le web francophone j'ai finis par trouver la réponse en anglais.

Donc réponse avec des div, un div principal qui contient un div gauche et un div droite. La solution/astuce est toute simple il suffit d'appliquer un overflow: hidden au div droite et celui ci comblera automatiquement tout l'espace vide sur la droite, même si le div gauche et le div conteneur n'ont pas de largeur fixe.

J'ai pas encore tester si ça fonctionne si on l'applique au dernier li d'un ul afin de se passer des div.

Pour voir le résultat:

Code:

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
<html>
<head>
 
<style>
html, body{
  margin:0px; 
  padding:0px;
}
 
body{
  background-image:url(http://okux.org/wp-content/uploads/2013/07/fond-d-ecran-hd-chat-au-yeux-vert.jpg);
  background-size: cover;
}
 
#menu{ 
  width:100%;
  margin:0px; 
  padding:0px;
  border-top: solid 1px #00CD00;
}
 
#menugauche{
  float: left;
  width: auto;   
}
 
#menudroite{
  overflow: hidden;    /* This will automatically set this div's width to the remainder */
  height:50px;
  background-color:black;
}
 
ul{
  margin:0px;
  padding:0px;
}
 
ul li{
  float:left;
  padding:0px;
  margin:0px;
}
 
#menu a{
  display:block;
  height:50px;
  padding-left:15px; 
  padding-right:15px;
  background-color:#000;
  text-decoration:none; 
  text-transform: uppercase;
  font-size:14px;
  color:#FFF;
  line-height:50px;
}
 
#menu a:hover{
  background-color: rgba(0, 0, 0, .4);
  color:#C8FE2E;
}
</style>
 
</head>
<body>
 
 
<div id="menu">
     <div id="menugauche">
          <ul>
          <li><a href="#">Item</a></li>
          <li><a href="#">BigItem</a></li>
          <li><a href="#">BigerItem</a></li>
          <li><a href="#">EnormousItem</a></li>
          <li><a href="#">FantasticousItem</a></li>
          <li><a href="#">SuperFantasticousItem</a></li>
          </ul>
     </div>
     <div id="menudroite">#</div>
</div>
</body>
</html>

Ca aide d'avoir du code à tester...

Code:

1
2
3
4
5
6
7
8
9
10
11
<nav id="menu">
  <ul>
    <li><a href="#">blablaba1</a></li>
    <li><a href="#">bla2</a></li>
    <li><a href="#">blabla bla33</a></li>
    <li><a href="#">blabla4</a></li>
    <li><a href="#">blablaba55</a></li>
    <li><a href="#">blab6x cvbxvb xcvbxcvb xbxcvbxb xcb</a></li>
    <li id="last"></li>
  </ul>
</nav>

Code:

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
html,
body {
  margin: 0px;
  padding: 0px;
}
 
body {
  background-image: url(http://okux.org/wp-content/uploads/2013/07/fond-d-ecran-hd-chat-au-yeux-vert.jpg);
  background-size: cover;
}
 
#menu {
  width: 100%;
  margin: 0px;
  padding: 0px;
  border-top: solid 1px #00CD00;
}
 
#menu > ul {
  width: 100%;
  margin: 0px;
  padding: 0px;
  diplay: table; /*se comporte comme un tableau */
}
 
#menu > ul > li {
  padding: 0px;
  margin: 0px;
  display: table-cell; /*se comporte comme une cellule de tableau */
  background-color: #000;
}
 
#menu > ul > li#last {
  width: 100%; /* va prendre alargeur restante */
}
 
#menu a {
  display: block;
  height: 50px;
  padding-left: 15px;
  padding-right: 15px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  color: #FFF;
  line-height: 50px;
  white-space: nowrap; /* pas de passage à la ligne */
}
 
/* hover */
#menu > ul > li:hover:not(#last) { /* sauf le dernier li */
  background-color: rgba(0, 0, 0, .4);
}
#menu > ul > li:hover:not(#last) a {
  color: #C8FE2E;
}

29/10/2015, 18h22
Cyberdome

Si on veut oui, l'explication d'appliquer un display:table au ul et table-cell au li pour pouvoir appliquer un width à 100% et une pseudo classe hover:not(#id) au dernier li tient en une phrase, deux ou trois maximum si l'on veut détailler. Ça me semble beaucoup plus efficace, mais c'est au cas par cas.

Merci pour cette méthode :)
30/10/2015, 16h38
CCyrillus
bonsoir,

si
Code:

1 2 3 ul:after { display:table-cell; }
alors plus besoin d'un li.last vide ;)
P.S. (display:table/ul:after sont compatible IE8)