2 Colunas, Dúvida Sobre Tamanhos Idênticos

#1 umarizal

Turista

Usuários
32 posts

Sexo:Masculino
Localidade:São Paulo - SP - Brasil
Interesses:Programação para web, Webdesign, PHP, Banco de Dados SQL, etc.

Posted 02/09/2009, 13:19

Olá pessoal.

Estou desenvolvendo um site institucional para minha empresa com layout do tipo tableless com os estilos em um único arquivo .css

Deixe-me ver se consigo explicar, minha dúvida é a seguinte:
Tenho 2 colunas... uma (à esquerda) fica praticamente vazia, com 1 ou 2 linhas de informações. Outra (à direita) fica repleta de informação que vão desde 15 a 30 linhas.

O problema, é que a coluna da esquerda não acompanha a da direita.

Coloquei cores para visualizar... deixei a da esquerda azul e a da direita vemelha... e fica assim:
azul|vermelho
azul|vermelho
___|vermelho
___|vermelho
___|vermelho
___|vermelho
___|vermelho

Deu pra entender? Eu queria que o tamanho (altura) fosse indêntico entre as duas, independente do quanto de conteúdo tem cada uma (porém, não posso usar tamanho fixo em pixels pois cada página tem um conteúdo diferente).

Queria, que ficasse assim:

azul|vermelho
azul|vermelho
azul|vermelho
azul|vermelho
azul|vermelho
azul|vermelho
azul|vermelho

Mesmo na coluna azul tendo apenas 1 palavra e na coluna vermelha tendo 30 linhas de texto.

Deu pra entender?

Já tentei o atributo Height:100% na coluna azul... mas não funciona.

Edição feita por: umarizal, 02/09/2009, 13:20.

Hospedagem e Criação de Sites

#2 Ain Dee

Turista

Usuários
53 posts

Sexo:Feminino

Posted 02/09/2009, 22:13

Provavelmente Faux Columns resolverão seu problema.
http://www.alistapar...es/fauxcolumns/

Dá uma olhada no google nisto e deverá achar alguns exemplos.

Édipo Costa Rebouças likes this

#3 André Manoel

Doutor

Usuários
996 posts

Sexo:Masculino
Localidade:Brasilia

Posted 16/12/2009, 11:00

Caro amigo...

Já passei por um problema semelhante... E para resolver ... eu não me utilizei de css...

E sim de JavaScript...

No css 2.1 não tem como você recuperar o tamanho específico de uma div... você pode definí-lo ... mas identificar isso quando o browser é aberto no cliente é bem complicado com css.

Eu não consegui fazer isso somente com css, se alguém conseguiu nos dê uma luz!

Bem... eu utilizei a biblioteca de javascript JQuery. Na verdade deixa eu já te dar um luz sobre o javascript.

Existe o Javascript puro, que se baseia somente em linguagens... e existe os frameworks, que são bibliotecas (Pacotes) prontos de código para que você possa utilizar...! Isso é uma definição muito pequena para o JQuery... mas somente para que você possa entender...!

Então vamos lá... vou tentar de dar uma ajuda, porque quando precisei ... procurei que nem um doido e não encontrei em lugar nenhum!

Primeiro você vai fazer o download da biblioteca jquery no site:

http://jquery.com/

Aí você escolhe a opção 'production' e seleciona o download do jquery.

Quando você baixar esse arquivo, você vai colá-lo na mesma pasta aonde você está desenvolvendo o seu site...

de preferência em uma pasta 'js' para que o seu site fique mais organizado.

Depois que você tiver baixado e colocado o arquivo na pasta raiz do seu site, você vai incluir o arquivo javascript na sua página aonde você quer redimensionar as colunas.

você vai colar essa linha dentro do head do seu código html dessa forma (Supondo que o seu html já está estruturado):

<head>

<script language = "javascript" src = "js/jquery-1.3.2.min.js" type="text/javascript"></script>

</head>

Após colocar o javascript na sua página você vai fazer o seguinte, recuperar o tamanho da div maior
E colocar a altura da div maior na div menor, porque assim as duas ficarão do mesmo tamanho!

Ainda dentro do head você vai colocar assim:

<head>

<script language = "javascript" src = "js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

	$().ready(
		function (){
                        //no lugar de coluna2 você vai colocar o nome da sua div maior a do conteudo.
			altura_coluna2 = $('#coluna2').height(); 
			
                        //no lugar de coluna1 você vai colocar o nome da div menor...
			$('#coluna1').height( altura_coluna2 ); 
		}		  
	);

</script>

</head>

e veja a mágica... as duas ficarão do mesmo tamanho!

Dá uma olhada aí e me diz se vai dar tudo certo!

Abração!

Iniciando na Ajuda On line...

Posted Image

Meu post lhe ajudou? Reputar/votar é uma das formas de agradecer.

#4 Édipo Costa Rebouças

Veterano

Ex-Admins
1079 posts

Sexo:Masculino
Localidade:Brasil - São Paulo

Posted 04/03/2010, 19:38

O problema de setar um height via javascript dessa maneira, se você tiver conteúdo dinamico vc tera problema, aconselho o faux collumns da Ain Dee.

Boa sorte

#1 umarizal

#2 Ain Dee

#3 André Manoel

#4 Édipo Costa Rebouças

1 user(s) are reading this topic

Entrar