Fixed footer below a form

Asked

Viewed 285 times

1

I’m having a problem with the code of this site www.forcaemovimento.com.br

I have a form that has some div’s with position:absolute to do the side effect. The problem is that the footer is behind the form when accessing via mobile instead of being below the form. I believe it is something concerning DIV to be absolute, but I’m not sure 100%. I would need to fix this urgent to deliver to the client 100%. Below is the HTML and CSS used:

HTML

<div class="geral">

    <div class="topo text-center">
      <h1>Novidades em Movimento!</h1>
    </div>

    <div class="meio">
        <div class="container">
            <div class="col-md-offset-6 col-md-6">
                <h6>Chegou a hora de começar uma vida saudável!</h6>

                <div class="texto">
                <p>Em breve você terá um site que lhe dará força e movimento com um novo conceito de treinamento funcional circuitado.</p>
                <p>Desafie-se a ir alem, com aulas dinâmicas e motivadoras ministradas para pequenos grupos em ambientes abertos ou em condompinios.</p>
                <p>Com orientação, suporte e auxílio de profissionais capacitados e especializados em treinamento funcional, corrida e musculação realize avaliações físicas periódicas e escolha se quer contratar suas aulas de maneira avulsa ou em pacotes mensais.</p>

                <h5>O aquecimento já começou. Prepare-se para o novo site da força e movimento.</h5>

                <form action="index.php" method="post" class="form-horizontal">
                  <div class="formulario">
                  <div id="triangle-bottomright">
                    <div id="triangle-bottomright-2"></div>
                  </div>
                      <div class="form-group ">
                        <label for="nome" class="col-sm-3 control-label">Nome:</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" name="nome" id="nome" placeholder="" required>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="email" class="col-sm-3 control-label">Email:</label>
                        <div class="col-sm-9">
                          <input type="email" class="form-control" name="email" id="email" placeholder="" required>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="telefone" class="col-sm-3 control-label">Tel.:</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" name="telefone" id="telefone" placeholder="" required>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="participacao" class="col-sm-3 control-label">Participação:</label>
                        <div class="col-sm-9">
                          Mensal <input type="radio" name="participacao" value="Mensal"> Avulso <input type="radio" name="participacao" value="Avulso">
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="nivel" class="col-sm-3 control-label">Nivel:</label>
                        <div class="col-sm-9">
                          Iniciante <input type="radio" name="nivel" value="Iniciante"> Intermediário <input type="radio" name="nivel" value="Intermediário"> Avançado <input type="radio" name="nivel" value="Avançado">
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="mensagem" class="col-sm-3 control-label">Mensagem:</label>
                        <div class="col-sm-9">
                          <textarea class="form-control" name="mensagem" rows="7" required></textarea>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="mensagem" class="col-sm-3 control-label">&nbsp;</label>
                        <div class="col-sm-9">
                          <input type="submit" name="submit" class="btn btn-primary" value="Enviar">
                        </div>
                      </div>
                  </div>
                </form>

                </div>
            </div>
        </div>
    </div>

    <div class="rodape">
      <div class="container">
          <div class="col-md-5 col-sm-4 col-xs-12 col-md-offset-1">
            <img src="images/logo.png" border="0" class="img-responsive">
          </div>

          <div class="col-md-5 col-sm-8 col-xs-12 col-md-offset-1">
            <div class="contatos">
            <p><i class="fa fa-mobile fa-2x"></i> 11 98071 3261</p>
            <p><i class="fa fa-envelope-o"></i> [email protected]</p>
            <p><i class="fa fa-globe"></i> forcaemovimento.com.br</p>
            </div>
          </div>
      </div>
    </div>
    <div>

CSS

.topo{
    background-color:#495358;
    width:100%;
    height:100px;
    padding:20px;
}

.meio{
    background-image: url('../images/background.png');
    background-color:#000;
    background-repeat: no-repeat;
    width: 100%;
    height:785px;
}
.rodape{
    background-color:#495358;
    width:100%;
    height:200px;
    padding:30px;
}

h1{
    color:#fff;
    font-size:60px;
    text-shadow: 1px 1px 2px rgba(0,0,0, 1);
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    margin-top:0px !important;
    margin-bottom: 0px !important;
}

h6{
    color:#F84F00;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 17px;
    font-weight: bold;
    display: block;
}

h5{
    color:#fff;
    text-transform: uppercase;
    font-weight: bold;
    font-size:20px;
}

.formulario{
    background-color:#D60000;
    border-top:15px #DC5A25 solid;
    padding:12px;
    color:#fff;
    position: relative;
    min-height:480px;
}

.formulario label{
    color:#fff;
    font-weight: 100;
}

.formulario .form-control{
    border-radius: 0px;
}
#triangle-bottomright {
    width: 0;
    border-bottom: 482px solid #D60000;
    border-left: 100px solid transparent;
    position: absolute;
    top: -17px;
    left:-100px;
}

#triangle-bottomright-2{
    width: 0;
    height: 0;
    border-bottom: 480px solid #DC5A25;
    position: absolute;
    top: 2px;
    left:-83px;
    transform:skew(-13deg);
    border-right: 40px solid #DC5A25;
}

.texto p{
    color:#fff;
    font-size:14px;
    margin-bottom: 20px;
}

