Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Renato =)

[Resolvido] Layout CSS

Por , em Desenvolvimento frontend

Recommended Posts

Renato =)    0

Renato =)
Postado

Olá pessoal, estou tentando fazer um layout com CSS. Comecei pelo básico, fiz uma página e deu tudo certo, até que percebi que a div "FOOTER" não segue o tamanho da div "MAIN".

Tentei descobrir o que fazer de todos os jeitos mas não entendi, onde eu errei?

 

 

Código da página:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
<TITLE>Teste CSS</TITLE>
<STYLE type="text/css">
  #logo {
background-image: url("imagens/4.jpg");
background-repeat: no-repeat;
background-position: 270px 0px; 
width: 100%;
height: 192px;
  }
  #header {
background-image: url("imagens/1.jpg");
	position: fixed;
	width: 100%;
	height: 192px;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
  }
  #menu {
line-height:300%;
text-align: center;
background-image: url("imagens/2.jpg");
	position: fixed;
	width: 100%;
	height: 45px;
	top: 192px;
	right: auto;
	bottom: 100px;
	left: 0;
  }
  #main {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 275px;
	right: 0;
	bottom: 0;
	left: auto;
  }
  #footer {
text-align: right;
line-height: 175px; 
background-image: url("imagens/3.jpg");
	position: fixed;
	width: 100%;
	height: 102px;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
  }
</STYLE>
 </HEAD>
 <BODY>
<DIV id="header"><div id="logo"></DIV></div>
<DIV id="menu">Menu</DIV>
<DIV id="main">Conteúdo</DIV>
<DIV id="footer">Site criado por: Renato Böhler</DIV>
 </BODY>
</HTML>

 

Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

ola Renato =), Boa Noite!

então tente adicionar a propriedade clear com o atribute boot na sua id "footer".

Faca uma pesquisa aqui no forum, existem alguns topicos que lhe podem ser util com duvidas similares...

ate mais. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Renato =)    0

Renato =)
Postado

bem, tentei fazer isso mas parece que não funcionou -.-

procurei na internet sobre "clear" e acho que você quis dizer "both" ao invés de "boot", não é?

 

mas com ambos não funcionou, continua dando o mesmo problema...

 

o código está assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
<TITLE>Teste CSS</TITLE>
<STYLE type="text/css">
  body {
font-family: Verdana;
font-size: small;
  }
  img.logo {
position:absolute;
left: 25%;
z-index: 1;
  }
  #header {
background-image: url("imagens/1.jpg");
	position: fixed;
	width: 100%;
	height: 192px;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
  }
  #menu {
line-height:300%;
text-align: center;
background-image: url("imagens/2.jpg");
	position: fixed;
	width: 100%;
	height: 45px;
	top: 192px;
	right: auto;
	bottom: 100px;
	left: 0;
  }
  #main {
margin-left: -20px;
margin-right: -20px;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 275px;
	right: 0;
	bottom: 0;
	left: auto;
  }
  #footer {
clear: both;
text-align: right;
line-height: 175px; 
background-image: url("imagens/3.jpg");
	position: fixed;
	width: 100%;
	height: 102px;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
  }
</STYLE>
 </HEAD>
 <BODY>
<DIV id="header"><a href="#"><img src="imagens/4.jpg" border="0" class="logo"></a></DIV></div>
<DIV id="menu">Menu</DIV>
<DIV id="main">Conteúdo<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>a</DIV>
<DIV id="footer">Site criado por: Renato Böhler </DIV>
 </BODY>
</HTML>

 

abraços ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Renato =), eu aprendi a "colorir" as minhas DIVS enqnto estou posicionando elas..

E está é a visão que tive do seu código:

 

Imagem total:

http://img352.imageshack.us/img352/8940/divestranhaox0.jpg

 

 

PS: só adicionei um " background-color: #;" em cada DIV.

Não estou muito habituado à Tableless, mas acredito que essa área em branco entre as suas DIVs seja algo "ruim", pois não faz parte de nenhuma DIV declarada.

 

E observei agora, que a DIV "main" está 'entrando'. embaixo da DIV "footer"

Oque você quer que aconteça?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Renato =)    0

Renato =)
Postado

sim, eu também fiz isso

 

não sei se o espaço em branco é problemático, mas eu creio que não, mesmo tirando o margin (que causa o espaço branco) o problema continua...

 

é exatamente esse o problema

a DIV main está entrando em baixo da footer, não quero isso, quero que se a div main estiver grande ela empurre a footer para baixo, como num site normal...

 

obrigado pela atenção http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

 

EDIT: agora que vi um </div> a mais do que devia, nao sei se é este o problema, mas não tenho condição de testar agora...

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

Renato =), Boa Noite!

Sim a referencia correta para o valor que citei é "both" e não boot, desculpe.

 

Então, usando a propriedade e retirando as proprieadades position com o valor fixed, acredito que resolve a questão.

Faça um teste. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

E uma dica, dá uma conferida no lab de scripts aqui da seção de WS existem alguns artigos sobre desenvolvimento de layout que podem ser util.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

OLá,

 

Para a próxima zere todas as propriedades, exemplo:

* { margin: 0px; padding: 0px; list-style: none; }
Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito