• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

atlover

[resolvido] Dúvida simples 3 divs

8 mensagens neste tópico

Então pessoal tudo bem?

É o seguinte, tenho uma dúvida muito simples pk não percebonada de CSS! Eu queria criar uma pagina com este aspecto:

examplejt1.jpg

As partes a vermelho com cerca de 30% da página! Queria que a página fica-se centralizada no ecrã sem que aparece-se as barras de rolagem do browser! As partes a vermelho vão ser iguais (pode-se fazer uma classe não é???)

Desde já muito obrigado

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Dentro do <body>:

<div id="topo">LAWL TOPO!</div>
<div id="corpo">LAWL CORPO WOOT WOOT!</div>
<div id="footer">FOOTER OMG OMG</div>

No CSS:

div#topo, div#corpo, div#footer { width:100%; overflow:hidden; }

div#topo, div#footer { height:30% }
div#corpo { height:40%; }

Espero que seja isto que desejas :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Desde já muito obrigado pela resposta! 

Mas no entanto não funciona, é isto que não percebo. Por exemplo, neste código:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>TOPO</title>

<style type="text/css">

div#topo, div#corpo, div#footer

{

width:100%; overflow:hidden;

}

div#topo, div#footer

{

height:20%

background: #E7AC3C;

}

div#corpo

{

height:60%;

background: #368F37;

}

</style>

</head>

<body>

<div id="topo">TOPO!</div>

<div id="corpo">CORPO </div>

<div id="footer">FOOTER</div>

</body>

</html>

Aparece o corpo da pagina a fundo verde (mas não centrado), de resto o topo e footer não aparecem as cores nos tais 20% que foram definidos! Alguma ideia?

Muito obrigado desde já!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

assim tens o que queres:

<HTML>
<HEAD>
<style>
body {
   margin: 0;
   background-color: red;
}

#topo, #meio, #footer {
   position: absolute;
   width: 100%;
}

#topo {
   top: 0;
   height: 30%;
}
#meio {
   top: 30%;
   height: 40%;
   background-color: green;
}
#footer {
   top: 70%;
   height: 30%;
}
</style>
</HEAD>
<BODY>
<div id="topo">topo</div>
<div id="meio">meio</div>
<div id="footer">fundo</div>
</BODY>
</HTML>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

marinheiro muito obrigado pela resposta, resolveu o problema!

djthyrax muito obrigado também!

Cumprimentos

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Porque raio voces usam isto ?

#topo, #meio, #footer {
   position: absolute;
   width: 100%;
}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Porque raio voces usam isto ?

#topo, #meio, #footer {
   position: absolute;
   width: 100%;
}

Para o width que atribuimos às #topo, #meio, #footer serem contados a partir do início da página e não a partir do sítio onde elas estão no documento. Ou seja, para não ter uma posição relativa.
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora