Ir para conteúdo

POWERED BY:

Arquivado

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

ealves

Colunas crescerem independente uma da outra

Por , em Desenvolvimento frontend

Recommended Posts

ealves    0

ealves
Postado

Tenho duas colunas em minha pagina , uma coluna de navegacao e a outra é a coluna principal .

O problema é que as COLUNAS CRESCEM INDEPENDENTE UMA DA OUTRA , ou seja, qdo a da navegacao cresce a principal nao acompanha e vice versa e isso acaba quebrando o layout do site.

 

PEGUEI O EX EXATAMENTE IGUAL DESSA PAGINA E ESTA DANDO ERRADO

http://www.maujor.com/tutorial/lay2col-faux-colunm.php

<style type="text/css">	#tudo {	width:760px;	[b]background: url(faux-bg.gif) repeat-y 0 0;[/b]	// isso é o que foi dito pra fazer ....colocar uma imagem de fundo pra resolver esse problema mais nada	}#topo {		height:80px;	background-color:#df7ddf;	}#principal {	width:578px;	background-color:#9cf;	float:right;	}#navegacao {	width:180px;	background-color:#ffbe7d;	float:left;	}#rodape {		clear:both;	height:20px;	background-color:#b5daa2;	}</style></head><body><h2>RENDERIZAÇÃO:</h2><div id="tudo"><div id="topo">TOPO</div><div id="navegacao"><h4>COLUNA DE NAVEGAÇÃO</h4><p>Lorem ipsum dolor</p><p>Lorem ipsum dolor</p><p>Lorem ipsum dolor</p><p>Lorem ipsum dolor</p><p>Lorem ipsum dolor</p></div><div id="principal"><h4>COLUNA PRINCIPAL</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p></div><div id="rodape">RODAPE</div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

O código está correto, testei aqui e tudo ok...Aliás, você está utilizando a imagem de fundo??Você tem q fazer um fundo de 760px, com 1px de altura (mais leve), com 180 px da cor da esquerda + 2px de espaço separatório + 578px da coluna principal... nome q você ta utilizando "faux-bg.gif"

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Essa parte é essencial, tem muita gente que esquece a figura.

Aliás, você está utilizando a imagem de fundo??

Como nosso amigo Alkaeda disse que está funcionando, talvez se você limpar o cache funcione ai para você também.

 

[]´s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

ealves    0

ealves
Postado

nao estou conseguindo .....estou fazendo exatamente como esta o codigo acima , utilizando essa imagem faux.gif na div tudo e nada

Compartilhar este post

Link para o post
Compartilhar em outros sites

ealves    0

ealves
Postado

NAO SEI O QUE FALTA PRA DAR CERTO ....AS COLUNAS CONTINUAM CRESCENDO INDEPENDENTE.....

PEGUEI O CODIGO EXATAMENTE COMO ESTA NA PAGINA Q FOI CITADA ENTAO NAO SEI O Q ESTA ERRADO JA Q ESTA EXATAMENTE IGUAL .

 

 

#tudo {	width:760px; [b]background-image:url(faux-bg.gif)[/b] repeat-y 0 0;	}

CREIO Q DEVE SER ALGUMA COISA AKI .....APESAR Q NA PAGINA ME DA 2px de espacamento normal

esse background tem q ser de q tamanho ??? eu tenho q ter esse background nos meus arquivos????

 

 

Código deve estar dentro de

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

ealves,

 

Primeiro, por favor, leia as regras aqui do fórum (no seu caso a 9 é importante)

Segundo, se você pegou exatamente o que que tem no site do maujor, tem que funcionar.

Poste um link com o que você tem, vai ficar mais fácil para que possam ajudá-lo.

 

Aqui no fórum de WS, tem o Laboratório de Scripts, que também tem um exemplo de como trabalhar com técnica "Faux Columns".

 

[]´s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

ealves    0

ealves
Postado

ALKAEDA

 

poxa velho nao sei o q acontece ......peguei o ex aki q você passou com 3 COLUNAS IGUALZINHO você POSTOU e a coluna dos MENUS TEIMA EM NAO ACOMPANHAR AS DEMAIS COLUNAS....

 

ESTA TODO AKI PRA QUE NAO TENHAM DUVIDAS

 

