Jump to content
Fórum Script Brasil
  • 0

Meu rodapé está ficando no topo da página!


Vasconcel0s
 Share

Question

Pessoal, 

bom dia!
 
Estou com um problema, estou fazendo um projeto da faculdade, e o rodapé está ficando no topo da página, gostaria de saber se alguém pode me ajudar. 
O código é este:
 
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Farmácia Vasconcelos</title>
<link href="css/estilo.css" rel="stylesheet">
</head>
<body>
<figure id="logo"><a href="index.php"><img src="imagens/logo.jpg"></a></figure>
<nav>
<div id="botoes-menu">
<a href="medicamentos.php"><img src="imagens/bt_medicamentos.png" onMouseOver="this.src='imagens/bt_medicamentos2.png'" onMouseOut="this.src='imagens/bt_medicamentos.png'"></a>
<a href="higiene.php"><img src="imagens/bt_higiene.png" onMouseOver="this.src='imagens/bt_higiene2.png'" onMouseOut="this.src='imagens/bt_higiene.png'"></a>
<a href="mae.php"><img src="imagens/bt_mae.png" onMouseOver="this.src='imagens/bt_mae2.png'" onMouseOut="this.src='imagens/bt_mae.png'"></a>
<a href="perfumes.php"><img src="imagens/bt_perfumes.png" onMouseOver="this.src='imagens/bt_perfumes2.png'" onMouseOut="this.src='imagens/bt_perfumes.png'"></a>
</div>
</nav>
<nav>
<ul id="menu">
<a href="index.php"><li>Home </li></a>
<a href="farmacia.php"><li>A Farmácia </li></a>
<a href="funcionario.php"><li> Funcionário </li></a>
<a href="faleconosco.php"><li> Fale Conosco </li></a>
</ul>
</nav>
            
        <figure id="banner"><img src="imagens/banner.jpg"></figure>
 
<footer id="rodape">
       <p>Estamos localizados na rua das lindas, número 91<br/>
 Caetés I, Abreu e lima - PE / CEP: 53530-470<br/>
 Telefone:(81)98888-0000/99977-5544</p>
    </footer>
 
</body>
</html>
 
@charset "utf-8";
 
body{
background-image: url(../imagens/fundo.gif);
background-repeat: repeat-x;
font: sans-serif;
    margin: 0;
    padding: 0;
}
 
/*Topo*/
figure#logo{
position: absolute;
top: -16px;
left: 80px;
}
 
nav div#botoes-menu{
position: absolute;
top: 95px;
left: 280px;
}
 
nav ul#menu{
position: absolute;
font-size: 18pt;
top: 120px;
left: 250px;
font-family: arial;
}
 
nav ul#menu li{
list-style: none;
float:left;
   padding: 20px;
}
 
nav ul#menu a{
text-decoration:none;
color: #a0a0a0;
font-weight: bold;
border: 0px solid #000000;
}
nav ul#menu a:hover{color:#003333}
 
/*Fim topo*/
 
/*Corpo do site*/
figure#banner{
position: absolute;
top: 250px;
left: 200px; 
}
 
/*Fim do corpo*/
 
/*Footer*/
footer{
    background-color: #fff;
}
Edited by Vasconcel0s
Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Olá!

Em html5 use apenas <br>, veja: http://www.w3schools.com/tags/tag_br.asp

Sugiro que use a tag <main> como um wrapper:

<!doctype html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Farmácia Vasconcelos</title>
        <link href="css/estilo.css" rel="stylesheet">
    </head>
    <body>
        <main>
            <figure id="logo"><a href="index.php"><img src="imagens/logo.jpg"></a></figure>
            <nav>
                <div id="botoes-menu">
                    <a href="medicamentos.php"><img src="imagens/bt_medicamentos.png" onMouseOver="this.src = 'imagens/bt_medicamentos2.png'" onMouseOut="this.src = 'imagens/bt_medicamentos.png'"></a>
                    <a href="higiene.php"><img src="imagens/bt_higiene.png" onMouseOver="this.src = 'imagens/bt_higiene2.png'" onMouseOut="this.src = 'imagens/bt_higiene.png'"></a>
                    <a href="mae.php"><img src="imagens/bt_mae.png" onMouseOver="this.src = 'imagens/bt_mae2.png'" onMouseOut="this.src = 'imagens/bt_mae.png'"></a>
                    <a href="perfumes.php"><img src="imagens/bt_perfumes.png" onMouseOver="this.src = 'imagens/bt_perfumes2.png'" onMouseOut="this.src = 'imagens/bt_perfumes.png'"></a>
                </div> 
            </nav>
            <nav>
                <ul id="menu">
                    <a href="index.php"><li>Home </li></a>
                    <a href="farmacia.php"><li>A Farmácia </li></a>
                    <a href="funcionario.php"><li> Funcionário </li></a>
                    <a href="faleconosco.php"><li> Fale Conosco </li></a>
                </ul>
            </nav>

            <figure id="banner"><img src="imagens/banner.jpg"></figure>

            <footer id="rodape">
                <p>Estamos localizados na rua das lindas, número 91<br>
                    Caetés I, Abreu e lima - PE / CEP: 53530-470<br>
                    Telefone:(81)98888-0000/99977-5544</p>
            </footer>
        </main>
    </body>
</html>

Sugiro que defina o box-sizing

*{
    box-sizing: border-box;   
}
html, body{
    width: 100%;
    height: 100%;
    margin:0;
}
body{
    background: url(../imagens/fundo.gif) repeat-x;
    font: sans-serif;
    margin: 0;
    padding: 0;
}
main {
    position:relative;
    min-height:100%;
    height:auto;
    padding-bottom:104px; /* configure para que fique com a altura do rodapé */
    overflow: hidden;
    border:2px dashed red;
}
/*Topo*/
figure#logo{
    position: absolute;
    top: -16px;
    left: 80px;
}

nav div#botoes-menu{
    position: absolute;
    top: 95px;
    left: 280px;
}

nav ul#menu{
    position: absolute;
    font-size: 18pt;
    top: 120px;
    left: 250px;
    font-family: arial; 
}

nav ul#menu li{
    list-style: none;
    float:left;
    padding: 20px;
}

nav ul#menu a{
    text-decoration:none; 
    color: #a0a0a0;
    font-weight: bold;
    border: 0px solid #000000;
}
nav ul#menu a:hover{color:#003333}

/*Fim topo*/

/*Corpo do site*/
figure#banner{
    position: absolute;
    top: 250px;
    left: 200px; 
}

/*Fim do corpo*/

/*Footer*/
footer{
    background-color: #eafaea;
    box-shadow: 0px -3px 2px #999;
    width:100%;
    position:absolute;
    bottom:0px;
    text-align:center;
} 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.6k
    • Total Posts
      646.2k
×
×
  • Create New...