When I zoom in my footer is behind the div content

Asked

Viewed 69 times

0

I wanted to know how I do so that my footer is just below the content when I zoom in.

At the moment it’s like this with zoom: http://imagizer.imageshack.us/a/img924/4070/7FllwV.jpg

Zooming : http://imagizer.imageshack.us/a/img924/9828/204jVK.jpg

<!DOCTYPE html>
<head>
<title> Home  </title>

<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/estilocadastro.css">
<link rel="stylesheet" type="text/css" href="CSS/animate.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>



</head>
<body>




    
    <div id="container">
    
    <div id="top"></div>
        <div id="copyrigth">
    
            <a href="#"> Copyrigth - 2016 Todos Direitos Reservados.</a>
            
        </div>
    
    
    </div>
    
    <div id="cadastro">
    
        <div id="divcadastro">
        
        <form action="Cadastrado.php" method="POST">
        
        <div id="textocadastro">Cadastro</div>
            
            <input type="text" name="nome" placeholder="Nome" class="nome" id="nometeste" style="display:none" >
            <input type="text" name="nome" placeholder="Nome" class="nome" id="nometeste" required>
            
            <input type="text" name="sobrenome" placeholder="Sobrenome" class="sobrenome" style="display:none">
            <input type="text" name="sobrenome" placeholder="Sobrenome" class="sobrenome" required>
            
            <input type="text" name="login" placeholder="Email" class="login" style="display:none">
            <input type="text" name="login" placeholder="Email" class="login" maxlength="40" required>
            
            <input type="password" name="senha" placeholder="Senha" class="senha" style="display:none">
            <input type="password" name="senha" placeholder="Senha" class="senha" maxlength="30" required>
        
            <input type="submit" value="Cadastrar" class="botao">
            
        </form>
        
        </div>
        
    </div>





</body>

* {
margin: 0;
padding:0;

}

body, html {

width: 100%;
height: 99%;
font-family: Comic Sans MS, Tahoma, sans-serif;
background: rgba(0,0,0,0.5);
background:url("../Images/WEB-ARTE2.png") fixed no-repeat;
background-size: 100% 100%;

}

register {

position: absolute;
top: 70px;
left: 50%;
width: 1343px;
height:  500px;
padding: 20px;
margin-left: -700px; /* por causa do posicionamento absoluto temos que usar margem negativa para centralizar o site */
background: rgba(0,0,0,0.6);
z-index: 5;
box-shadow : 10px 10px 10px rgba(0,0,0,0.5);

}

divcadastro{

height: 500px;
width: 550px;
position: absolute;
top: 50px;
margin-left: 350px;

z-index: 10;

}

.login{

height: 40px;
width: 350px;
border: black solid 1px;
position: absolute;
top: 200px;
left: 150px;
border-radius: 3px;

} .login:Focus{

border: 1px solid #00FBF6;

}

.password{

height: 40px;
width: 350px;
border: black solid 1px;
position: absolute;
top: 250px;
left: 150px;
border-radius: 3px;

}

.password:Focus{

border: 1px solid #FB00F9;

}

.botao{ 

border: none;
height: 50px;
width: 150px;
position: absolute;
top: 360px;
margin-left: 250px;
background: rgba(0,0,0,0.5);
color: white;
font-weight: bold;
box-shadow: 1px 10px 19px rgba(0,0,0,0.5);

}

.botao:hover{
    
    background: rgba(0,0,0,1);
    
    
}

.nome{
    
    
height: 40px;
width: 350px;
border: black solid 1px;
position: absolute;
top: 100px;
left: 150px;
border-radius: 3px;

}
.nome:focus{
    
    border: 1px solid #00FF00;
    
}

.sobrenome{

height: 40px;
width: 350px;
border: black solid 1px;
position: absolute;
top: 150px;
left: 150px;
border-radius: 3px;    
}
.sobrenome:focus{
    
    border: 1px solid #0105FB;
    
}

#textocadastro{
    
    
    height: 200px;
    width: 500px;
    top: 20px;
    font-size: 40px;
    left: 70px;
    position: absolute;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 10px rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.7);
}

::-webkit-input-placeholder{

color: rgba(0,0,0,0.5);
font-family: "Comic Sans MS";
position: absolute;
margin-left: 10px;
font-size: 15px;
padding: 5px;
}

#copyrigth{
    
    
    height: 30px;
    width: 100%;
    text-align: center;
    position:absolute;
    bottom: 0;
    /*vertical-align: bottom;    
    display: table-cell;*/
    background: rgba(0,0,0,1);
    color: white;
    min-height: 3%;
    
    font-size: 13px;
    padding-top: 10px;
    
        
}
#copyrigth a{
    
    text-decoration: none; color: rgba(255,255,255,1);
    
}
#copyrigth a:hover{ color: rgba(255,255,255,0.5);}

#top{
    
    height: 39px;
    width: 100%;
    text-align: center;
    position: absolute;
    margin-bottom: 10px;
    background: rgba(0,0,0,1);
    overflow-x: hidden;
    overflow-y: hidden;
    color: white;
    min-height: 3%;
    padding-top: 7px;
    
    box-shadow: 5px 5px  10px rgba(0,0,0,0.5);
    
}
css

  • Thales can make all the HTML and CSS you have available ?

  • I updated the code

2 answers

1

It goes in the css of the DIV that has the form (registration) inside, and there you add:

z-index: 1000;

So will make the div that is holding the content (Registration Form) Will be over the footer.

  • I think I didn’t express myself well, the problem is that the footer is entering the content instead of being below. If I put the z-index will stay on top of the content in the same way

  • A more practical example would be the footer of this site, when I zoom in it gets 100% of the screen when I zoom in it doesn’t enter the content

0

Look man, risking a hunch should be on account of:

position: absolute;

In "divcadastro".

Browser other questions tagged css

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