<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">body {	font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;}#tudo {	width: 700px;	[b]background: url(faux_columns.gif) repeat-y;[/b]}#topo {	width: 700px;	height: 100px;	background-color: #ff0;}#menu {float: left;width: 130px;padding: 10px;background-color: #cfc;}#conteudo {	float: left;	width: 370px;	padding: 15px;}#noticias {float: right;width: 130px;padding: 10px;background-color: #ccc;}#rodape {	width: 680px;	height: 30px;	padding: 0 10px;	background-color: #ccf;	clear: both;}#rodape p {	line-height: 28px;}</style></head><body><div id="tudo">	<div id="topo"><h1>Título</h1></div>		<div id="menu">		<ul>			<li><a href="#">Link 1</a></li>			<li><a href="#">Link 2</a></li>			<li><a href="#">Link 3</a></li>			<li><a href="#">Link 4</a></li>			<li><a href="#">Link 5</a></li>			<li><a href="#">Link 6</a></li>			<li><a href="#">Link 7</a></li>		</ul>	</div>		<div id="conteudo">		<h2>Título (1)</h2>		<p>In nibh odio, porttitor vel, mattis vel, porttitor eget, orci. Duis consectetuer tempus enim. Sed ut felis et tortor feugiat malesuada. Nam vulputate, tellus eu nonummy dapibus, pede risus luctus dolor, ut nonummy urna felis a lacus. Nam in dolor tincidunt ante vehicula dignissim. Nulla id libero ut dui placerat semper. Nulla sit amet nibh at velit facilisis gravida. Phasellus in diam. Pellentesque volutpat scelerisque dolor. Donec venenatis nulla suscipit nisl dignissim tristique. Ut ut lorem sit amet purus ullamcorper mattis. Phasellus ornare ligula non orci. Pellentesque luctus tristique orci. Proin a est. Nulla porta lacus ut leo. Nulla faucibus pede sit amet dui. Nullam aliquet lorem at nunc. Nullam eu tellus.</p>		<h2>Título (2)</h2>		<p>Sed tempus turpis vel quam molestie pulvinar. Suspendisse venenatis dolor semper ipsum. Quisque tempus erat ac mi. Aliquam semper, est nec hendrerit dignissim, ligula turpis sagittis purus, ut viverra velit eros at augue. Pellentesque mi nisi, porta eget, pharetra ac, sollicitudin sit amet, nisi. In sapien ligula lorem sollicitudin facilisis, sodales eget, tempus in, mauris. Cras risus sem, adipiscing non, convallis ac, consectetuer eu, dolor. In quam lorem ipsum dolor sit amet. Curabitur tempus aliquam nulla. Etiam eros.</p>	</div>		<div id="noticias">		<h3>Notícias:</h3>		<ul>			<li><a href="#">Sed accumsan congue</a></li>			<li><a href="#">Nulla dignissim nec augue</a></li>			<li><a href="#">Nunc ante elit nulla</a></li>			<li><a href="#">Aliquam suscipit consequat</a></li>			<li><a href="#">Cursus sed arcu sed</a></li>			<li><a href="#">Nulla dignissim nec augue</a></li>			<li><a href="#">Sed accumsan congue</a></li>			<li><a href="#">Nulla dignissim nec augue</a></li>			<li><a href="#">Nunc ante elit nulla</a></li>			<li><a href="#">Aliquam suscipit consequat</a></li>			<li><a href="#">Cursus sed arcu sed</a></li>			<li><a href="#">Sed accumsan congue</a></li>			<li><a href="#">Nulla dignissim nec augue</a></li>			<li><a href="#">Nunc ante elit nulla</a></li>			 </ul>	</div>		<div id="rodape"><p>® Todos os direitos reservados | <a href="#">Web Designer</a></p></div></div></body></html>
Código deve estar dentro de

Compartilhar este post

Link para o post
Compartilhar em outros sites

ealves    0

ealves
Postado

Paulo de Tarso

 

Como vcs podem ver tudo esta correto , entao imagino eu q o problema esta NESSA IMAGEM FAUX.GIF

COMO TEM Q SER ESSA IMAGEM (faux_columns.gif) ????????

estou postando essa imagem no meu codigo MAS NAO A TENHO e talvez seja isso ......

estou apenas postando o codigo background: url(faux_columns.gif) repeat-y; MAS nao tenho essa imagem comigo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Mas é claro que não vai funcionar! A imagem é quem "simulará" o fundo da suas divs... Veja bem: você normalmente tem uma imagem de 1px de altura e o comprimento certo do total das suas divs (observe bem esse detalhe: essa técnica só funciona com layouts fixos). E essa imagem de 1px de altura se auto-repetirá no fundo da div principal dando a impressão que a div-filha é que está recebendo a formatação do fundo e na verdade não é...

 

Compreendeu agora?

 

Apesar do gio! já ter te passado o link do Laboratório de Scripts, segue aqui o link do material que escrevi sobre Faux Columns:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Técnica "Faux Columns" para layouts CSS

Meu, dá uma olhada lá... Ah! Se você quiser, olha o link da imagem faux_columns.gif utilizada nesse tutorial indicado:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Imagem faux_columns.gif

Ok? Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito