Jump to content


Photo

Preenchimento Vertical


  • Faça o login para participar
5 replies to this topic

#1 fabiopittol

fabiopittol

    Turista

  • Usuários
  • 48 posts
  • Sexo:Não informado
  • Localidade:Vitória, ES

Posted 22/01/2008, 09:33

Galera, eu preciso que o meu site (imagem 1) fique igual à imagem 2. Por exemplo. Quando o conteúdo for menor que o espaço vertical da página, seja por extensão ou por questões de resolução mesmo, esse layout de fundo preencha 100% da página, pra nunca acabar e ficar com o fundo aparecendo.

Eu procurei pelo fórum, acheis uns tópicos relacionados, mas ou por newbice minha ou porque o caso é diferente, eu não consegui resolver.

Imagem 1
Posted Image

Imagem 2
Posted Image

Segue o meu HTML e meu CSS. (Eu to usando esse pedaço do layout como tabela pois ainda não me sinti confortável para fazer essa parte em tableless direto, mas tudo que for centro do conteúdo ali vai ser em CSS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<meta name="autor" content="Fabio Pittol" />	<meta name="palavras-chave" content="electric, brain, rfactor, simulador, mods, games, jogos" /><title>ELECTRIC BRAIN Studios</title>	<style type="text/css" media="all">		@import "ebrain.css";	</style></head><body><!-- pagina inteira --><div id="container"><!-- estrutura --><div id="shadow_l"></div><div id="bar_l"></div><div id="content"></div><div id="bar_r"></div><div id="shadow_r"></div><!-- estrutura (fim) --></div><!-- pagina inteira (fim) --></body></html>

@charset "utf-8";/* CSS Document *//* Elementos Básicos */html {	margin: 0;	padding: 0;	}	body { 	font: Tahoma, Verdana, Arial, Helvetica, sans-serif;	color: #555753; 	background: #d3d3d3 url(images/background.jpg); 	margin: 0; 	padding: 0;	text-align: center;	}	a:link { 	font-weight: bold; 	text-decoration: none; 	color: #B7A5DF;	}	a:visited { 	font-weight: bold; 	text-decoration: none; 	color: #D4CDDC;	}	a:hover, a:active { 	text-decoration: underline; 	color: #9685BA;	}	acronym {	border-bottom: none;	}	/* Características da Página */#container {	width: 882px;	text-align: left;	margin: auto;	}	#shadow_l {	background: url(images/shadow_left.png) repeat-y top right;	width: 29px;	height: 100px;	float: left;	}	#shadow_r {	background: url(images/shadow_right.png) repeat-y top left;	width: 29px;	height: 100px;	float: left;	}	#bar_l {	background: url(images/bar_left.jpg) repeat-y top right;	width: 14px;	height: 100px;	float: left;	}	#bar_r {	background: url(images/bar_right.jpg) repeat-y top left;	width: 14px;	height: 100px;	float: left;	}	#content {	background: #f4f4f4;	width: 796px;	height: 100px;	color: #f4f4f4;	float: left;	}

Edição feita por: § Kenshin §, 31/01/2008, 09:50.
inclusao da tag [codebox]. leia as regras.


#2 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 22/01/2008, 10:01

É só colocar um height:100% no css ou, já que você está usando tabelas, height="100%" na tabela.
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#3 fabiopittol

fabiopittol

    Turista

  • Usuários
  • 48 posts
  • Sexo:Não informado
  • Localidade:Vitória, ES

Posted 31/01/2008, 09:30

É só colocar um height:100% no css ou, já que você está usando tabelas, height="100%" na tabela.


Alex....tentei e num funfou.

Resolvi tomar vergonha na cara e fazer tudo com div msm. De toda forma o height:100% num quer funcionar. Se eu coloco height:100px funciona...mas 100% não.

*Atualizei o HTML e o CSS no 1º post.

#4 § Kenshin §

§ Kenshin §

    I'm coming back...!

  • Usuários
  • 574 posts
  • Sexo:Masculino
  • Localidade:BA
  • Interesses:Sou fã de linguagens direcionadas para a web, como php, (x)html, xml, wml.
    Também gosto de webdesign e ultimamente tenho me dedicado mais a aprender css, mysql, javascript, ajax e actionscript.
    Trabalho com os programas Dreamweaver, Illustrator e Flash.

Posted 31/01/2008, 09:52

tente adicionar a propriedade display: table;.

vlw ^_^
Web Developer / Web Designer / Information Architect
"Living to learn... learning to live!"
Useful links: Rules | Search

#5 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 31/01/2008, 09:54

É que o html e o body também tem suas medidas. Tente colocar um height 100% no body e no html.
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#6 fabiopittol

fabiopittol

    Turista

  • Usuários
  • 48 posts
  • Sexo:Não informado
  • Localidade:Vitória, ES

Posted 31/01/2008, 10:44

Vlw Kenshin e Alex...

Era que tinha q colocar height:100% no html e body tb.

Muito obrigado.




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq