CODEWITHSUNDEEP
htmlcss
Lucas Rezende
Lucas Rezende

Reputation: 2676

Footer over page content

I am trying to stick the foot on the bottom of my page. For that, I read lots of web sites and all of them tells me the same.

After I have done what was mentioned, my footer really stuck on the bottom... BUT... the content of the page is covered by this!

My CSS has these properties:

html, body {
  height: 100%;
}

body {
  margin: 0px;
  font-family: Arial;
  background-image: url("../img/bg2.jpg");
}

.geral {
    min-height:100%;
    position: relative;
}

.container {
  width: 900px;
}

.container img {
  width: 250px;
  float: left;
}

.container .btn_criar_conta {
  width: 100px;
  float: right;
}

.container .user_detail {
  width: 300px;
  float: right;
}

#topo_pagina {
  height: 110px;
}



.box_login_conteiner {
  width: 410px;
  text-align: left;
}

.box_login {
  width: 350px;
  min-height: 200px;
  background-color: white;
  font-family: Arial;
  font-size: 13px;
  text-align: right;
  padding: 10px;
  border: 1px white solid;
  border-radius: 0.5em;
  color: grey;
  box-shadow: lightgrey 0.0em 0.5em 0.9em;
  padding-right: 50px;
}

.box_login li {
  list-style: none;
}

.box_login a {
  color: blue;
  text-decoration: none;
}

.box_login a:hover {
  color: blue;
  text-decoration: underline;
}

.box_login input {
  border: 1px whitesmoke solid;
  border-radius: 0.5em;
  box-shadow: lightgrey 0.0em 0.1em 0.1em;
  height: 30px;
  width: 250px;
  padding: 5px;
  color: grey;
}

.box_login .img {
  border: none;
  width: 100px;
}

.box_login .btn_submit {
  border: 1px seagreen solid;
  border-radius: 2em;
  box-shadow: grey 0.0em 0.1em 0.1em;
  height: 30px;
  width: 100px;
  padding: 5px;
  color: white;
  background-color: seagreen;
}

.index_login {
  text-align: justify;
  float: right;
  width: 400px;
  color: #2b3856;
  font-family: Geneva;
}

.index_login img{
  text-align: right;
  width: 400px;
}

.index_login hr {
  background-color: lightblue;
  border: 0px;
}

.info_login {
  font-size: 11px;
  padding: 5px;
  background-color: lightgrey;
  border-radius: 0.5em;
  color: grey;
}

.info_login a {
  color: blue;
  text-decoration: none;
}

.info_login a:hover {
  color: blue;
  text-decoration: underline;
}


.box_registrar_conteiner {
  width: 430px;
  text-align: left;
}

.box_registrar {
  width: 430px;
  min-height: 200px;
  background-color: white;
  font-family: Arial;
  font-size: 13px;
  text-align: right;
  padding: 10px;
  border: 1px white solid;
  border-radius: 0.5em;
  color: grey;
  box-shadow: lightgrey 0.0em 0.5em 0.9em;
  padding-right: 50px;
}

.box_registrar li {
  list-style: none;
}

.box_registrar a {
  color: blue;
  text-decoration: none;
}

.box_registrar a:hover {
  color: blue;
  text-decoration: underline;
}

.box_registrar input {
  border: 1px whitesmoke solid;
  border-radius: 0.5em;
  box-shadow: lightgrey 0.0em 0.1em 0.1em;
  height: 30px;
  width: 250px;
  padding: 5px;
  color: grey;
}

.box_registrar .img {
  border: none;
  width: 100px;
}


.rodape {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
  background-color: grey;
  color: white;
  font-family: Geneva;
  font-size: 11px;
}


.rodape a {
  color: white;
  text-decoration: none;
}

.rodape a:hover {
  color: white;
  text-decoration: underline;
}

.rodape #menu {
  float: left;
  margin-right: 50px;
}

.container_footer {
  width: 900px;
  text-align: left;
}

And my HTML is like this:

