Superposition des div [Résolu/Fermé]

Signaler
Messages postés
340
Date d'inscription
mercredi 7 août 2013
Statut
Membre
Dernière intervention
8 avril 2016
-
touta_touta
Messages postés
340
Date d'inscription
mercredi 7 août 2013
Statut
Membre
Dernière intervention
8 avril 2016
-
bonjour , je voudrais faire un menu avec css et html dont j'ai des images et pour chaque image une image de background au dessous comme ombre (image) et un texte, ma problème est comment positionner ces éléments dans un seul div qui contient d'autres div. merci de m'aider :)
voila mon code:
 <div class="categorie">
  
  <ul>
   <li><div class="omb"> <img src="images/tel.png" /></div> <br /> Téléphone</li>
   <li> <div class="omb"><img src="images/tab.png" /></div><br />Tablette</li>
   <li><div class="omb"> <img src="images/bl.png" /></div><br />Bleutooth</li>
   <li><div class="omb"> <img src="images/mp3.png" /></div><br />Kit mp3</li>
   <li><div class="omb"> <img src="images/jeu.png" /></div><br/>Console jeu</li>

  </ul>

 
 </div>

.categorie{
 height:50px;
 width:800px;
 float:right;
 margin-top:10px;
 margin-left:5px;
 margin-bottom:10px;
 margin-right:0px;
 padding-bottom:20px;
 padding-left:1px;
 padding-right:0px;
 padding-top:0px;
 
}
.categorie li{
 float:left;
 color:#94796e;
 list-style:none;
 font-size:20px;
 padding:10px;
 font-family:gulim;
 text-align:center;
}
.omb{
  background:url(images/ombre1.png) no-repeat;
  width:15px;
  height:15px;
 
 
   background-position: bottom;
  
}


1 réponse

Messages postés
4984
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
963
Salut,

Appliques plutôt l’image de fond (l’ombre) sur le <li>.

D’ailleurs, pourquoi ne pas utiliser les ombres CSS plutôt qu’une image ? Ça sera plus rapide, plus joli, plus personnalisable, ça s’adaptera à la taille voulu, et c’est supporté depuis des années dans tous les grands navigateurs.

Simplement comme ça :
li {
box-shadow: 2px 3px 4px black;
}

Le 2px c’est pour le décallage gauche/droite
Le 3px c’est pour le décallage haut/bas
Le 4px c’est pour le flou de l’ombre
le black c’est la couleur. tu peux utiliser n’importe laquelle, y compris au format #FF0000 ou rgb().


Ensuite, je te conseille de laisser tomber les "float" pour les menus : ça n’est qu’un nid à problème.

Utilise plutôt un "display: inline-block" pour les <li> : ça te permettra de les dimensionner comme tu veux, très simplement. Pour les avoir à droite ou à gauche, utilise un "text-align" sur le <ul>.


touta_touta
Messages postés
340
Date d'inscription
mercredi 7 août 2013
Statut
Membre
Dernière intervention
8 avril 2016
3
bonjour , bien je les fait dans le< li > et ça marche bien merci :)