Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Footer maior que body

O footer de um projeto que estou criando ultrapassa o body em width. Segue o código:

<!DOCTYPE html>
<html>
    <head>
        <title>Thales Maia</title>
        <meta charset="UTF-8">
        <link rel="icon" href="../img/favicon.png">
        <link rel="stylesheet" href="../css/reset.css">
        <link rel="stylesheet" href="../css/home.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Thasadith">
    </head>
    <body>
        <main> 
            <div class="topo">
                <h1 class="principal">Thales Maia</h1>
                <nav class="menu">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Sobre Mim</a></li>
                        <li><a href="#">Contato</a></li>
                    </ul>
                </nav>
            </div>
            <div class="corpo">
                <img class="primeiro"src="../img/1.png" alt="Quadro pintado">
                <img class="segundo"src="../img/2.png" alt="Quadro pintado">
                <img class="terceiro"src="../img/3.png" alt="Quadro pintado">
            </div>
        </main>
        <div class="baixo">
            <footer>
                <ul class=redessociais>
                    <li><a class="twitter" href="twitter.com/mbthales">Twitter</a></li>
                    <li><a class="github" href="github.com/mbthales">GitHub</a></li>
                </ul>
            </footer>
        </div>
    </body>
</html>
html {
    height: 100%;
}

body {
    background: #EDEDED;
    margin: 0px;
    width: 100%;
    height: 100%;
}

.principal {
    background: #A7ADC6;
    text-align: center;
    padding: 15px;
    font-family: "Thasadith", "Arial" ,sans-serif;
    font-size: 50px;
    margin: 0px;
}

.topo {
    background: #A7ADC6;
    margin-bottom: 35px;
    width: 100%;
}


.menu ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    text-align: center;
}

.menu ul li { 
    display: inline; 
}

.menu ul li a {
    padding: 2px 10px;
    display: inline-block;
    text-decoration: none;
    color: #000000;
    font-family: "Open Sans Condensed", "Arial", sans-serif;
    font-size: 25px;
}

.corpo {
    width: 100%;
    padding-bottom: 80px;
    text-align: center;
}

.primeiro {
    margin: 80px;
    float: left;
    width: 260px;
    height: 190px;
}

.segundo {
    margin: 80px;
    width: 260px;
    height: 190px;
}

.terceiro {
    margin: 80px;
    float: right;
    width: 260px;
    height: 190px;
}

.baixo {
    background-color: #A7ADC6;
    color: #000000;
    margin: 0;
    padding: 30px;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.baixo ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    text-align: center;
}

.baixo ul li {
    display: inline;

}

.baixo ul li a {
    display: inline-block;
    padding: 2px 10px;
    font-family: "Open Sans Condensed", "Arial", sans-serif;
    color: #000000;
}

4 respostas
solução!

mbthales, boa tarde!

Isso acontece porque você está definindo um padding para o .baixo na seletor

.baixo {
    background-color: #A7ADC6;
    color: #000000;
    margin: 0;
    padding: 30px; <---Aqui
    bottom: 0;
    position: absolute;
    width: 100%;
}

Você pode tirar essa regra desse seletor, e ai o <footer> teria o tamanho máximo(se não tiver você pode definir padding para 0px), e ainda definir esse padding dentro do seletor footer{...}


Só as alterações acima irão funcionar, mas caso você queira manter as regras você pode alterar de:

<div class="baixo">
            <footer>
                <ul class=redessociais>
                    <li><a class="twitter" href="twitter.com/mbthales">Twitter</a></li>
                    <li><a class="github" href="github.com/mbthales">GitHub</a></li>
                </ul>
            </footer>
        </div>

para

<footer>
   <div class="baixo">
      <ul class=redessociais>
         <li><a class="twitter" href="twitter.com/mbthales">Twitter</a></li>
         <li><a class="github" href="github.com/mbthales">GitHub</a></li>
      </ul>
   </div>
</footer>

Espero ter ajudado e bons estudos! :D

Muito obrigado. E você pode poder me tirar uma outra dúvida nesse tópico sobre um outro assunto?

Posso sim! qual sua dúvida?

Pode deixar, eu já resolvi. Muito obrigado novamente!!!