<html>
    <head>
        <title>Site</title>
        <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style1.css">
    </head>
    <body>
        <div class="geral">
            <div id="topo_pagina">
                <div align="center">
                    <div class="container">
                        <br/>
                        <br/>
                        <a href="/"><img src="{{ STATIC_URL }}img/logo1.png"></a>

                        {% if user.is_authenticated %}
                            <div class="user_detail">
                                <br/>
                                Olá {{ user.first_name|capfirst }}! - <a href="/logout/">Logout</a>
                            </div>
                        {% else %}
                            <a href="/login/"><input type="image" src="{{ STATIC_URL }}img/btn_logar_conta.png" class="btn_criar_conta"></a>
                            <a href="/registrar/"><input type="image" src="{{ STATIC_URL }}img/btn_criar_conta.png" class="btn_criar_conta"></a>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div id="conteudo_pagina">
                <div align="center">
                    <div class="container">
                    {% block conteudo_pagina %}
                    {% endblock %}
                    </div>
                </div>
            </div>  
            <br clear="all">
            <div class="rodape">
                <div align="center">
                    <div class="container_footer">
                        <div id="menu">
                            <h4>Multiplikação</h4>
                            <a href="/login/">Acessar</a><br/>
                            <a href="/registrar/">Criar conta</a><br/>
                        </div>
                        <div id="menu">
                            <h4>Sobre a empresa</h4>
                            Quem somos<br/>
                            Nosso time<br/>
                            Trabalhe com a gente<br/>
                        </div>
                        <div id="menu">
                            <h4>Conectividade</h4>
                            Facebook<br/>
                            Twitter<br/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Could someone help me? I really don't know what to try. =(

Thanks in advance for all!

Upvotes: 2

Views: 2535

Answers (3)

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

Here is a Fiddle with your markup modified to implement a sticky footer:

http://jsfiddle.net/2MXvP/1/

The technique I have used is this one: http://www.cssstickyfooter.com/

The significant changes are:

  • The .rodape element has been moved in the markup so it is a sibling of .geral.
  • .rodape has a negative top margin equivalent to its height.
  • .geral has a new child element, .main, which has bottom padding equivalant to the height of .rodape.

I might have made some other CSS changes too, but only to .rodape, .geral and .main.

If you look at http://www.cssstickyfooter.com/ I linked to above you should be able to figure out how it works. There are some notes on that page about IE and Opera compatibility, which I have not implemented in my Fiddle, and I only tested in Chrome.

Upvotes: 1

anthonytwp
anthonytwp

Reputation: 247

Simple:

Remove position: absolute; from your css (line 189 of your css above).

The reason why your footer is covering the content is because its positioning is absolute, thus taking it out of the normal flow of the content. Once you remove the line mentioned above, .rodape will be statically positioned by default - it will then take into account the elements before it (e.g. #conteudo_pagina) and it will be placed after them (without covering them).

One thing you might want to know:

<br clear="all"> uses clear, a deprecated HTML attribute that you DO NOT want to use in your css. Try using padding as suggested by ABCaesar instead.

Upvotes: 0

ABCaesar
ABCaesar

Reputation: 122

It sounds like you want the footer to be visible at all times, but you don't want the very bottom of your content to be covered up by it. If that's the case, you can add a padding-bottom property to your .geral class.

Unfortunately, I'm not sure which is your footer here, and nothing in your CSS is really helping me figure it out, but here's an example anyways, assuming your footer is 200px tall:

.geral {padding-bottom:200px}

Should give you the exact amount of space to see the footer without it covering up anything.

EDIT If you want it to be constantly visible, but not covering up text, take .rodape out of .geral and put it inside the body tag. Your html should like this now:

<html>
    <head>
        <title>Site</title>
        <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style1.css">
    </head>
    <body>
        <div class="rodape">
             <!-- rodape content -->
        </div>
        <div class="geral">
             <!-- geral content -->
        </div>
    </body>
</html>

Add this style to your CSS

.rodape {width:100%; height:200px; position:fixed;}
.geral {padding-bottom:200px;}

I think that will get you the effect you desire.

Upvotes: 0

Related Questions