Largeur "width" sur un élément en "position:fixed"

Version imprimable

25/04/2015, 09h57
abc.xyz

Largeur "width" sur un élément en "position:fixed"

Bonjour,

je vais essayer d'être le plus clair possible dans l'explication de mon problème afin de bénéficier de votre aide.:)

Voilà en bas de ma page et sur toute la largeur de l'écran j'ai un bandeau qui a une certaine hauteur (height:30%).

Ce bandeau doit être découpé en 5 div de longueur égales ayant chacune une couleur différente (donc les div sont en float:left avec une width:20%).

Cependant: ce bandeau doit n'avoir qu'une partie seulement visible en hauteur (l'effet recherché dans le fait de n'en présenter qu'une partie en hauteur c'est que lorsque la souris va passer sur le bandeau on va (par jQuery) faire remonter ou glisser si vous préférez le bandeau vers le haut afin qu'il soit visible sur toute sa hauteur), donc je le sors du flux (en faisant sur le bandeau un position:fixed et bottom:-16%, le bottom négatif vous l'aurez compris sert à cacher une partie du bandeau).

Je pense que mes explications sont claires et que vous avez compris jusque là, non?:weird:

Le problème est le suivant: le fait de mettre le bandeau hors du flux par une position:fixed fait que les 5 longueurs égales ayant chacune une couleur différente ne sont pas respectées, en effet le bandeau n'est pas coupé en longueur de façon égale par ces 5 div et ce car quand un élément est hors du flux les width:20% ne marchent plus.

Ma question est donc simple: lorsqu'on doit decouper en longeur un bandeau en 5 parts égales et que ce bandeau doit "remonter" vers le haut au passage de la souris, n'y a t'il pas un autre moyen pour réaliser cet effet que de faire un position:fixed?

Merci
25/04/2015, 18h18
NoSmoking

Bonjour,
as tu essayé avec display:table-xxx ?

Bonjour,
la prochaine fois, pense à MONTRER TON CODE... :roll:

Il suffit de mettre width:100%; sur le conteneur.

De plus, l'animation peut se faire en CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
<body>
 
  <div id="footbox">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
  </div>
 
</body>

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
*{
  margin:0;
  padding:0;
}
html, body {
  min-height:100%;
} 
#footbox {
  position:fixed;
  width:100%;
  height:30%;
  bottom:-16%;
  transition-property:all; /*animation*/
  transition-duration:0.5s;
}
#footbox > div {
  width:20%; 
  height:100%;
  float:left;
}
#footbox #box1{  background:violet; }
#footbox #box2{  background:blue; }
#footbox #box3{  background:green; }
#footbox #box4{  background:yellow; }
#footbox #box5{  background:red; }
 
#footbox:hover{ /*animation*/
  bottom:0%;
}