web-dev-qa-db-fra.com

Comment ajouter un bouton sur une image à l'aide de CSS?

je suis nouveau dans CSS donc désolé si cette question est juste stupide ou trop simple mais je ne sais pas comment le faire.

J'ai besoin de placer un bouton sur l'image, à quoi elle devrait ressembler: enter image description here

Vous voyez là un bouton bleu "Kopit" Thats IT! J'appelle déjà cela sur mon site Web, mais sous la forme d'une seule image, mon code ressemble à ceci:

CSS:

#shop{
    background-image: url("images/shop_bg.png");
    background-repeat: repeat-x;    
    height:121px;
    width: 984px;
    margin-left: 20px;
    margin-top: 13px;
}

#shop .content{    
    width: 182px; /*328 co je 1/3 - 20margin left*/
    height: 121px;
    line-height: 20px;
    margin-top: 0px;
    margin-left: 9px;
    margin-right:0px;
    display:inline-block;

}

Mon HTML:

 <div id="shop">
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>         
  </div>

Y a-t-il quelqu'un qui peut m'aider à définir ce bouton comme un élément différent?

Merci beaucoup d'avoir lu ce post.

htmlcsscss3
12
user258459

Si j'ai bien compris, je changerais le code HTML en quelque chose comme ceci:

<div id="shop">
    <div class="content">
        <img src="http://placehold.it/182x121"/> 
        <a href="#">Counter-Strike 1.6 Steam</a>
    </div>
</div>

Ensuite, je pourrais utiliser position:absolute et position:relative pour forcer le bouton bleu vers le bas.

J'ai créé un jsfiddle: http://jsfiddle.net/y9w99/

20
TryingToImprove

Adaptez cet exemple à votre code

HTML

<div class="img-holder">
    <img src="images/img-1.png" alt="image description"/>
    <a class="link" href=""></a>
</div>

CSS

.img-holder {position: relative;}
.img-holder .link {
    position: absolute;
    bottom: 10px; /*your button position*/
    right: 10px; /*your button position*/
}
6
AlexPrinceton

Vous devez attribuer un positionnement relative ou absolute ou fixed à votre conteneur (#shop) et définir sa valeur zIndex sur 100.

Vous devez également donner le positionnement relative à vos éléments avec la classe content et la valeur inférieure zIndex dire 97.

Faites aussi ce qui est mentionné ci-dessus avec vos images et réglez leur zIndex sur 91.

Et puis positionnez votre bouton plus haut en réglant sa position sur absolute et zIndex sur 95

Voir la démo

HTML

<div id="shop">

 <div class="content"> Counter-Strike 1.6 Steam 

     <img src="http://www.openvms.org/images/samples/130x130.gif">

         <a href="#"><span class='span'><span></a>

     </div>

 <div class="content"> Counter-Strike 1.6 Steam 

     <img src="http://www.openvms.org/images/samples/130x130.gif">

         <a href="#"><span class='span'><span></a>

     </div>

  </div>

CSS

#shop{
    background-image: url("images/shop_bg.png");
    background-repeat: repeat-x;    
    height:121px;
    width: 984px;
    margin-left: 20px;
    margin-top: 13px;
    position:relative;
    z-index:100
}

#shop .content{    
    width: 182px; /*328 co je 1/3 - 20margin left*/
    height: 121px;
    line-height: 20px;
    margin-top: 0px;
    margin-left: 9px;
    margin-right:0px;
    display:inline-block;
    position:relative;
    z-index:97

}

img{

    position:relative;
    z-index:91

}

.span{

    width:70px;
    height:40px;
    border:1px solid red;
    position:absolute;
    z-index:95;
    right:60px;
    bottom:-20px;

}
2
W.D.

J'aime la réponse de TryingToImprove. J'ai essentiellement pris sa réponse et simplifiée au barebones css pour accomplir le même travail Je pense que c'est beaucoup plus facile à mâcher.

HTML:

<div class="content">
    <img src="http://placehold.it/182x121"/> 
    <a href="#">Counter-Strike 1.6 Steam</a>
</div>

CSS:

.content{    
    display:inline-block;
    position:relative;
}

.content a {
    position:absolute;
    bottom:5px;
    right:5px;
}

Travail du violon ici .

1
Joseph Cho
<div class="content"> 
  Counter-Strike 1.6 Steam 
     <img src="images/CSsteam.png">
     <a href="#">Koupit</a>
</div>

/*Use this css*/
content {
width: 182px; /*328 co je 1/3 - 20margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
position:relative;
}
content a{
display:inline-block;
padding:10px;
position:absolute;
bottom:10px;
right:10px;
}
0
Tejinder