UL does not follow normal page flow

Asked

Viewed 79 times

1

I’m having a problem in developing a specific page of my site, where for some reason a Ul is coming out of the "normal flow", using the developer tools of Chrome gave to verify that it leaves the body as in the image below:

A Ul são as imagens que tem <a> dentro de <li> e aparecem depois do menu

Basically I want to try to fix this to make Ul return to the normal flow, because anything after Ul appears above Ul as if she were not there.

HTML code of the page

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Edgar Müeller - Home</title>
<link href="estilo/estilo.css" rel="stylesheet" type="text/css" />
<link href="estilo/obras.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Inicio do menu !-->
<script>
  function myFunction(x) {
      x.classList.toggle("change");
  }
  </script>
<nav id="all">
<input type="checkbox" id="chec">
<label for="chec">
  <div class="container" onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
  </div>
</label>
<div class="bg"></div>
<nav id="principal">
  <ul>
      <li><a href="index.html">Home</a></li>
      <li id="sub10">
          <div class="a">Obras <span>+</span></div>
          <nav id="obras">
              <ul>
                  <li ><a href="3dpavement.html">3D Pavement Art</a></li>
                  <li ><a href="evolution.html">Evolution</a></li>
                  <li ><a href="thecaves.html">The Caves</a></li>
                  <li ><a href="ark.html">The Ark</a></li>
              </ul>
          </nav>
      </li>
      <li><a href="faq.html">FAQ</a></li>
      <li><a href="sobre.html">Sobre</a></li>
      <li><a href="estilo.html">Estilo das obras</a></li>
      <li id="sub11"><div class="a">Contato <span>+</span></div>
        <div id="contato">
        <form action="?valid=1" id="form1" name="form1" method="post">
        <p class="white">Nome*:</p> <p><input type="text" name="nome" required placeholder="Nome completo"></p> <br>
        <p class="white">E-mail*:</p> <p><input type="email" name="email" required placeholder="E-mail para contato"></p> <br>
        <p class="white">Empresa:</p> <p><input type="text" name="empresa" placeholder="Empresa representada"></p> <br>
        <p class="white">Posição:</p> <p><input type="text" name="posicao" placeholder="Seu cargo"></p> <br>
        <p class="white">Mensagem*:</p> <p><textarea name="mensagem" cols="40" rows="8" required placeholder="Sua mensagem"></textarea></p>
        <input type="submit" value="Enviar" id="enviar">
        </form>
        </div>
      </li>
  </ul>
</nav>
</nav>
<!-- Fim do menu !-->

<!-- Inicio dos conteudos !-->
<section id="espaco">&nbsp;</section>
<section class="titulo"><center><h1><u>3D</u> <u>PAVEMENT</u> <u>ART</u></h1></center></section>
<br>
    <ul class="ultable">
        <li class="ProjectLink">
            <a href="#" class="ateste">
                <img src="imagens/Preview/The_Crevasse_preview.png" class="ProjectPreviewImg">
            </a>
            <br>
            <center>
                <p>The Crevasse</p>
            </center>
            </li>
            <li class="ProjectLink">
            <a href="#" class="ateste">
                <img src="imagens/Preview/The_Crevasse_preview.png" class="ProjectPreviewImg">
            </a>
            <br>
            <center>
                <p>The Crevasse</p>
            </center>
            </li>
            <li class="ProjectLink">
            <a href="#" class="ateste">
                <img src="imagens/Preview/The_Crevasse_preview.png" class="ProjectPreviewImg">
            </a>
            <br>
            <center>
                <p>The Crevasse</p>
            </center>
            </li>
            <li class="ProjectLink">
            <a href="#" class="ateste">
                <img src="imagens/Preview/The_Crevasse_preview.png" class="ProjectPreviewImg">
            </a>
            <br>
            <center>
                <p>The Crevasse</p>
            </center>
            </li>
            <li class="ProjectLink">
            <a href="#" class="ateste">
                <img src="imagens/Preview/The_Crevasse_preview.png" class="ProjectPreviewImg">
            </a>
            <br>
            <center>
                    <p>The Crevasse</p>
            </center>
            </li>
            <li class="ProjectLink">
            <a href="#" class="ateste">
                <img src="imagens/Preview/The_Crevasse_preview.png" class="ProjectPreviewImg">
            </a>
            <br>
            <center>
                <p>The Crevasse</p>
            </center>
        </li>
    </ul>

<br>
<script>
setTimeout(function resposta(){
var url_ = new URL(location.href);
var valid = url_.searchParams.get("valid");

if (valid == 1){
        window.alert("Sua mensagem foi enviada com sucesso! Vamos analisa-la e tentaremos entrar em contato por e-mail o mais breve possivel")
}
},500);
</script>
</body>
</html>

