i am new in CSS so sorry if this question is just stupid or too simple but i just dont know how to do it.
I need to place a button over the image, how it should looks:
You see there a blue button "Kopit" Thats IT! i style this thing already to my website but as one single image so my code looks like:
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;
}
My 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>
Is here anybody who can help me to style that button as a different element?
Thanks a lot for reading this post.
Adapt this example to your 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*/
}
I like TryingToImprove's answer. I've essentially taken his answer and simplified it down to the barebones css to accomplish the same thing. I think it's a lot easier to chew on.
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;
}
Working fiddle here.
You need to give relative
or absolute
or fixed
positioning to your container (#shop
) and set its zIndex
to say 100.
You also need to give say relative
positioning to your elements with the class content
and lower zIndex
say 97.
Do the above-mentioned with your images too and set their zIndex
to 91.
And then position your button higher by setting its position to absolute
and zIndex
to 95
See the 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;
}
<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;
}
Source: Stackoverflow.com