webentwicklung-frage-antwort-db.com.de

Wie füge ich Button über CSS mit CSS hinzu?

ich bin neu in CSS, es tut mir leid, wenn diese Frage nur dumm oder zu einfach ist, aber ich weiß nicht, wie sie es tun soll.

Ich muss einen Button über dem Bild platzieren, wie es aussehen soll: enter image description here

Sie sehen dort einen blauen Knopf "Kopit", das ist IT! Ich stelle dieses Ding bereits auf meiner Website, aber als ein einziges Bild, so dass mein Code so aussieht:

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;

}

Mein 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>

Ist hier jemand, der mir helfen kann, diesen Button als anderes Element zu gestalten?

Vielen Dank, dass Sie diesen Beitrag gelesen haben.

12
user258459

Wenn ich es richtig verstanden habe, würde ich den HTML-Code folgendermaßen ändern:

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

Dann könnte ich position:absolute und position:relative verwenden, um die blaue Taste nach unten zu drücken.

Ich habe ein jsfiddle erstellt: http://jsfiddle.net/y9w99/

20
TryingToImprove

Passen Sie dieses Beispiel an Ihren Code an

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

Sie müssen dem Container (#shop) relative oder absolute oder fixed die Position zuweisen und als zIndex den Wert 100 angeben.

Sie müssen Ihren Elementen auch eine relative-Positionierung mit der Klasse content und der niedrigeren zIndex-Angabe 97 geben.

Machen Sie das auch mit Ihren Bildern und stellen Sie deren zIndex auf 91 ein.

Positionieren Sie dann Ihren Button höher, indem Sie seine Position auf absolute und zIndex auf 95 setzen

Siehe DEMO

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.

Ich mag die Antwort von TryingToImprove. Ich habe im Wesentlichen seine Antwort auf das barebones -Css reduziert, um dasselbe zu erreichen. Ich denke, es ist viel einfacher zu kauen.

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;
}

Geige arbeiten hier .

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