Entrar Ainda não tem acesso?
4
respostas

Cabeçalho redimenciona na altura.

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas, no capítulo Começando um formulário e atividade Estilos para o formulário

por Samuel Maas Anton
| 20.4k xp | 27 posts
Informática

Como o footer está pegando 100% height no exemplo dele, e me parece estar fixo sempre embaixo, ao redimendiocar o meu fica tipo no meio da página, o que pode ser isso?

4 respostas
por Estudante
| 589.2k xp | 188 posts

Samuel,

Coloca seu código no Github ou outro repositório.

Sem ver seu código fica difícil dizer.

por Felipe Miranda de Moura
| 134.5k xp | 9 posts

O seu footer está fora da tag main? Porque no começa definimos a tag main com um tamanho específico.

por Samuel Maas Anton
| 20.4k xp | 27 posts
Informática

Meu cidugi HTML

    <!DOCTYPE html lang = "PT-BR">
        <html>
            <head>
                <meta charset = "UTF-8">
                <title>Projeto novo</title>

                <link rel="stylesheet" href="reset.css">
                <link rel="stylesheet" href="style.css">
            </head>

            <body>
                <header>
                    <div class="caixa">
                            <h1><img src="img\banner.png" id="logo"></h1>
                        <nav>
                            <ul>
                                <li><a href="index.html" class="header-link">Home</a></li>
                                <li><a href="sobre.html" class="header-link">Sobre</a></li>
                                <li><a href="contato.html" class="header-link">Contatos</a></li>
                                <button type="submit" class="btn-acessar"><a href="login.html">Acessar</a></button>
                            </ul>
                        </nav>
                    </div>
                </header>

                <main>
                    <ul class="produtos">
                        <li>
                            <h2>Beneficios</h2>
                            <img src="img/money.png" id="img-money">
                            <p class="produto-descricao">Para mais informações entre em contato.</p>
                            <p class="preco-produto">Consulte valor</p>
                        </li>
                        <li>
                            <h2>Beneficios</h2>
                            <img src="img/money.png" id="img-money">
                            <p class="produto-descricao">Para mais informações entre em contato.</p>
                            <p class="preco-produto">Consulte valor</p>
                        </li>
                        <li>
                            <h2>Beneficios</h2>
                            <img src="img/money.png" id="img-money">
                            <p class="produto-descricao">Para mais informações entre em contato.</p>
                            <p class="preco-produto">Consulte valor</p>
                        </li>
                    </ul>
                </main>

                <footer>
                    <!-- <img src="img/banner.png" id="logo"> -->
                    <ul class="footer-contatos">
                        <li>
                            <h3>Contatos</h3>
                            <p>Celular: (51) 98135-6279</p>
                            <p>Email: controlservice@gmail.com</p>
                        </li>
                    </ul>
                </footer>
            </body>
        </html>
i
body{
    background: white;
}

header{
    background: url("img/fundo-rodape.jpg");
    border-bottom: orange solid 4px;
    /* width: 1080px; */
}
.caixa{
    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav{
    position: absolute;
    right: 0;
    top: 65px;
}

nav li{
    display: inline;
    font-size: 30px;
    margin-left: 30px;

}

.header-link{
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    text-decoration: none;
}

.header-link:hover{
    color: orange;
    font-size: 35px;
}

.btn-acessar{
    /* height: 40px; */
    vertical-align: top;
    margin-top: 2px;
    margin-left: 30px;
    height: 30px;
    width: 70px;
    border: solid 2px orange;
    font-weight: bold;
    text-align: center;
    background: black;
    color: orange;
}

.btn-acessar a{
   text-decoration: none;
   color: orange;
}

.btn-acessar:hover{
    font-size: 20px;
    width: 90px;
    background: orange;
}

.btn-acessar:hover a{
    color: black;
}

.btn-acessar:active{
    color: white;
    border: 2px solid orange;
}

#logo{
    height: 100px;
    width: 120px%;
    padding: 30px;
}

.produtos{
    width: 940px;
    margin: 0 auto;
    padding: 30px 0;
}

#img-money{
    width: 120px;
    height: 110px;
    margin-top: 60px;
}

.produtos h2{
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
}

.produto-descricao{
    font-size: 18px;
    margin-top: 30px;
}

.preco-produto{
    font-weight: bold;
    font-size: 25px;
    margin-top: 60px;
}

.produtos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    /* background: orange; */
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    border-radius: 20px;
}

.produtos li:hover{
    border-color: orange;
}

.produtos li:active{
    border-color: white;
}

.produtos li:hover h2{
    font-size: 30px;
}

.produtos li:hover p{
    font-size: 25px;
}

footer{
    text-align: center;
    background: url("img/fundo-rodape.jpg");
    border-top: orange solid 4px;
    padding: 20px;
    /* width: 940px; */
}

.footer-contatos{
    color: white;   
}

.footer-contatos li{
    display: inline-block;
    font-size: 20px;
    color: white;
}

.footer-contatos h3{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 25px;
    color: orange;
    text-transform: uppercase;
    font-weight: bold;    
}

main {
    width: 940px;
    margin: 0 auto;
}

form {
    margin: 40px 0;
}

form label {
    display:block;
    font-size: 20px;
    margin: 0 0 10px;
}

form input {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

textarea{
    margin-bottom: 20px;
}
por Felipe Miranda de Moura
| 134.5k xp | 9 posts

Bom dia Samuel. Esse problema de dimensionamento ocorre quando vamos ver a responsividade né? Se for isso está faltando as medias querys para mudar a lista que está com display inline para block