Ir para conteúdo

POWERED BY:

Arquivado

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

danielsjdr

como fazer para o container acompanhar a lateral?!?

Recommended Posts

Bom dia pessoal,

 

Estou tentando fazer um site com CSS... :D

 

O site tem um cabeçalho (100 % ok), depois do cabeçalho, vem a área útil...

 

Uma lateral na esquerda com as opções e uma na direita com um texto (um blog).

 

Fiz uma lista de links (a esquerda) e um local de texto a direita (um container)..

 

A duvida é a seguinte... Se o meu texto é pequeno, o lado esquerdo fica sem fundo... tem como resolver?

 

Sou iniciante em CSS..

 

Segue o codigo em CSS... (modificado de um exemplo do Zen Garden)

 

body	{	margin: 0;	padding: 0;	color: #333;	font: 13px Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	background: #E2EBED;	text-align: center;	}/* Cor do link */a	{	color: #307082;	}/* Quando o cursor estiver em cima do link */a:hover	{	color: #D60808;	}	acronym	{	border: none;	}#preambulo h3 span, #explicacao h3 span, #participacao h3 span, #benefits h3 span, #requirements h3 span, #lresources h3.resources span, #larchives h3.archives span, #lselect h3.select	{	display:none;	}#container	{	margin: 0 auto;	width: 724px;	position: relative;	background: #fff;	padding: 0 10px 0 10px;	text-align: left;	}* html #container	{	width: 744px;	w\idth: 724px;	}#pageHeader	{	position: absolute;	top: 25px;	left: 10px;	}h1	{	background: url("imgs/logo.jpg");	width: 239px;	height: 57px;	overflow: hidden;	margin: 0;	}h1 span	{	display: none;	}h2	{	font-size: 12px;	margin: 0;	}#pequenoSumario	{	padding-top: 85px;	}#pequenoSumario .p2	{	font-size: 12px;	position: absolute;	top: 65px;	right: 20px;	margin: 0;	}#container #intro #pequenoSumario .p1	{	font-size: 11px;	height: 171px;	background: url("imgs/background.jpg") no-repeat;	margin: 0;	width: 724px;	color: #fff;	font: 12px/150% Trebuchet MS;	}		/* Parte azul ao lado da imagem */#container #intro #pequenoSumario .p1  span	{	padding: 30px 530px 0 30px;	display: block;	margin: 0;	font: 12px/150% Trebuchet MS;	text-align:justify;	}#preambulo, #texto	{	margin: 0 20px 0 243px;	}/* Preâmbulo do texto */#preambulo p	{	margin: 10px 0 10px 0;	font: 10px/150% Trebuchet MS;	line-height: 150%;	text-align:justify;	}#texto p, #preambulo p	{	line-height: 150%;	margin: 5px 0 5px 0;	text-align:justify;	}/* Ttulo do H3 - Titulo do blog ou notcia  #preambulo h3, #explanation h3, #participation h3, #benefits h3, #requirements h3*/ #preambulo h3	{	width: 300px;	height: 24px;	margin: 40px 0 10px 0;	color : #FDA61D;	}	/* Titulo do H3 - Ttulo do blog ou notcia */ #subtitulo	{	width: 300px;	height: 24px;	margin: 40px 0 10px 0;	color:#000066;	}/* Determina a area dos links */		#listaLinks	{	position: absolute;	top: 295px;	left: 0;	width: 210px;	background-color:#FFFFFF;	}	#lselect ul, #larquivo ul, #lexternos ul	{	list-style-type: none;	margin: 0;	padding: 0 0 0 40px;	}#lselect ul li a	{	text-decoration: underline;	display: block;	font-size: 13px;	}	#lselect ul li.c, #lselect ul li a.c	{	display: inline;	font-size: 12px;	color: #333;	}#lselect ul li a.c	{	text-decoration: none;	}#lselect ul li a.c:hover	{	color: #D60808;	}#lselect ul li	{	font-size: 12px;	border-bottom: 1px solid #E6EEF0;	}#listaLinks #larquivo ul li	{	font-size: 13px;	border-bottom: 1px solid #E6EEF0;	display: block;	padding: 5px 0;	}#listaLinks #lexternos ul li	{	font-size: 13px;	border-bottom: 1px solid #E6EEF0;	display: block;	padding: 5px 0;	}/*#lexternos h3.externos	{	font: italic normal 12pt arial; 	width: 69px;	height: 15px;	margin: 30px 0 5px 40px;	}*/#lexternos h3.externos	{	width: 69px;	height: 15px;	margin: 30px 0 5px 40px;	}#larquivo h3.arquivos	{	width: 69px;	height: 15px;	margin: 30px 0 5px 40px;	}#footer	{	background: url("imgs/footer.gif") no-repeat;	color: #fff;	height: 48px;	text-align: right;	padding: 0 10px 5px 0;	line-height: 26px;	font-size: 11px;	}#footer a	{	color: #fff;	text-decoration: none;	}#footer a:hover	{	text-decoration: underline;	}

 

Att

 

Daniel

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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