How can I set button below image?
12,747
Solution 1
Either the <br/>
Mor Haviv suggested, or just remove the floats:
Here's a running Example Fiddle
.news_img{
margin:0 20 0 20;
}
.trailer_button{
z-index:999;
margin:1 20 -20 20;
width:181px;
border-radius:10px;
}
.buttonimg{
width:auto;
height:auto;
}
Solution 2
This should be your HTML code:
<div class="movie_box">
<h3 class="h3">'.$movies['name'].'</h3>'
<div class="buttonimg">
<div class="news_img">
<img src="'.$movies['cover'].'"/>
<br/>
<button class="trailer_button" type="button">Trailer</button>
</div>
</div>
</div>
Inserting the button in to the image div, and using
to create a new line, just under the picture and put the button there.
jsFiddle:http://jsfiddle.net/1a0mzqz0/
Author by
Ivan Gorky
Updated on June 04, 2022Comments
-
Ivan Gorky almost 2 years
I have one little problem:
How can I set button below image?
This is my css code:
.news_img{ margin:0 20 0 20; float:left; } .trailer_button{ z-index:999; float:left; margin:1 20 -20 20; width:181px; border-radius:10px; } .buttonimg{ width:auto; height:auto; }
.news_img
is image
.trailer_button
is button
-buttonimg
is div around button and imageThis is HTML
<div class="movie_box"> <h3 class="h3">'.$movies['name'].'</h3>' <div class="buttonimg"> <div class="news_img"> <img src="'.$movies['cover'].'"/> </div> <button class="trailer_button" type="button">Trailer</button>
-
morha13 about 9 years@IvanGorky I added jsFiddle. You can see it's working perfectly fine there.