background-color qui ne s'applique pas sur un DIV

Version imprimable

Je dois pas être bien réveillé car j'ai un problème sur un truc tout simple, j'ai un div qui ne prend aucunes couleurs de fond.
Voyez-vous une raison qui pourrait causer cela ?

Voici le CSS :

Tiens, y a un truc bizarre sur ce CSS, pourquoi l'accolade de menubas est verte au lieu de noire ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .bas { position:absolute; top:95%; width:100%; height:5%; } #menubas { position:relative; width:660px; text-align:center; margin-right:auto; margin-left:auto; background-color:pink; }
Et le HTML :
Code:

1 2 3 4 5 6 7 <div class="bas"> <div id="menubas"> <div class="lienbas"><a href="../index.html">Accueil</a></div> <div class="lienbas"><a href="../nous.html">A propos de nous</a></div> <div class="lienbas">Copyright 2013/2014</div> </div> </div>

12/04/2013, 09h55
rodolphebrd

Bonjour,

Le menu bas prend bien la couleur pink. Il doit manquer quelque chose....
12/04/2013, 09h58
dragonno

Salut Rodolphe, et merci ;)
En effet le DIV "bas" prend bien la couleur, mais pas "menubas".

Je ne vois pas ce qu'il manque.
12/04/2013, 10h03
dragonno

EDIT !

Un truc tout simple, je viens de voir, il manque la hauteur de "menubas" sinon il ne prend pas la couleur.
Bizarre car je pensais que son contenu lui donnait de la hauteur et qu'il prenait ça en compte.
Le CSS ne cesse de me rendre fou ;)
Des fois un CSS marche et dans d'autres conditions ça marche différemment.

Voilà, j'ai mis :

Code:

height:22px;

Dans "menubas" et c'est impecc ;)
12/04/2013, 13h58
Bovino

Citation:

Bizarre car je pensais que son contenu lui donnait de la hauteur et qu'il prenait ça en compte.

Uniquement si son contenu est dans le flux, c'est à dire sans propriété position ou float.

Merci Bovino ;)

Son contenu pour info, c'est ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
.lienbas
{
position:relative;
margin-right:auto;
margin-left:auto;
width:150px;
font-family : Verdana;
font-size : 12px;
text-align:center;
float:left;
background-color:gray;
}

Code:

1
2
3
4
5
6
7
<div class="bas">
   <div id="menubas">
   <div class="lienbas"><a href="../index.html">Accueil</a></div>
   <div class="lienbas"><a href="../nous.html">A propos de nous</a></div>
   <div class="lienbas">Copyright 2013/2014</div>
   </div>
</div>