Ir para conteúdo

POWERED BY:

Arquivado

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

eph2

3 Colunas, mas uma fixa??

Por , em Desenvolvimento frontend

Recommended Posts

eph2    0

eph2
Postado

Galera, é o seguinte, tenho algumas dúvidas num layout q estou fazendo.

 

Possuo 3 colunas no site (a imagem abaixo vai deixar mais fácil o entendimento) a primeira coluna (branca) é o menu, ele irá crescer, no meio teremos o conteudo que também cresce, e conforme eles crescem o fundo verde tem que crescer junto, bom, isso já consegui fazer,agora, a ultima coluna, (a verde mais escuro) eu gostaria que ela ficasse fixa em termos de altura, por exemplo se a página toda tem 400px de altura, gostaria que essa coluna tivesse 400px, só que não tenho como definir uma altura padrão, pois #menu e #conteudo crescem.

 

Não sei se me fiz entender, mas abaixo algumas imagens devem ajudar.

 

O problema maior é como definir a altura da terceira coluna, o resto já tenho pronto!

 

Agradeço desde já.

 

Imagem Postada

Imagem Postada

 

Abaixo seguem os códigos HTML e CSS

 

HTML

<!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=iso-8859-1" /><title>Untitled Document</title><link href="CSS/capa.css" rel="stylesheet" type="text/css" /></head><body><div id="corpo">	<div id="wrapper">		<div id="topo"> </div>		<div id="menu" class="menu"> </div>		<div id="conteudo" class="conteudo"> </div>	</div>	<div id="news" class="news"> </div></div></body></html>
CSS

body {	background-color: #F1F1EF;	background-image: url(../images/fundo.jpg);	background-repeat: repeat-x;	margin: 0px;}#corpo {	background-color: #bad787;	width: 780px;	margin: 0 auto;	height:100%;}#wrapper {	position:absolute;	top:0px;	background-color:#bad787;	width:780px;	height:100%;}#topo {	position:relative;	top:0px;	left:0px;	width:780px;	height:200px;	background-image:url(../images/topo.jpg);	background-repeat:no-repeat;	height:200px;	z-index:1;}#menu {	position:relative;	top:-20px;	left:5px;	float:left;	width:150px;	z-index:2;}#conteudo {	position:relative;	top:0px;	padding-top:10px;	left:10px;	float:left;	width:410px;	z-index:2;}#news {	position:absolute;	top:0px;	margin-left:575px;	width:200px;}.menu {	background-color:#FFFFFF;	text-align:left;}.conteudo {	text-align:left;}.news {	background-color:#006600;	text-align:left;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Samuel Machado    0

Samuel Machado
Postado

cara, tem uma forma de fazer isso sim...

 

procure por column equals no google, ou então, veja este site que eu fiz: www.pipocross.com que eu usei este método na index.

 

se quiser ver diretamente o css, segue o link: http://www.pipocross.com/css/main.css

 

o que você quer está nesta parte:

/* INDEX */#index_body_left{	width:450px;	padding:5px 12px 15px 8px;	float:left;	overflow:hidden;	padding-bottom: 1000px;	margin-bottom: -1000px;}#index_body_right{	background-image:url(../images/main/box_right_dark_bg_top.gif);	background-position:top;	background-repeat:repeat-x;	width:270px;	padding:5px 8px 5px 8px;	float:right;	background-color:#5c5c52;	color:#E9E9DF;	overflow:hidden;	padding-bottom: 1000px;	margin-bottom: -1000px;}/* Fim INDEX */

de uma boa olhada, e tente aplicar no seu layout, para ver se funciona...

Compartilhar este post

Link para o post
Compartilhar em outros sites

eph2    0

eph2
Postado

Dae fera, valeu pela resposta, tentei fazer seguindo a idéia do seu site, mas naum consegui entender a lógica?! daí minha coluna continua pequena ou fica bem maior que o conteudo. Mas estou tentando fazer a pesquisa no google, com os termos que você citou. Brigado mesmo assim! :DE se alguém tiver a solução pronta hehe eu aceito tb :PPS: Muito bonito o design do site que você desenvolveu. Parabéns!

Compartilhar este post

Link para o post
Compartilhar em outros sites

eph2    0

eph2
Postado

Bom funçando pelo CSS, procurando na net, olhando o exemplo do amigo acima, consegui fazer com que funcionasse! Abaixo o código HTML e o CSS pra caso alguém queira se espelhar caso tenha alguma dúvida.

 

Lembrando que eu odeio o Internet Explorer, no Firefox td funciona mais facilmente hehehe!

 

Abraços e obrigado pra quem ajudou!

 

HTML

 

<!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=iso-8859-1" /><title>Untitled Document</title><link href="CSS/capa.css" rel="stylesheet" type="text/css" /></head><body><div id="corpo">	<div id="wrapper">		<div id="topo"> </div>		<div id="menu" class="menu"> </div>		<div id="conteudo" class="conteudo"> </div>	</div>	<div id="news" class="news"> </div></div></body></html>
CSS

 

body {	background-color: #F1F1EF;	background-image: url(../images/fundo.jpg);	background-repeat: repeat-x;	margin: 0px;	height:100%;}#corpo {	background-color: #bad787;	width: 780px;	margin: 0 auto;	height:100%;}#wrapper {	position:absolute;	top:0px;	background-color:#bad787;	width:780px;	height:100%;}#topo {	position:relative;	top:0px;	left:0px;	width:780px;	height:200px;	background-image:url(../images/topo.jpg);	background-repeat:no-repeat;	height:200px;	z-index:1;}#menu {	position:relative;	top:-20px;	left:5px;	float:left;	width:150px;	z-index:2;}#conteudo {	position:relative;	top:0px;	padding-top:10px;	left:10px;	float:left;	width:410px;	z-index:2;}#news {	position:absolute;	margin-left:575px;	width:200px;	z-index:2;	height:100%;}.menu {	background-color:#FFFFFF;	text-align:left;}.conteudo {	text-align:left;}.news {	background-color:#006600;	text-align:left;}

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