Section does not work properly

Asked

Viewed 88 times

1

I need my <section> stay the same as this site here follows the image of the part I needinserir a descrição da imagem aqui

I tried coding but it’s not at all that way I don’t know where I’m going wrong.

Follows my code:

CSS

ul li {
  list-style-type: none;
}
.imagem {
  background-image: url(http://nerdreactor.com/wp-content/uploads/2013/09/destiny_thumbnail-500x300_c.jpg);
  background-size: cover;
  padding-top: 59.42%;
}
.info li {
  width: 33.3333%;
  float: left;
  box-sizing: border-box;
  padding-left: 5px;
  padding-bottom: 5px;
}
.text {
  background-color: lime;
  height: 320px;
}
.text p {
  width: 300px;
  max-width: 95%;
  text-align: left;
}

HTML

<section id="info-geral">
  <ul class="info">
    <li>
      <div class="imagem">
        <div class="text">
          <h3>DEI UMA ATUALIZADA CONFORME FUI MECBHENDO AQUI</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>

    </li>


  </ul>
</section>

NOTE: I was stirring here and I gave an update gave an improved yet I think that is not correct

html css html5
  • 1

    try padding H3 and the paragraph.

  • as well as a padding of that top bottom ?

  • use: . text H3, p { padding: 5px 10px; } this snippet will create a gap between the edges and leave the texts more centered inside the div text

  • Your CSS is right. The problem is that there is only one li. To look the same on the site you need three <li>.

1 answer

2


From what I understand, all you had to do was add more elements li within the tag ul.

ul li {
  list-style-type: none;
}
.imagem {
  background-image: url(http://nerdreactor.com/wp-content/uploads/2013/09/destiny_thumbnail-500x300_c.jpg);
  background-size: cover;
  padding-top: 59.42%;
}
.info li {
  width: 33.3333%;
  float: left;
  box-sizing: border-box;
  padding-left: 5px;
  padding-bottom: 5px;
}
.text {
  background-color: lime;
  height: 320px;
}
.text p {
  width: 300px;
  max-width: 95%;
  text-align: left;
}
<section id="info-geral">
  <ul class="info">
    <li>
      <div class="imagem">
        <div class="text">
          <h3>DEI UMA ATUALIZADA CONFORME FUI MECBHENDO AQUI</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>

    </li>
<li>
      <div class="imagem">
        <div class="text">
          <h3>DEI UMA ATUALIZADA CONFORME FUI MECBHENDO AQUI</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      </li>
      <li>
      <div class="imagem">
        <div class="text">
          <h3>DEI UMA ATUALIZADA CONFORME FUI MECBHENDO AQUI</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      </li>
  </ul>
</section>

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.