segunda-feira, 2 de abril de 2012

Estilo em CSS que divide página em topo, conteúdo e rodapé

Objetivo:
Criar um "topo","conteudo","rodape" dentro de "tudo" utilizando apenas conceitos básicos em HTML e CSS

Nível de Dificuldade:
Básico.

Pré-requisitos:
Conhecimento inicial sobre HTML e CSS.

Para criar um rodapé que deixa nosso site sempre organizado é simples:

Código HTML:
<html>
<head>
<!-- aqui entra o código CSS --></head>
<body>
        <div class="tudo">
                <div class="topo"></div>
                <div class="conteudo"></div>
                <div class="rodape"></div>
        </div>
        </body>
</html>

Código CSS:
<style type="text/css">
        body {
                margin:0;
                padding:0;
                height:100%;
        }
        .tudo {
                min-height:100%;
                position:relative;
        }
        .topo {
                background:red;
                padding:40px;
        }
        .conteudo {
                padding:10px;
                padding-bottom:60px;
        }
        .rodape {
                position:absolute;
                bottom:0;
                width:100%;
                height:90px;
                background:blue;
        }
</style>
Baixar HTML

Nenhum comentário:

Postar um comentário

"Ajude com nossas INFOrmações. Retribua com bons comentarios."

Postagens populares