Superposition des div

Résolu/Fermé
touta_touta Messages postés 337 Date d'inscription mercredi 7 août 2013 Statut Membre Dernière intervention 8 avril 2016 - Modifié par touta_touta le 29/12/2015 à 20:54
touta_touta Messages postés 337 Date d'inscription mercredi 7 août 2013 Statut Membre Dernière intervention 8 avril 2016 - 4 janv. 2016 à 14:55
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

le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
2 janv. 2016 à 12:51
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>.


0
touta_touta Messages postés 337 Date d'inscription mercredi 7 août 2013 Statut Membre Dernière intervention 8 avril 2016 6
4 janv. 2016 à 14:55
bonjour , bien je les fait dans le< li > et ça marche bien merci :)
0