I am frying my neurons and so far I have not come up with a solution. I'm setting up a page, but there's no way the footer can align the page. In my machine I decided, but it opens in a bigger screen the footer is in the middle, in a cellular or tablet also. The page and the css are in this link. Any ideas?
The index and css are here: link
The test page here: link
Does anyone have an idea?
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 it works:
<script>
$("object[type='application/gas-events-uni']").css({
overflow:'hidden',
display:'none'
})
</script>
This issue is due to the placement of the footer in your index.php file.
The footer is within the ID #container
At the bottom of the page, remove everything from line 144 to the end, which is from: ( <div id="footer"> ) to ( </html> ) and paste the modified code which I'll refer to below.
Current Code:
<div id="footer">
<br>
<p> Suporte: <a href="mailto:[email protected]?subject=Suporte%20-%20SIG">Clique Aqui </a></p>
<p>© Peccin 2011 - 2014. Website Designed by <a href="mailto:[email protected]">TI - Peccin</a></p>
</div>
</div>
</body>
</html>
Modify 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>© 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 changes to your file styles.css by modifying it to:
#footer {
background-color: #010101;
height: 80px;
width: 1800px;
position: relative;
z-index: 999;
margin-left: auto; /* linha modificada */
margin-right: auto; /* linha adicionada */
}
This is occurring because the footer is set to static. Include this css in the footer:
.footer { position: absolute; bottom: 0; width: 100%; }
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 the content of your page.
In your case you could do something 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($)
});
});
Do the following:
div#slides-container {
height: 250px;
overflow: hidden;
width: 960px;
padding-top: 40px;
margin: auto;
}
Remove the footer div 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;
}