Zippiex Zippiex - 1 month ago 7
CSS Question

Could I program my css code in a better way it's about text under image

As you can see here is some copy n paste from my html and css code. I had a hard time to figure this out it took me 2 days and like 12 hours. When I first try to make the text stay under the picture it was floated to left all the time and this problem make me so angry that I google some example code. I read, think and try and got this. It seems to work but I think I did something wrong because when you change .resmontage ul width from 70% to 60% all the pictures get smaller. They don't stay in the width or height I rule them to do.

Then why do I need to type 100% width at .resmontage img to make it work with .resmontage li? If I delete width from resmontage li everything will screw up! Do you see something wrong in the code please tell me and make me to be better. I also know you can use bootstrap just download and paste but I will not learn anything if I do that. I wanna learn how things works.

CSS



#bt {
color: white;
margin-top: 1%;
margin-left: -8%;
}

.resmontage ul {
float: left;
background-color: black;
width: 70%;
height: 25%;
padding-left: 7%;
margin-top: 1%;
border-radius: 1%;
}

.resmontage li {
list-style-type: none;
width: 20%;
margin-top: 1%;
float: left;
padding-right: 3%;
}

.resmontage img {
width: 100%;
height: 65%;
}

.hello {
text-align: center;
color: white;
margin-top: 2%;
}

.clearfix:after {
content: "";
display: both;
clear: both;
}





HTML



<div class="resmontage clearfix">
<ul>
<div id="bt">Games that will be released next month.</div>
<li>
<img src="https://upload.wikimedia.org/wikipedia/en/a/a5/Grand_Theft_Auto_V.png" />
<div class="hello">Gta v</div>
</li>

<li>
<img src="http://media.steampowered.com/apps/valvestore/images/slider/store_image_02.png" />
<div class="hello">CSGO</div>
</li>

<li>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Rocket_League_coverart.jpg" />
<div class="hello">Rocket League</div>
</li>

<li>
<img src="http://blogs-images.forbes.com/erikkain/files/2014/12/The-Witcher-3-Wild-Hunt.jpg" />
<div class="hello">Witcher 3</div>
</li>

</ul>
</div>




Answer

You already set the width of the images by placing them in various li's. When you specify them to have width: 100%, you are just telling them to take up their container, namely the li, which has a width of 20%.

#bt {
  color: white;
  margin-top: 1%;
  margin-left: -8%;
}
.resmontage ul {
  float: left;
  background-color: black;
  width: 70%;
  height: 25%;
  padding-left: 7%;
  margin-top: 1%;
  border-radius: 1%;
}
.resmontage li {
  list-style-type: none;
  width: 20%;
  margin-top: 1%;
  float: left;
  padding-right: 3%;
}
.resmontage img {
  width: 100%;
  height: auto;
}
.hello {
  text-align: center;
  color: white;
  margin-top: 2%;
}
<div id="bt">Games that will be released next month.</div>
    <li>
      <img src="https://upload.wikimedia.org/wikipedia/en/a/a5/Grand_Theft_Auto_V.png" />
      <div class="hello">Gta v</div>
    </li>

    <li>
      <img src="http://media.steampowered.com/apps/valvestore/images/slider/store_image_02.png" />
      <div class="hello">CSGO</div>
    </li>

    <li>
      <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Rocket_League_coverart.jpg" />
      <div class="hello">Rocket League</div>
    </li>

    <li>
      <img src="http://blogs-images.forbes.com/erikkain/files/2014/12/The-Witcher-3-Wild-Hunt.jpg" />
      <div class="hello">Witcher 3</div>
    </li>

  </ul>
</div>