Problem with Div scrolling when running Zoom

Asked

Viewed 2,063 times

0

Dear friends, I’m putting together the standard layout for some pages I’m developing, but I’m still a beginner in html and css pages. In my code, the footer tag moves from the main div when I zoom in, I would like to know how to prevent elements from leaving the div when the zoom is enabled. Follow the HTML and CSS code I’m using.

HTML

<!DOCTYPE HTML>

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="reply-to" content="[email protected]" />
    <link type="text/css" rel="stylesheet" href="../css/cabecalho.css"/>
    <script type="text/javascript" src="../../js/jquery-ui.js"></script>
    <script type="text/javascript" src="../../js/jQuery-Mask-Plugin.js"></script>
    <script type="text/javascript"></script>

    <title>System</title>
</head>

<body>
    <div id="principal">
        <header>
            <nav class="menu2">
                <ul>
                    <li><a href="#" class="current" >Produtos </a></li>
                    <li><a href="#" class="">Clientes</a></li>
                    <li><a href="#" class="" >Produtos </a></li>
                    <li><a href="#" class="">Clientes</a></li>
                </ul>
            </nav>
        </header>
    </div><!-- fim principal-->

    <footer>
        <p align="center">Copyright © 2014 Designed by <a href="#" class="">Teste</a></p>
    </footer>

    </body>
</html>

CSS

html {
    background-color:rgba(0,0,0,0.75);
    min-height:1020px;
    min-width:740px;
}

body {
    font-family: verdana;
    font-style: normal;
    font-weight: lighter;
    font-size: 13px;
    line-height: 22px;
    text-align: justify;
}

div#principal {
    width:1020px;
    height:740px;
    border:1px solid black;
    margin-left:auto;
    margin-bottom:auto;
    margin-top:auto;
    margin-right:auto;
    /*visibility:hidden;*/
    background-color:#E6E6FA;
    -webkit-box-shadow: 0px 9px 50px -3px rgba(250,250,250,1);
    -moz-box-shadow: 0px 9px 50px -3px rgba(250,250,250,1);
    box-shadow: 0px 9px 50px -3px rgba(250,250,250,1);
    overflow: auto;
}

header {
    position:absolute;
    padding: 0px 0px 0px 0px;
    height: 207px;
    width: 1020px;
    background: url(../images/logo_img.png) top center no-repeat;
    background-size: 1010px;
    background-color:#E6E6FA;
}

nav {
    text-align: center;
    background: linear-gradient(to bottom, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    font-size: 0;
    padding: 0px 0px 0px 0px;
    margin: 175px 0px 0px 2px;
    width: 1018px;
    height: 30px;
}

nav ul {
    padding: 0px 0px 0px 0px;
}

nav ul li {
    display:inline;
}

nav a {
    border: 1px solid black;
    display: inline-block;
    padding: 0 20px;
    background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); 
    color:White;
    text-decoration:none;
    font: bold 12px Arial;
    line-height: 29px;
}

nav a:hover {
    background: linear-gradient(to bottom, #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
}

nav a.current {
    background: linear-gradient(to bottom, #b4e391 0%,#61c419 50%,#b4e391 100%); /* W3C */
}

nav a.dummy {
    width:2px;
    padding:0 0;
}

footer {
    padding: 0px 0px 0px 0px;
    margin-left: auto;
    margin-bottom: auto;
    margin-top: -38px;
    margin-right: auto;
    width: 1020px;
    height: 20px;
}

footer p {
    padding: 0px 0px 0px 0px;
    border: 1px solid red;
}

aside {
    border: 1px solid red;
}

#botao {
    border: 1px solid red;
}

Thank you

html css css3

3 answers

1

If Zoom, is manual (Ctrl+scroll) and from what I understand you want to fit the footer exactly at the foot of the main div, just change the footer css

margin-top: -38px;

for

margin-top: -36px;

1

I was able to solve your problem by including at the beginning of css:

* {margin:0;padding:0;clear:none;}
div#principal {
    margin:10px auto 0px; /* MUDE O MARGIN */
}

footer {
    padding:0px;
    margin:auto;
    width: 1020px;
    height: 20px;
}

0

my friend, I will simplify and help your life...

whenever you do a site project, always put all your div’s in a single div example:

html project:

<html>
<head>
</head>
<body>

<div id="centralizar">

<!-- <div id.... -->
</div>
<!-- <div id.... -->
</div>
<!-- <div id.... -->
</div>
<!-- <div id.... -->
</div>
<!-- <div class... -->
</div>

</div> <!--Centralizar-->

here in case you are involving your entire site within the center div

</body>
</html>
<style>
    #centralizar{
        width:100%;
        height:100%;
        margin:auto;
    }
</style>

Browser other questions tagged html css css3

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