Skip to main content
2 de 3
adicionou 1111 caracteres ao conteúdo
MANIAMAX
  • 669
  • 7
  • 18

Posicionamento de div

Tou a tentar fazer uma brincadeira com css e html5 deste tipo.

inserir a descrição da imagem aqui

Só que esta a dar varios problemas porque

  1. A div (content) principar nao está a ocupar toda a altura e largura da pagina.
  2. O Posicionamento da div (central) aparenta estar no meio mas quando passa para ecrãs maiores isso não acontece . Codigo

Style

<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    body {
        background-color: #FF0000;
    }
    #centro {
        position: relative;
        margin-top: 20%;
        margin-bottom: 15%;
        width: 100%;
        height: 200px;
        margin-right: 0;
        margin-left: 0;
        background: rgba(255,255,255,0.3);
        box-sizing: border-box;
    }
    section p {
        padding: 10px;
        font-family: Comic Sans MS;
        font-size: 40px;
        width: 100%;
        height: 80%;
        box-sizing: border-box;
        text-align: center;
    }
    footer {
        box-sizing: border-box;
        padding: 10px;
        text-align: center;
    }
    #content {
        width: 100%;
        height: 100%;
        border: 2px solid #8AC007;
        box-sizing: border-box;
    }
</style>

Html

<!DOCTYPE  HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Em Breve</title>
    </head>
    <body>
        <div id="content">
            <section id="centro">

                
                    <p>
                        Teste
                    </p>
                
            </section>
            <footer>
                Teste
            </footer>
        </div>

    </body>
</html>

Ou em https://jsfiddle.net/kingallkong/gqb5ugp0//

Obrigado.

MANIAMAX
  • 669
  • 7
  • 18