28172 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ai trouvé un kit gratuit sur le net, et sur le bandeau du haut, j'ai 3 images qui sont en fond. Je souhaiterai mettre un lien sur chaque image (pic_*.jpg), mais je n'arrive pas à les enlever de la feuille de style sans tout décaler.

Ma feuille de style :

#gallery {
position: absolute;
top: 155px;
right: 0px;
width: 385px;
}
#gallery li {
  list-style: none;
  text-indent: -999px;
  float: left;
  overflow: hidden;
  height: 111px;
}
#gallery .gwomen {
  width: 127px;
  background: url(images/pic_1.jpg) no-repeat;
}
#gallery .gkids {
  background: url(images/pic_2.jpg) no-repeat;
  width: 130px;
}
#gallery .gmen {
  background: url(images/pic_3.jpg) no-repeat;
  width: 128px;
}

Ma page Html :

    <div id="gallery"> 
      <ul>
        <li class="gwomen"></li>
        <li class="gkids"></li>
        <li class="gmen"></li>
      </ul>
    </div>


ce que j'aimerai faire c'est un lien sur chacune des images !

Merci pour votre aide.
Modifié par refpartie (08 Sep 2009 - 11:26)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.


Pour ce qui est de ton problème, j'ai peur que tu doivent repenser totalement ce bandeau. Repartir de zéro est souvent plus simple que d'essayer d'adapter un code existant. Commence par mettre tes images dans des listes, puis styles les listes (enlever les puces, les aligner sur une ligne...).


Bonne continuation Smiley smile

upload/1-code.gif