Footer alignment

Question

I am frying my neurons and so far I have not reached a solution. I am putting together a page, but there is no way for the footer to line up the page. In my machine I solved, but if it opens in a bigger screen the footer is in half, in a mobile or tablet as well. The page and css are in this link. Any idea?

The index and css are here: https://www.dropbox.com/sh/h6pfh6133mwsgpm/AABMZZNXt3V51FlK6TdparXUa?dl=0

The test page here: http://www.venuzka.url.ph/

Someone has an idea?

Answer 1

This problem is due to footer placement in your index.php file. The footer is inside the ID #container

At the bottom of the page remove everything from line 144 to the end, which is from: (<div id="footer">) until (</html>) and paste the modified code into which I will refer below.

Current code:

<div id="footer">
        <br>
            <p> Suporte: <a href="mailto:[email protected]?subject=Suporte%20-%20SIG">Clique Aqui </a></p>
            <p>&copy; Peccin 2011 - 2014. Website Designed by <a href="mailto:[email protected]">TI - Peccin</a></p>
</div>

</div>
</body>
</html>

Modifies to:

</div> <!-- isto fecha a div #container antes de começar o #footer -->
    <div id="footer">
        <br>
            <p> Suporte: <a href="mailto:[email protected]?subject=Suporte%20-%20SIG">Clique Aqui </a></p>
            <p>&copy; Peccin 2011 - 2014. Website Designed by <a href="mailto:[email protected]">TI - Peccin</a></p>
    </div>
</body>
</html>

After this if you still want the footer to be centralized just make the changes in your file styles.css modifying to:

#footer {
    background-color: #010101;
    height: 80px;
    width: 1800px;
    position: relative;
    z-index: 999;
    margin-left: auto; /* linha modificada */
    margin-right: auto; /* linha adicionada */
}

Answer 2

Some script is creating one after closing the . a simple way would be to create a script to get to that object and delete it with css, see if this works:

<script>
$("object[type='application/gas-events-uni']").css({
overflow:'hidden',
display:'none'
})
</script>

Answer 3

This is happening because the footer is set to static. Include this css in the footer:

.footer { position:Absolute; bottom:0; width:100%; }

Answer 4

You can do what @Marcosperes suggested, or you can create code with jQuery to identify the user screen size and update the minimum height of your page content.

In your case you could do more or less like this:

function updtSize($) {
   var mheigth = $(window).height();  // Altura da janela
   mheight -= $("#header").outerHeight(true); // remove a altura do header
   mheight -= $("#nav").outerHeight(true); // remove a altura do menu
   mheight -= $("#footer").outerHeight(true); // remove a altura do footer
   mheight += $("#slides-container").height() - $("#slides-container").outerHeight(true); // remove as margens do footer

   $("#slides-container").css('min-height', mheight); // o mheight agora tem só a altura necessária para o footer encostar no bottom
}


jQuery(document).ready(function($) {
   updtSize($);
   $(window).resize(function(event) {
      updtSize($)
   });
});

Answer 5

Do the following :

div#slides-container {
height: 250px;
overflow: hidden;
width: 960px;
padding-top: 40px;
margin: auto;
}

Remove the div footer inside the container and do the following

<div id="w_footer>
 <div id="footer"></div>
</div>

in css do the following:

#w_footer{
 widht:100%;
 barckground-color:#010101;
}

#footer {
background-color: #010101;
height: 80px;
width: 85%;
margin: auto;
}