Question 317825 in Html Question posted in
Some basic documentation can be found here.

Html – Can't put a text element above another element using CSS

I’m just a beginner trying to get into programming, I’m currently learning HTML and CSS and I’m finally working on my first proper project. I’m just trying to do a simple homepage for a local gamestore in order to improve my fundamentals and put everything I’ve learned so far into practice.

The problem I’m facing right now is that I can’t figure out how to put the <h1>Trabalhamos com as seguintes plataformas:</h1> in line 35 ABOVE the logos on my list instead of on the left side. I know we use display: flex in order to make this kind of stuff, but honestly I don’t even know how I got this result, in an earlier version of this same project, before I had put this <h1> title, the logos were showing just BELOW the lorem ipsum text. I’ve tried to use display: block on this specific <h1>, but it didn’t work. Tried even an entire <div> using it’s own rules aside from the .container class but it’s still not working as intented. I’ve even tried flex-direction: column after some googling, but it still didn’t work. As I’m still just a beginner I don’t actually know if I’m using the correct properties that’ll allow me to do what I want. Can someone help me? Not only with the solution, but how to get to it and what I’m doing wrong so far.

Here’s the HTML and CSS code so far:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  padding: 8px 0;
  background-color: black;
  color: white;
  background-image: url(./midia/banner-cobrinha-games.jpg);
  background-repeat: no-repeat;
  background-position: center;
}

header nav li {
  display: inline;
  margin-left: 16px;
  font-size: 18px;
}

header nav li a {
  color: white;
  text-decoration: none;
}

.container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

header .container,
section .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#logo {
  width: 175px;
}

#fachada {
  width: 60%;
  margin-right: 24px;
}

.brands img {
  height: 30px;
}

.brands li {
  display: inline-block;
  margin-right: 14px;
  margin-bottom: 14px;
}

section .container {
  align-items: flex-start;
}

section {
  padding: 24px 0;
}

h1 {
  display: block;
}
<header>
  <div class="container">
    <img src="./midia/cobrinha-games-logo.png" alt="Logo Cobrinha Games" id="logo">
    <nav>
      <ul>
        <li><a href="#">Sobre a Loja</a></li>
        <li><a href="#">Contato</a></li>
      </ul>
    </nav>
  </div>
</header>
<section id="sobre">
  <div class="container">
    <img src="./midia/foto-loja-cobrinha-games.png" alt="Foto da loja Cobrinha Games" id="fachada">
    <article>
      <h1>Sobre a Loja</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic debitis iusto eum eaque nostrum, possimus, qui pariatur a dolor, quo reiciendis? Aspernatur eveniet illum tenetur quasi vitae fugiat maiores animi?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, laudantium iure ullam delectus quasi architecto cumque et corrupti? At voluptatum eligendi laborum sint voluptas molestiae fugiat esse doloribus obcaecati perferendis.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti officia dolores repellendus. Sequi voluptates eum, magnam blanditiis, deserunt sunt dolorem cupiditate velit fugiat officia rem? Quia voluptate eum architecto vitae.</p>
    </article>
  </div>
</section>
<section id="plataformas">
  <div class="container">
    <h1>Trabalhamos com as seguintes plataformas:</h1>
    <ul class="brands">
      <li><img src="./midia/psx.svg" alt="Logo Playstation"></li>
      <li><img src="./midia/ps2.svg" alt="Logo Playstation 2"></li>
      <li><img src="./midia/ps3.svg" alt="Logo Playstation 3"></li>
      <li><img src="./midia/ps4.svg" alt="Logo Playstation 4"></li>
      <li><img src="./midia/ps5.svg" alt="Logo Playstation 5"></li>
      <li><img src="./midia/xbox.svg" alt="Logo Xbox"></li>
      <li><img src="./midia/x360.svg" alt="Logo Xbox 360"></li>
      <li><img src="./midia/xone.svg" alt="Logo Xbox One"></li>
      <li><img src="./midia/xseries.svg" alt="Logo Xbox Series X/S"></li>
      <li><img src="./midia/n64.svg" alt="Logo Nintendo 64"></li>
      <li><img src="./midia/gamecube.svg" alt="Logo GameCube"></li>
      <li><img src="./midia/wii.svg" alt="Logo Nintendo Wii"></li>
      <li><img src="./midia/wii-u.svg" alt="Logo Nintendo Wii U"></li>
      <li><img src="./midia/switch.png" alt="Logo Nintendo Switch"></li>
      <li><img src="./midia/psp.png" alt="Logo Playstation Portable"></li>
      <li><img src="./midia/psvita.png" alt="Logo Playstation Vita"></li>
      <li><img src="./midia/gba.svg" alt="Logo Game Boy Advance"></li>
      <li><img src="./midia/nds.svg" alt="Logo Nintendo DS"></li>
      <li><img src="./midia/3ds.svg" alt="Logo Nintendo 3DS"></li>
    </ul>
  </div>
</section>

Here’s the repository of this particular project:
https://github.com/rodriguesraph/curso_ebac_frontend/tree/projeto_1

Tags:

3

Answers


  1. 0

    You can use the flex-direction: column; property to display the elements vertically

    Login or Signup to reply.
  2. 0

    Just put the h1 outside of the div. Like this.

        <section id="plataformas">
      <h1>Trabalhamos com as seguintes plataformas:</h1>
        <div class="container">

    Picture of the result

    Login or Signup to reply.
  3. 0

    Since you gave ‘display: flex’ to the .container class, the items are showing up side by side. To change that, just add the ‘no-flex’ class to the .container class and throw in the following CSS code.

    .container.no-flex {
    display: block;
}
    <section id="plataformas">
    <div class="container no-flex">
        <h1>Trabalhamos com as seguintes plataformas:</h1>
        <ul class="brands">
          .....
        </ul>
    </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search