128Gigabytes 128Gigabytes - 6 months ago 12
HTML Question

How can I make a box of content in html?

I'm trying to learn html and I need to be able to section things into the spot they are meant to be in
So like each thing will have a picture and some text

I need to make a blue box and inside it I need a image and text
And next to it, the same thing.
Basically if I had a way to create a new inside the real one? I guess. Im not sure.
This is what I tried, and its pretty much what I want but I need the box to be solid, and maybe if someone could help me make the image and text centered on the horizontal axis that could also help.

<html>
<head>
<title>
MaGa V1
</title>
<style type="text/css">
.img_div {float: left; border: 1px solid white;}
</style>
</head>
<body bgcolor="#000000">
<div class="img_div" style="margin-right: 32px">
<img src="./../images/Shadows over Innistrad/Shadows over Innistrad.png"/>
<figcaption>
<a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a>
</figcaption>
</div>
<div class="img_div" style="margin-right: 32px">
<img src="./../images/Battle for Zendikar/Battle for Zendikar.png"/>
<figcaption>
<a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a>
</figcaption>
</div>
</body>
</html>

Answer

Something like this should get you started:

body {background-color:black;}
.row{overflow:hidden;} /* Fixes float */
.img_div {float:left;width:45%;text-align:center;padding:10px;background:blue;}
.img_div:not(:nth-child(2)){margin-right:10px;}
.img_div a{color:gold;}
<div class="row">
  <div class="img_div">
    <img src="http://placekitten.com/100/102" />
    <figcaption>
      <a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a>
    </figcaption>
  </div>
  <div class="img_div">
    <img src="http://placekitten.com/102/102" />
    <figcaption>
      <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a>
    </figcaption>
  </div>
</div>
<!-- .row -->


The entire page might look something like this:

<html>
<head>
    <!-- Usually there is some stuff in here -- up to you -->
</head>
<body>
    <style>
        body {background-color:black;}
        .row{overflow:hidden;} /* Fixes float */
        .img_div {float:left;width:45%;text-align:center;padding:10px;background:blue;}
        .img_div:not(:nth-child(2)){margin-right:10px;}
        .img_div a{color:gold;}
    </style>

    <div class="row">
      <div class="img_div">
        <img src="http://placekitten.com/100/102" />
        <figcaption>
          <a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a>
        </figcaption>
      </div>
      <div class="img_div">
        <img src="http://placekitten.com/102/102" />
        <figcaption>
          <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a>
        </figcaption>
      </div>
    </div>
</body>
</html>

I suggest you do this tutorial, and then this one Just run through them quickly

Comments