Problem to position the div

Question

Problem to position the div

Navigation

#1 by (1 votes)

-1

I have a problem with positioning my div. Not what is happening in what the div that wanted to put the slide is on top of the menu. How do I put it under 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

asked by anonymous 18.08.2018 / 01:44

1 answer

Problem with HTML preview Take site redirection on linode

score 1 · Answer 1

I changed the css of menu removed float:right and margin-right and changed margin-top to 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 ) set, it does not seem to me that you want the menu to really be on the fly, but if so, just add width:100% to .slides of your original code and set a padding in the same case you need.