Publicado em 10 de abr.

height:100% nao quer ficar na tela toda

Caros amigos,

estou montando um layout para um site, utilizando somente de DIV's, o famoso Tableless.

Pois bem, eu gostaria de ter 2 BG's mas, como o seletor de multiplos BG's é só no CSS3, pouco implementado, então resolvi fazer uma tentativa.

No BODY do documento, vai ser um BG, (no exemplo, está em vermelho pois ainda não tenho a imagem). E então, fiz uma DIV chamada 'bodydiv', na qual engloba todo o layout, coloquei ela com a imagem do personagem a esquerda, com background-position: bottom left;. Nesta mesma DIV, coloquei width:100%;height:100%; para que apareça o personagem todo (no caso, a imagem é ate a coxa).

Porém, a mesma não está 'aceitando' o height:100%; e só fica no tamanho do layout interno...

O quê estou fazendo errado??

Site: http://ddl.exofire.net/pumpminas/index.php

O CSS é http://ddl.exofire.net/pumpminas/web_styles.css a parte que interessa é essa aqui:

body {

	margin:0;
	background-color:#FF0000;
	background-image: url(./images/bgbody.gif);
	background-repeat: repeat;
	padding:0;
	font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
 }

#bodydiv {
	width:100%;
	height:100%;
	margin:0;
	background-color: transparent;
	background-image: url(./images/bg.gif);
	background-repeat: no-repeat;
	background-position: bottom left;
	background-attachment:fixed;
	padding:5px;
	padding-bottom:35px;
	font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
 }

Agradeço a ajuda :)

http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Discussão (11)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

webflex· 10 de abr.

Olá,

Experimente colocar na div global:

height: 100%;Podia fazer testes mas não tenho as imagens necessárias.

Cumps \o/

DarkDragonLord· 10 de abr.

>
Olá,

Experimente colocar na div global:

height: 100%;Podia fazer testes mas não tenho as imagens necessárias.

Cumps \o/

aconteceu nada :P

:blink: :blink:

mas se fosse pra acontecer algo, seria scroll infinito... ou ela ia ficar apenas do tamanho da screen do visitante e o resto do texto ia passar da div, não?

ah, agora ja fiz o fundo e as devidas estilizações..

Se eu colocar o background da bodydiv no body (e tirar os q estao lah), ai fica perfeito.. mas ai n vai ter a logo repetida igual tá...

q div doida o.O

brcontainer· 10 de abr.

Titulo do tópico editado por estar fora das regras

Ajuda com DIV http://forum.imasters.com.br/public/style_emoticons/default/seta.gif height:100% nao quer ficar na tela toda

programador php· 11 de abr.

* html body {

	height: 100%;
}

abraço

Michelly· 11 de abr.

Nossa eu estou com um problema semelhante... No meu caso eu quero que os DIVs internos cresçam e o DIV que irá englobar o conteúdo cresça juntamente com eles e vice-versa. No FF funciona a propriedade height: 100% porém no IE não...

DarkDragonLord, para funcionar, pelo menos no firefox, eu criei um DIV chamado "conteudo" e coloquei nele e nos DIVs internos a ele o height: 100%.

PS: Desculpe a mensagem anterior... rsrs... Salvei sem querer antes de terminar de escrever.

brcontainer· 11 de abr.

>
Nossa eu estou com um problema semelhante... No meu caso eu quero os DIVs internos que o meu DIV que irá englobar o conteúdo cresça de acrodo com os DIVs internos

DarkDragonLord

leia isso:http://forum.imasters.com.br/index.php?showtopic=261803

falow

DarkDragonLord· 11 de abr.

OK, tentei varias coisas nada fica..

Só no BODY que funciona certinho.. Porém no body já tem outra imagem... Pq CSS3 demora tanto :( (ele tem suporte a multiplas imgs de background)

Então vou mudar minha pergunta.

COMO FAZER uma div se comportar como o BODY. Ou seja, como se eu tivesse dois 'body' na página? Assim o primeiro teria a imagem com a logo e o 'segundo', como se fosse uma layer no photoshop, teria o bg do carinha fixado no canto..

Tem como o.O?

brcontainer· 11 de abr.

Isso do CSS3 que você falow não tem muita coerencia. O comportamento do DIV está errado por que você fez errado.

Faça assim:

Adicione este doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ponha isso no seu CSS:

	margin:0;
	padding:0;

}

html,body{

	width:100%;
	height:100%;
}

body {

	background-color:#000;
	background-image: url(./images/bgbody.gif);
	background-repeat: repeat;
	background-attachment:fixed;
	font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
}

#worldmax {
	text-align:center;
	background-image: url([http://ddl.exofire.net/pumpminas/images/bg.gif);](http://ddl.exofire.net/pumpminas/images/bg.gif);)
	background-repeat: no-repeat;
	background-position: bottom right;
	background-attachment:fixed;
	height:100%;
}

Seria assim o HTML:

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml%22)