CSS (style.css) - not all of this CSS is being used on this page, since it is a "general" for other pages that are working

/* Formatação padrão */
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
}

body {
    font-family: "Agency FB", Arial, SansSerif;
    font-size: 1.4em;
    background-color: #ddd;
    background-image: url("../imagens/The_Crevasse_003.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

ul {
    list-style: none;
}
footer{
    position: fixed;
    bottom:0;
    left:0;
}

.caixas{
        float: left;
        width: 200px;
        height: 200px;
        border: 10px ridge rgb(100,100,100);
        background-size: cover;
    }
    .caixas{
        border: 10px ridge rgb(200,200,200);
    }

.psobre{
    font-size:1em;
    transition: 0.6s;
}

.psobre:hover{
    font-size:1.2em;
    transition: 0.6s;
}

footer{
    background-color:#bbb;
    width:100%;
    height:50px;
}
/* Inicio do css icone do menu hamburguer */
.container {
    display: inline-block;
    cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: #ddd;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
    background-color: #ddd;
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: #ddd;
}

/* Fim do css do icone do menu hamburguer */

/* Inicio Menu hamburguer */

#chec {
    display: none;
    /* esconde o checkbox */
}

#chec:checked ~ #principal {
    transform: translateX(100%);
    /* Faz o menu aparecer e reaparecer */
}

#chec:checked ~ .bg {
    display: block;
}

#teste{
    height: 120vh;
}

#principal {
    background-color: rgba(110, 110, 110, 0.7);
    /* cor do fundo do menu */
    width: 200px;
    height: 100vh;
    /* unidade base do viewport, pega 100% da pagina */
    left: -200px;
    position: absolute;
    transition: all .4s;
    /* Faz a transição/animação do menu */
}

#obras {
    background-color: rgba(110, 110, 110, 0.7);
    /* cor do fundo do sub-menu */
    height: 100vh;
    /* unidade base do viewport, pega 100% da pagina */
    left: -100%;
    transition: all .4s;
    position: relative;
    /* Faz a transição/animação do menu */
}
#contato {
    background-color: rgba(110, 110, 110, 0.7);
    /* cor do fundo do sub-menu */
    height: 100vh;
    /* unidade base do viewport, pega 100% da pagina */
    left: -100%;
    transition: all .4s;
    position: relative;
    /* Faz a transição/animação do menu */
}

a:not(.ateste) {
    display: block;
    padding: 20px 5px;
    color: white;
}

a:hover:not(.ateste) {
    /* hover do menu */
    background-color: rgb(176, 224, 230);
    color: black;
}
.a {
    display: block;
    padding: 20px 5px;
    color: white;
}

.a:hover {
    /* hover do menu */
    background-color: rgb(176, 224, 230);
    color: black;
}

label {
    padding: 1px;
    margin: 14px;
    position: absolute;
    z-index: 1;
}

ul:not(.ultable) {
    top: 70px;
    position: absolute;
    width: 100%
}

ul li span {
    float: right;
}

.bg {
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, .4);
    display: none;
}
.bg2 { /* escurece a home para destaque */
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, .3);
    display: block;
}
#all{
    position: sticky;
    top:0;
    z-index:10;
}


#sub10 #obras {
    top: -70px;
    position: absolute;
    width: 170px;
    pointer-events: none;
}

#sub10:hover #obras {
    left: 100%;
    pointer-events: initial
}

#sub10 {
    overflow: hidden;
    height: 66px;
}

#sub11 #contato {
    top: -70px;
    position: absolute;
    width: 170px;
    pointer-events: none;
}

#sub11:hover #contato {
    left: 100%;
    pointer-events: initial;
    width: 350px;
}

#sub11 {
    overflow: hidden;
    height: 66px;
}

/* inicio do form */
#form1{
    top:90px;
    position: relative;
    left:25px;
    opacity:0;
    transition: all .4s;
}
#sub11:hover #contato #form1{opacity:1;}

.white{
    color: #fff;
}

#enviar{
    font-family: "Agency FB", Arial, SansSerif;
    font-size:1em;
    position:relative;
    top: 50px;
    left:110px;
    background-color: rgb(176, 224, 230);
    color: black;
    padding: 15px;
    padding-right:20px;
    padding-left:20px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    border: 2px solid #3F8E99;
    transition: all .4s;
    cursor: pointer;
}
#enviar:hover{
    background-color: #3F8E99;
    border-color: rgb(176, 224, 230);
    color: white;
    transition: all .4s;
}

/* fim do form */

/* Fim Menu hamburguer */

