Skip to main content
removeu 65 caracteres do conteúdo
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

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>
* {
  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;
}
<div id="content">
  <section id="centro">
    <p>
      Teste
    </p>
  </section>
  <footer>
    Teste
  </footer>
</div>

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

 

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//

* {
  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;
}
<div id="content">
  <section id="centro">
    <p>
      Teste
    </p>
  </section>
  <footer>
    Teste
  </footer>
</div>
 

adicionou 1111 caracteres ao conteúdo
Fonte Link
MANIAMAX
  • 669
  • 7
  • 18
  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

Meu código atual está assim 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//

  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 .

Meu código atual está assim https://jsfiddle.net/kingallkong/gqb5ugp0//

  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//

Fonte Link
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 .

Meu código atual está assim https://jsfiddle.net/kingallkong/gqb5ugp0//

Obrigado.