Problem to position the div

Asked

Viewed 33 times

-1

Guys, I’m having a problem positioning my div. Not what’s going on what the div who wanted to put the slide is on top of the menu. How do I put down the menu? Thank you.

body {
  background: url(skyblue.jpg);
}

.titulo {
  border: 1px solid black;
  margin-top: 5px;
  text-align: center;
  font-size: 32px;
  color: yellow;
}

.subtitulo {
  border: 1px solid black;
  margin-top: 10px;
  text-align: center;
  font-size: 32px;
  margin-top: 10px;
  color: yellow;
}

.menu {
  border: 1px solid black;
  text-align: right;
  float: right;
  padding-top: 50px;
  font-size: 21px;
  margin-top: 30px;
  margin-right: 40px;
  text-decoration: none;
}

.slides {
  border: 1px solid red;
  text-align: center;
  font-size: 20px;
  font-family: arial black;
}
<html>

<head>
  <title>Ceja Feliz</title>
  <meta charset="UTF-8">
  <meta name="Description" content="" />
  <meta name="Keywords" content="" />
  <link href="ceja.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <!-- Título do site -->
  <div class="titulo">Mocidade Ceja</div>
  <div class="subtitulo">Entre aqui e ceja feliz!</div>

  <!-- Inicio de cabeçalho -->
  <div class="div_cabecalho">
    <div class="div_container">
      <div class="menu">
        <a href="siteceja.html">Inicio</a>
        <a href="quemsomos.html">Quem somos</a>
        <a href="localizacao.html">Localização</a>
        <a href="faleconosco.html">Fale Conosco</a>
        <a href="eventos">Eventos</a>
      </div>
    </div>
  </div>
  <!-- Fim de cabeçalho -->

  <!-- Inicio de slides -->
  <div class="slides">Aqui será o conteúdo dos slides, igual o curso do devmedia</div>

</body>

</html>

html css

1 answer

1

I changed the css of the menu removed the float:right and margin-right and changed margin-top for margin: 30px auto to center the div:

body {
  background: url(skyblue.jpg);
}

.titulo {
  border: 1px solid black;
  margin-top: 5px;
  text-align: center;
  font-size: 32px;
  color: yellow;
}

.subtitulo {
  border: 1px solid black;
  margin-top: 10px;
  text-align: center;
  font-size: 32px;
  margin-top: 10px;
  color: yellow;
}

.menu {
  border: 1px solid black;
  text-align: right;
  padding-top: 50px;
  font-size: 21px;
  margin: 30px auto;
  text-decoration: none;
}

.slides {
  border: 1px solid red;
  text-align: center;
  font-size: 20px;
  font-family: arial black;
}
<html>
<head>
  <title>Ceja Feliz</title>
  <meta charset="UTF-8">
  <meta name="Description" content="" />
  <meta name="Keywords" content="" />
  <link href="ceja.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <!-- Título do site -->
  <div class="titulo">Mocidade Ceja</div>
  <div class="subtitulo">Entre aqui e ceja feliz!</div>

  <!-- Inicio de cabeçalho -->
  <div class="div_cabecalho">
    <div class="div_container">
      <div class="menu">
        <a href="siteceja.html">Inicio</a>
        <a href="quemsomos.html">Quem somos</a>
        <a href="localizacao.html">Localização</a>
        <a href="faleconosco.html">Fale Conosco</a>
        <a href="eventos">Eventos</a>
      </div>
    </div>
  </div>
  <!-- Fim de cabeçalho -->

  <!-- Inicio de slides -->
  <div class="slides">Aqui será o conteúdo dos slides, igual o curso do devmedia</div>

</body>
</html>

Since your menu does not have a size (width) defined, it does not seem to me that you want the menu to be really on the direct, but if that’s the case just add width:100% in the .slides of its original code and define a padding in the same case.

  • If the answer was helpful, please accept it as the right answer in

  • Thank you, mate, thank you very much! :)

  • As I’m starting to make a site now I need to learn more how the Divs and css commands work. You some site to study the commands?

  • @Mellonfive Developer.mozilla.org in Portuguese and w3schools.com in English

Browser other questions tagged html css

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