Jump to content


fabiopittol

Member Since 01/08/2004
Offline Last Active 16/08/2009, 16:05
-----

Topics I've Started

Preenchimento Vertical

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;	}

IPB Skin By Virteq