<head>

	<title>.:: Pump Minas ::.</title>

	<meta name="Raphael DDL" content="Layout by Raphael 'DarkDragonLord' França at RaphaelDDL.com | ddl.exofire.net" />

 

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 

	<meta name="keywords" content=" " />

	<meta name="description" content=" " />

	<link rel="SHORTCUT ICON" href="./favicon.png" type="image/gif" /> <!-- Icon for FF -->

	<link rel="SHORTCUT ICON" href="./favicon.ico" /> <!-- Icon for IE -->

</head>

 

<body onload="MM_preloadImages('./images/menu_bg_hl.gif','./images/menu_bg.gif')">

<div id="worldmax">

 

 

<div id="global" >

	<div id="headerwrap" >

 <div id="header">

  <!--<ul>

 

 <li class="headup"> Your Title Here </li>

 <li class="headsub"> Sub Title here </li>

 </ul>-->

 

 </div>

 <div id="menu">

<ul>

<li><a href="index.php">Home</a></li>

<li><a href="index.php?ddl=event">Eventos</a></li>

<li><a href="index.php?ddl=clubs">Clubes Mineiros</a></li>

<li><a href="index.php?ddl=downloads">Downloads</a></li>

<li><a href="index.php?ddl=newsarchive">Arquivo de Notícias</a></li>

 

<li><a href="index.php?ddl=contact">Contato</a></li>

 

</ul>

 </div>

 

	</div>

 

 <div id="wrapper" class="clearfix" >

 <div id="colwrapper" class="clearfix">

 <div id="content" >

 

 <div id="phpinclude">

 

 

<h1 class="dest">Welcome to Template #1 by Raphael DDL</h1>

 

<p> This is a FREE Template provided by .dragon//CREATIVE Website. </p>

 

<p> Report imediatly if you have purchased or downloaded this template other than ddl.exofire.net</p>

 

<p>Regards,<br /> Raphael DDL.</p>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

</div> </div>

 <div id="nav">

 <div id="navinside">

 

 

 

 

 

 <p>Barra Lateral</p>

 

 <p>Outro paragrafo, <br /> blabla</p>

 

 

 

 

 

 </div>

 </div>

 </div>

 </div>

 

	<div id="footer" >

 

	Copyright © 2008 PumpMinas.com.br ~ Todos os direitos reservados. <span style="font-size:9px;">+55 DDD</span><br />

 

 

	<table width="98%" border="0" align="center">

	<tr>

 <td align="left" valign="middle" width="33%">

 

 <a title="Layout produzido por: RaphaelDDL.com" target="_blank" href="[http://raphaelddl.com/?lang=pt"](http://raphaelddl.com/?lang=pt) style="font-size:6px;">

 <img src="./images/copy.gif" border="0" title="Layout produzido por: RaphaelDDL.com" alt="Produzido por: RaphaelDDL.com" /></a>

 

 

 </td>

 <td align="center" valign="middle" width="33%">

 

 <a href="[http://validator.w3.org/check?uri=referer">](http://validator.w3.org/check?uri=referer%22)

	<img style="border:0;"

 src="./images/w3cvalid_xhtml.jpg"

 alt="Valid XHTML 1.0 Transitional"/></a>

 

 

 <a href="[http://jigsaw.w3.org/css-validator/">](http://jigsaw.w3.org/css-validator/%22)

 <img style="border:0;"

 src="./images/w3cvalid_css.jpg"

 alt="Valid CSS!" />

 </a>

 

 </td>

 

 <td align="right" valign="middle" width="33%">

  

 </td>

	</tr>

	</table>

 

 

 

	</div>

</div>

 

</div>

</body>

 

</html>

Só adicionando.

esta errado usar tabelas para organizar seu layout.

<table width="98%" border="0" align="center">
	<tr>
 <td align="left" valign="middle" width="33%">

 <a title="Layout produzido por: RaphaelDDL.com" target="_blank" href="[http://raphaelddl.com/?lang=pt"](http://raphaelddl.com/?lang=pt) style="font-size:6px;">
 <img src="./images/copy.gif" border="0" title="Layout produzido por: RaphaelDDL.com" alt="Produzido por: RaphaelDDL.com" /></a>

 </td>
 <td align="center" valign="middle" width="33%">

 <a href="[http://validator.w3.org/check?uri=referer">](http://validator.w3.org/check?uri=referer)
	<img style="border:0;"
 src="./images/w3cvalid_xhtml.jpg"
 alt="Valid XHTML 1.0 Transitional"/></a>

<a href="[http://jigsaw.w3.org/css-validator/">](http://jigsaw.w3.org/css-validator/)
 <img style="border:0;"
 src="./images/w3cvalid_css.jpg"
 alt="Valid CSS!" />
</a>

 </td>

 <td align="right" valign="middle" width="33%">
  
 </td>
	</tr>
	</table>Você pode validar uma pagina e ela pode não ser semantica.

leia o link: http://forum.imasters.com.br/index.php?showtopic=248704

e só dizer uma coisa (não se ofenda), você esta achando que seu código não funciona por culpa do css2, mas na verdade a culpa é sua(hehehe), você ainda não entendeu 100% o CSS e nem a logica dele aplicada ao HTML.

Acredito que você deveria estudar mais um pouco, é só um toque para você melhorar.

FAlow abraço ;)

