height:100% nao quer ficar na tela toda

DarkDragonLord · Abril 10, 2008

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

webflex · Abril 10, 2008

Olá,

Experimente colocar na div global:

height: 100%;

Podia fazer testes mas não tenho as imagens necessárias.

Cumps \o/

DarkDragonLord · Abril 10, 2008

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 · Abril 10, 2008

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 · Abril 11, 2008

* html body {
	height: 100%;
}

abraço

Michelly · Abril 11, 2008

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 · Abril 11, 2008

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 · Abril 11, 2008

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 · Abril 11, 2008

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);
	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"> 
<!--  Copyright © 2008, Raphael "DarkDragonLord" F. All Rights Reserved  -->
<!-- WebSite's Source-Code is all commented so Newcomers can understand what is what and learn a little. -->
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>.:: Pump Minas ::.</title>
 
<!-- Meta Tags for Search Engines -->
 
	<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=" " />
 
<!-- Meta Tags for Search Engines -->	
 
<!-- Icons -->
 
	<link rel="SHORTCUT ICON" href="./favicon.png" type="image/gif" /> <!-- Icon for FF -->
	<link rel="SHORTCUT ICON" href="./favicon.ico" /> <!-- Icon for IE -->
 
<!-- Icons -->
 
<!-- JavaScripts -->
 
	<script type="text/javascript" src="./scripts/loadimg.js"></script> <!-- Pre-Load Images -->
 
<!-- JavaScripts -->
 
<!-- CSS's -->
 
	<link rel="stylesheet" type="text/css" href="web_styles.css" /> <!-- WebSite's CSS -->
 
<!-- CSS's -->
 
</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" 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">
	<img style="border:0;"
		src="./images/w3cvalid_xhtml.jpg"
		alt="Valid XHTML 1.0 Transitional"/></a>
 
 <a href="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>
 
	</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" 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">
	<img style="border:0;"
		src="./images/w3cvalid_xhtml.jpg"
		alt="Valid XHTML 1.0 Transitional"/></a>

  
<a href="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 · Abril 11, 2008

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);
	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" 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">
	<img style="border:0;"
		src="./images/w3cvalid_xhtml.jpg"
		alt="Valid XHTML 1.0 Transitional"/></a>

  
<a href="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 ;)

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 · Abril 16, 2008

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 · Abril 18, 2008

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 é necessario

tem 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 ;)

Arquivado

height:100% nao quer ficar na tela toda

Recommended Posts

DarkDragonLord 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DarkDragonLord 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

programador php 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Michelly 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

DarkDragonLord 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

DarkDragonLord 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Militar 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

Fóruns

Tempo Real

Informação importante