/* CSS do conteudo */
#espaco{
    position:relative;
    height: 55px;
}
.conteudo{
    text-align: justify;
    position: relative;
    left: 10%;
    width: 80%;
    -moz-column-count: 2;
    -moz-column-gap: 50px;
    -webkit-column-count: 2;
    -webkit-column-gap: 50px;
    column-count: 2;
    column-gap: 50px;
}
.conteudo2{
    text-align: justify;
    position: relative;
    left: 10%;
    width: 80%;
}
.conteudo p{
    margin-bottom:20px;
}
.titulo{
    margin-bottom: 20px;
    font-size:1.3em;
}

.moldura{
    border: 10px ridge rgb(100,100,100);
}

.estiloimg1{
    width:450px;
    height:auto;
}

.img100{
    width:100%;
    height:auto;
}
/*
#mueller{
    bottom:340px;
    height:auto;
    position: relative;
    opacity:0;
    transition: all .4s;
}
#mueller:hover{
    opacity:1;
    transition: all .4s;
}
*/
/* Inicio do CSS do slide show */
    * {box-sizing:border-box}

/* caixa do Slideshow */
.slideshow-container {
  max-width: 56%;
  position: relative;
  margin: auto;
  border:  7px solid #777;
}

/* Esconde as imagens por padrão*/
.mySlides {
  display: none;
}

/* botão "proximo" e "anterior" */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* posição do botão "proximo" */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Ao passar o mouse, adicione uma cor de fundo preto com um pouco de transparência */
.prev:hover, .next:hover {
  background-color: rgba(50,50,50,0.8);
}

/* texto da legenda */
.text {
  color: #f2f2f2;
  font-size: 0.65em;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* texto dos numeros (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Os circulos */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* animação de transição */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
/* mudança de cor da legenda */
.legenda{
    color: #111;
}
/* Fim do css do slide show */

/* Inicio do CSS da pag sobre */

.foto{
    background-repeat: no-repeat;
        background-size:cover;
    border: 10px ridge rgb(100,100,100);
    width:180px;
    height:188px;
    background-image: url("../imagens/mueller/Edgar_Mueller.jpg");
    transition: all .4s;
    webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4ss;
}
.foto:hover{
    background-repeat: no-repeat;
    background-size:cover;
    border: 10px ridge rgb(100,100,100);
    width:180px;
    height:188px;
    background-image: url("../imagens/mueller/Edgar_Mueller_vetor.fw.png");
    transition: all .4s;
    webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
}

/* Fim do CSS da pag sobre */

CSS (works.css)

/* teste */

    .relative{
        position:relative !important;
    }

.ultable{
    position: relative !important;
    width: 55%;
    height:auto;
    margin-left: auto;
    margin-right: auto;
}


.ProjectLink{
    position:relative !important;
}

    .ProjectLinkContainer .ultable,.ProjectLink{
    position:relative !important;
    list-style: none;
    display: inline;
    float:left;
}

.ateste{
    display:block;
    transition: all 0.4s;
    border-radius: 100%;
    background-image: radial-gradient(rgba(255,255,255,0),rgba(255,255,255,0));
}

.ateste:hover{
    position:relative;
    background-image: radial-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
    border-radius: 100%;
    transition: all 0.4s;
}



    /* teste */
html5 css3

1 answer

3


Dude, no offense, I don’t know where you went to school, or if you picked up some really old material as a reference, but I’m here giving you a OK tip! You forget that float exists. Float not to build layout.

Notice the image below see that I first put a border on body, ai you will see that it has content out, this content that leaks is the content that is with float. To fix this I put overflow:auto in the father, so the father recognizes the size of the children, even if they are with float. But this is a "Hake", I do not see how a practice, you can do other gambiarras like Clearfix. But the ideal is to abandon the float and use the flex.

Answer: So to fix the problem just put overflow:auto in the CSS of <ul class="ultable">

inserir a descrição da imagem aqui

  • Thanks man, but let me ask, what would be this flex you quoted?

  • 1

    You can start here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox there is a plethora of material on this, I’m sure that one day you will come back and thank for the tip, float is something from the 90s :D, focus your studies on Flexbox and Grid Layout (Grid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)

  • 1

    Good, @hugocsl. Actually these float only get in the way. The float is actually to float the element sideways, correct? You said it is not correct to use the float for layout. So what do we use the floats for ?

  • 1

    Grid is xD life.

  • 1

    @Jucianovictor grid is worth gold, the problem is that it has many variables and people end up complicating something simple, but really grid+flex is better than bacon

  • 1

    @Thiaguinhoembasamento float is a cursed heritage of that time http://prntscr.com/pqmam9 notice where I signaled with the arrow, float is to place a "floating" element and what is floating is not occupying space on the "floor". or if what comes below ends up not respecting the boxmodel of the element that is with float. But technically, the float is to flow the content to "bypass" the element, it is a typographic resource and not layout, it is to adjust text and not content blocks. How everything technology advances in!

Show 1 more comment

Browser other questions tagged html5 css3

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