DarkDragonLord· 11 de abr.

>
Isso do CSS3 que você falow não tem muita coerencia. O comportamento do DIV está errado por que você fez errado.

Faça assim:

Adicione este doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ponha isso no seu CSS:

	margin:0;
	padding:0;

}

html,body{

	width:100%;
	height:100%;
}

body {

	background-color:#000;
	background-image: url(./images/bgbody.gif);
	background-repeat: repeat;
	background-attachment:fixed;
	font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
}

#worldmax {
	text-align:center;
	background-image: url([http://ddl.exofire.net/pumpminas/images/bg.gif);](http://ddl.exofire.net/pumpminas/images/bg.gif);)
	background-repeat: no-repeat;
	background-position: bottom right;
	background-attachment:fixed;
	height:100%;
}

fiz isso ai e funcionou QUASE perfeitamente. No IE6 eu sei q o fixed nao é suportado portanto ele fica 'grudado' ao footer. Mas olha lá no Firefox. Parece perfeito mas quando você vai em 'contato', que é a pagina que fiz com scroll pra testar, quando descemos o scroll, o carinha desapareçe ao inves de ficar fixed O.o

tendi mais nada ... X.x

>
Só adicionando.

esta errado usar tabelas para organizar seu layout.

<table width="98%" border="0" align="center">
	<tr>
 <td align="left" valign="middle" width="33%">

 <a title="Layout produzido por: RaphaelDDL.com" target="_blank" href="[http://raphaelddl.com/?lang=pt"](http://raphaelddl.com/?lang=pt) style="font-size:6px;">
 <img src="./images/copy.gif" border="0" title="Layout produzido por: RaphaelDDL.com" alt="Produzido por: RaphaelDDL.com" /></a>

 </td>
 <td align="center" valign="middle" width="33%">

 <a href="[http://validator.w3.org/check?uri=referer">](http://validator.w3.org/check?uri=referer)
	<img style="border:0;"
 src="./images/w3cvalid_xhtml.jpg"
 alt="Valid XHTML 1.0 Transitional"/></a>

<a href="[http://jigsaw.w3.org/css-validator/">](http://jigsaw.w3.org/css-validator/)
 <img style="border:0;"
 src="./images/w3cvalid_css.jpg"
 alt="Valid CSS!" />
</a>

 </td>

 <td align="right" valign="middle" width="33%">
  
 </td>
	</tr>
	</table>Você pode validar uma pagina e ela pode não ser semantica.

leia o link: http://forum.imasters.com.br/index.php?showtopic=248704

Acredito que você deveria estudar mais um pouco, é só um toque para você melhorar.

FAlow abraço ;)

nao não, nem fiquei ofendido. sei que sou uma anta em CSS ainda... Ainda nao aprendi / entendi direito os floats da vida..

como nao tem float:center e nunca consegui fazer um ficar na esquerda e um no centro, fiz essa tabela, pra um ficar no canto e otro no meio :P

e sim, sei que tabela eh pra dado tabular mas num pude evitar :P

btw, eu tentei agora, fazendo justamente com tabela de 1linha/coluna... joguei o site todo dentro dela, coloquei ela tendo width height 100%, coloquei o bg no canto e voilá, ficou como eu queria lol

Mas ainda quero aprender (e fazer funcionar) oque você disse. Eu to tentando muito nao usar tabela pro layout :S

Militar· 16 de abr.

cara para que o div global acompanhe o conteudo da pagina basta apenas colocar nela ( " display:table; " ) assim e nao sei por que ela acompanha o conteudo no FIREFOX..

o display serve pra tirar diversos bugs por exemplo do IE6 o espaçamento fica maior do que no IE7 e FX dai basta apenas colocar display:inline;

vejo moh galera atrás disso e tentando descobrir isso..

antes de aprender CSS eu usava os famosos hack´s mais agora que sempre tem uma solução pra tudo em CSS =]

espero ter ajudado

abraços e qualquer coisa posta ai

brcontainer· 18 de abr.

>
cara para que o div global acompanhe o conteudo da pagina basta apenas colocar nela ( " display:table; " ) assim e nao sei por que ela acompanha o conteudo no FIREFOX..

o display serve pra tirar diversos bugs por exemplo do IE6 o espaçamento fica maior do que no IE7 e FX dai basta apenas colocar display:inline;

vejo moh galera atrás disso e tentando descobrir isso..

antes de aprender CSS eu usava os famosos hack´s mais agora que sempre tem uma solução pra tudo em CSS =]

espero ter ajudado

abraços e qualquer coisa posta ai

display:table; não é necessariotem dois problemas com este atributo um é uma falha com o Safari(win) e outra é com o Firefox

de uma olhada nisto:

http://forum.imasters.com.br/index.php?showtopic=261803

vai lhe ajudar ;)