.contatos{
    color:#fff;
    font-size: 16px;
}

.contatos i{
    margin-right: 10px;
}

1 answer

1


.geral{position:absolute;}
.topo{
    background-color:#495358;
    width:100%;
    height:auto;
    padding:20px;
    float:left;
}

.meio{
    background-image: url('../images/background.png');
    background-color:#000;
    background-repeat: no-repeat;
    width: 100%;
    height:50%;
    float:left;
}
.rodape{
    background-color:#495358;
    width:100%;
    height:200px;
    padding:30px;
    clear:both;
}

h1{
    color:#fff;
    font-size:60px;
    text-shadow: 1px 1px 2px rgba(0,0,0, 1);
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    margin-top:0px !important;
    margin-bottom: 0px !important;
}

h6{
    color:#F84F00;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 17px;
    font-weight: bold;
    display: block;
}

h5{
    color:#fff;
    text-transform: uppercase;
    font-weight: bold;
    font-size:20px;
}

.formulario{
    background-color:#D60000;
    border-top:15px #DC5A25 solid;
    padding:12px;
    color:#fff;
    height:100%;
   
}

.formulario label{
    color:#fff;
    font-weight: 100;
}

.formulario .form-control{
    border-radius: 0px;
}
#triangle-bottomright {
    width: 0;
    border-bottom: 482px solid #D60000;
    border-left: 100px solid transparent;
    position: absolute;
    top: -17px;
    left:-100px;
}

#triangle-bottomright-2{
    width: 0;
    height: 0;
    border-bottom: 480px solid #DC5A25;
    position: absolute;
    top: 2px;
    left:-83px;
    transform:skew(-13deg);
    border-right: 40px solid #DC5A25;
}

.texto p{
    color:#fff;
    font-size:14px;
    margin-bottom: 20px;
}

.contatos{
    color:#fff;
    font-size: 16px;
}

.contatos i{
    margin-right: 10px;
}
<div class="geral">

    <div class="topo text-center">
      <h1>Novidades em<br/>  Movimento!</h1>
    </div>

    <div class="meio">
        <div class="container">
            <div class="col-md-offset-6 col-md-6">
                <h6>Chegou a hora de começar uma vida saudável!</h6>

                <div class="texto">
                <p>Em breve você terá um site que lhe dará força e movimento com um novo conceito de treinamento funcional circuitado.</p>
                <p>Desafie-se a ir alem, com aulas dinâmicas e motivadoras ministradas para pequenos grupos em ambientes abertos ou em condompinios.</p>
                <p>Com orientação, suporte e auxílio de profissionais capacitados e especializados em treinamento funcional, corrida e musculação realize avaliações físicas periódicas e escolha se quer contratar suas aulas de maneira avulsa ou em pacotes mensais.</p>

                <h5>O aquecimento já começou. Prepare-se para o novo site da força e movimento.</h5>

                <form action="index.php" method="post" class="form-horizontal">
                  <div class="formulario">
                  <div id="triangle-bottomright">
                    <div id="triangle-bottomright-2"></div>
                  </div>
                      <div class="form-group ">
                        <label for="nome" class="col-sm-3 control-label">Nome:</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" name="nome" id="nome" placeholder="" required>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="email" class="col-sm-3 control-label">Email:</label>
                        <div class="col-sm-9">
                          <input type="email" class="form-control" name="email" id="email" placeholder="" required>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="telefone" class="col-sm-3 control-label">Tel.:</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" name="telefone" id="telefone" placeholder="" required>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="participacao" class="col-sm-3 control-label">Participação:</label>
                        <div class="col-sm-9">
                          Mensal <input type="radio" name="participacao" value="Mensal"> Avulso <input type="radio" name="participacao" value="Avulso">
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="nivel" class="col-sm-3 control-label">Nivel:</label>
                        <div class="col-sm-9">
                          Iniciante <input type="radio" name="nivel" value="Iniciante"> Intermediário <input type="radio" name="nivel" value="Intermediário"> Avançado <input type="radio" name="nivel" value="Avançado">
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="mensagem" class="col-sm-3 control-label">Mensagem:</label>
                        <div class="col-sm-9">
                          <textarea class="form-control" name="mensagem" rows="7" required></textarea>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="mensagem" class="col-sm-3 control-label">&nbsp;</label>
                        <div class="col-sm-9">
                          <input type="submit" name="submit" class="btn btn-primary" value="Enviar">
                        </div>
                      </div>
                  </div>
                </form>

                </div>
            </div>
        </div>
    </div>

    <div class="rodape">
      <div class="container">
          <div class="col-md-5 col-sm-4 col-xs-12 col-md-offset-1">
            <img src="images/logo.png" border="0" class="img-responsive">
          </div>

          <div class="col-md-5 col-sm-8 col-xs-12 col-md-offset-1">
            <div class="contatos">
            <p><i class="fa fa-mobile fa-2x"></i> 11 98071 3261</p>
            <p><i class="fa fa-envelope-o"></i> [email protected]</p>
            <p><i class="fa fa-globe"></i> forcaemovimento.com.br</p>
            </div>
          </div>
      </div>
    </div>
</div>

Close div class=general is open.

Browser other questions tagged

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