Jump to content

  2. →
  3. →
  4. →

Photo

Layout Tableless De 3 Colunas

Started By cacfs, 30/09/2004, 09:18

  • Faça o login para participar
16 replies to this topic

#1 cacfs

cacfs

    Turista

  • Usuários
  • 50 posts
  • Sexo:Não informado

Posted 30/09/2004, 09:18

O problema é o seguinte:

Preciso fazer um layout de um site da seguinte forma, o cabeçalho, o rodapé e três colunas, a esquerda, a direita e óbvio a do centro (onde ficará o conteudo).

Até ai tudo bem consigo fazer esse layout tranquilo, as colunas terão como background uma imagem, para fazer um degradê, até ai continua tudo bem, o grande problema é que preciso que as colunas fiquem "coladas" no rodapé. Por exemplo se a coluna da direita tem apenas duas linhas de texto, mas a central tem 10 linhas, a altura da coluna da direita terá que acompanhar a altura da coluna central, ou seja, todas as três colunas precisam estar com o background alinhado na parte inferior.

Espero que consigam me ajudar, pois isso está me tirando o sono.

Segue uma imagem bem "grosseira" de como seria o layout.

Posted Image

#2 duquesa_rj

duquesa_rj

    Novato no fórum

  • Usuários
  • 21 posts
  • Sexo:Não informado

Posted 30/09/2004, 09:45

Vc poderia configurar a altura das layers das 3 colunas, com o mesmo valor. Mas isso só funcionaria no IE.

Vc pode tb usar uma imagem transparente de 1px em width nas colunas laterais e ajustar o height de acordo com o tamanho da coluna do meio. Esse recurso é bastante utilizado.

Q tal postar seu código css prá podermos ver como te ajudar?

Edição feita por: duquesa_rj, 30/09/2004, 09:54.

#3 cacfs

cacfs

    Turista

  • Usuários
  • 50 posts
  • Sexo:Não informado

Posted 30/09/2004, 11:26

Segue abaixo o código, o problema é, como fazer as duas colunas laterais acompanharem a altura da coluna central.

Obrigado

<html>
<head>
<title>Teste CSS</title>
<style type="text/css">
<!--
body {
margin: 0px;
margin-bottom: 10px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #333333;
letter-spacing: 0pt;
background-color: #CCCCCC;
}
#banner {
position: relative;
width: 701px;
height: 90px;
top: 10px;
background-color: #EEEEEE;
}
#corpo {
position: relative;
top: 0px;
border-right: #939393 1px solid;
border-top: #939393 1px solid;
border-left: #939393 1px solid;
border-bottom: #939393 1px solid;
background-color: white;
margin: 0px auto;
width: 701px; 
text-align: left;
}
#menu {
width: 150px;
float: left;
background-color: #EEEEEE;
background-image: url(bg_menu.gif);
background-repeat: repeat-x;
background-position: top;
}
#direita {
float: right;
width: 150px;
text-align: center;
background-color: #EEEEEE;
background-image: url(bg_direita.gif);
background-repeat: repeat-x;
background-position: top;
}
#principal {
padding-right: 150px;
padding-left: 150px;
padding-bottom: 0px;
padding-top: 0px;
text-indent: 0pt;
}
#rodape {
height: 70px;
text-align: center;
font-size: 8pt;
font-weight: bold;
padding-top: 10px;
}
#separador {
height: 20px;
background-color: #009933;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="banner">
  aaaaaaaa
</div>
<div id="corpo">
  <div id="separador">
  </div>
  <div id="menu">
  menu<br>
  menu<br>
  menu<br>
  menu<br>
  menu<br>
  menu<br>
  menu<br>
  menu<br> 
  </div>
  <div id="direita">
  bbbbb
  </div>
  <div id="principal"> 
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  corpo do site<br>
  </div>
  <div id="separador">
  </div>
  <div id="rodape">
  direitos
  </div> 
</div>
</body>
</html>


#4 brunoalves

brunoalves

    Linux user #392843

  • Ex-Admins
  • 1018 posts
  • Sexo:Não informado
  • Localidade:Rio de Janeiro

Posted 30/09/2004, 11:33

Dá uma olhada nesse tópico: http://forum.wmonlin...ndpost&p=444531 o código só encurta as colunas no Opera, nos demais fica legal.

Abraço.
Contra-baixo - Tablaturas, dicas e ferramentas para baixistas - Hospedagem Grátis - MUBR
Projetos
• Bruno Alves • WebLugar.net •
Fórums
• Ajuda Linux • BrClube • Forum cPanel • webforum • WMS •

#5 cacfs

cacfs

    Turista

  • Usuários
  • 50 posts
  • Sexo:Não informado

Posted 30/09/2004, 12:03

esta com o mesmo problema, olha só.

TESTE

O background das duas colunas laterais nao acompanham a coluna central

Edição feita por: cacfs, 30/09/2004, 16:34.

#6 duquesa_rj

duquesa_rj

    Novato no fórum

  • Usuários
  • 21 posts
  • Sexo:Não informado

Posted 05/10/2004, 22:24

Experimenta acrescentar essa linha em #menu e #diretita:
height:587px;
Lógico q a altura, vc terá q definir aí de acordo com o corpo, ok?
Essa altura foi para o exemplo q vc postou aí.

#menu {
width: 150px;
float: left;
background-color: #EEEEEE;
background-image: url(bg_menu.gif);
background-repeat: repeat-x;
background-position: top;
height:587px;
}
#direita {
float: right;
width: 150px;
text-align: center;
background-color: #EEEEEE;
background-image: url(bg_direita.gif);
background-repeat: repeat-x;
background-position: top;
height:587px;
}

#7 f4hr3nh3it

f4hr3nh3it

    Normal

  • Usuários
  • 64 posts
  • Sexo:Não informado

Posted 07/10/2004, 00:00

dê uma olhada no seguinte site:

http://css.maxdesign...utorial0916.htm
O mundo seria melhor se todas as pessoas procurassem suas soluções no www.google.com antes de fazer suas perguntas.

PHP
<?php

$name = "Germano";
$ircNick = "f4hr3nh3it";
$ircChannel = explode(",","#crack,#errados,#dehon");
$ircRede = "VirtuaLife"; // irc.virtualife.com.br
$msn = "sou @ antisocial . com"; // Por enquanto não adiciono mais ninguém

?>

#8 lixopode

lixopode

    Novato no fórum

  • Usuários
  • 1 posts
  • Sexo:Não informado

Posted 05/01/2009, 10:28

Rpz que tal se você criasse um DIV que contenha as três colunas do radapé? Ai você colocaria o background nele. Assim a parte de baixo ficaria alinhada sem depender de nada.

<div id="rodapé-container">
	<div id="coluna1"></div>
	<div id="coluna2"></div>
	<div id="coluna3"></div>
</div>

Edição feita por: lixopode, 05/01/2009, 10:32.

#9 Renan L. Queiroz

Renan L. Queiroz

    Mestre

  • Usuários
  • 690 posts
  • Sexo:Masculino
  • Localidade:Brasilia - DF

Posted 05/01/2009, 11:11

Caso alguem tenha interesse, tem mais um template ai:
<!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>Tableless 3 Colunas</title>		<style type="text/css">			body {				width: 770px;				margin-top: 0px;				margin-right: auto;				margin-bottom: 0px;				margin-left: auto;				color: white;			}			.cl_cabecalho {				background-color: #000099;				width: 770px;				height: 50px;			}			.cl_corpo{				min-height: 250px;				background-color: #505050;			}			.cl_colEsquerda {				width: 100px;				min-height: 250px;				float: left;				background-color: #505050;				border: solid red 1px;  /* retirar */			}			.cl_colCentral{				width: 564px; /* 570 quanto retirar as bordas das colunas laterais */				min-height: 250px;				float: left;				background-color: #A8A8A8;			}			.cl_colDireita {				width: 100px;				min-height: 250px;				float: right;				background-color: #505050;				border: solid red 1px; /* retirar */			}			.cl_rodape {				width: 770px;				height: 30px;				background-color: #000099;				clear: right;			}		</style>	</head>	<body>		<div class="cl_cabecalho">cabeçalho</div>		<div class="cl_corpo">			<div class="cl_colEsquerda">				col. esquerda			</div>			<div class="cl_colCentral">				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />				col. central <br />			</div>			<div class="cl_colDireita">				col. direita			</div>		</div>		<div class="cl_rodape">			rodapé		</div>	</body></html>
... ;-)

Tutorial interessante: Tutorial layout CSS 3 colunas

Edição feita por: Renan L. Queiroz, 05/01/2009, 12:01.

Especialidade: Desenvolvimento e Banco de Dados.


Este post lhe ajudou? Agradeça: Posted Image

#10 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 05/01/2009, 11:48

então amigo, vc tem que colocar alguma coisa contentdo as três colunas, e ai colocar uma imagem de fundo com a cor das três colunas.. nesses esquema com degrade faça assim:

[codebox]
<div id="master">
<div id="cabecalho">
</div>
<div id="corpo">
... suas três colunas....
</div>
<div id="rodape"> <!-- --> </div>
</div>
[/codebox]

coloque uma imagem de fundo com a cor opaco no no master de 1px e faça repetir no eixo y.
coloque o degrade no corpo sem repetição.

a imagem que vc vai colocar de fundo vai representar as três colunas e não só uma.
coloque uma cor de fundo no cabeçalho e no rodape ou tire eles do master( normalmente eu uso esse master para ter maior controle do layout, centralização e tals)

Edição feita por: Édipo Costa Rebouças, 05/01/2009, 11:51.

#11 LarPhozyHah

LarPhozyHah

    Super Veterano

  • Usuários
  • 14515 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 24/09/2017, 08:15

Ricetta Viagra Dei Poveri Viagra Tiene Vencimiento cialis Is Keflex Good For Vaginal Infections Female Cialis

#12 LarPhozyHah

LarPhozyHah

    Super Veterano

  • Usuários
  • 14515 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 10/10/2017, 07:00

Amoxicillin 500mg For Urinary Tract Infection Buying Levitra Online Safe best prices for on line levitra Viagra Similar Precio
Acheter Cialis 5mg Viagra Prix Conseille Gel Viagra levitra price per pill Discount On Line Isotretinoin
Discount Plavix Coupons Priligy Pharmacies cialis buy online Keflex And Acid Reflux Canada Pharmacy No Prescription Universal Drugstore Canada
Propecia Itch Hair Loss Cialis 20mg Non Generic Cialis Tempi Di Effetto viagra online Priligy For Sale Mejor Hora Para Tomar Propecia

#13 LarPhozyHah

LarPhozyHah

    Super Veterano

  • Usuários
  • 14515 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 26/10/2017, 12:03

Osta Lasix viagra Std Online Pharmacy Shipping Worldwide
Super Generac Viagra Buy Prescription Viagra Online Best Place To Buy Viagara online pharmacy CoСÐвÐÑРÐлt De Priligy
Levitra Viagra Equivalent Dose levitra paypal Canadian Pharmacy Ordering Viagra Buy Valtrex Online With No Prescription Acquisto Kamagra 150mg
Buy Cheap Prednisone Cialis Lilly De Ciprofloxacin And Amoxicillin levitra with dapoxetine reviews Propecia Ferritina Generic Doxycycline Pills Prescribing Information For Amoxicillin

#14 LarPhozyHah

LarPhozyHah

    Super Veterano

  • Usuários
  • 14515 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 06/11/2017, 04:18

Prix Du Misoprostol 5mg On Line Meds Cephalexin Dog Dose viagra Pdr Cephalexin Liquid
Propecia Does It Work Levitra Durata Effetto Kamagra In Usa levitra for sale Phenergan Addiction Propecia Online Without A Prescription Buy
Diflucan Acquisto Cialis Senza Ricetta Online Buy Keflex viagra Cialis Commande Online Pharmacy With Echeck For Viagara Cialis Tadalafil Online Apotheke
Where To Get Amoxil Online Without Rx Propecia Ritenzione Idrica viagra Augmentin

#15 RonsisM

RonsisM

    Super Veterano

  • Usuários
  • 15724 posts
  • Sexo:Masculino
  • Localidade:Plovdiv

Posted 08/11/2017, 22:55

Finasteride Tablets 5mg Where To Buy viagra online prescription Viagra Cialis Aphrodisiaque Buy Flagyl Propecia Buy Online Reviews
Cialis Wirkung Erfahrungen Keflex Liver Enzymes mail order levitra 90 day supply Viagra Costo Cialis 10mg Rezeptfrei Bestellen Effets Secondaires Cialis Yeux
Cialis 20mg Ligne Zithromax Syrup Dose viagra prescription Buy Std Antibiotics Online Propecia Las Mujeres Embarazadas
Can I Buy Cipro Online Secure Ordering Stendra Where To Buy Cheapeast Kamagra Oral Jelly 100mg Wiki generic viagra Can Amoxicillin Treat Bladder Infections Ed Drugs And India Purchasing Stendra From Canada
Kamagra Bello 100mg viagra No Rx Overnight To Usa 2 Mg Estradiol Generic Tadalafil 40 Mg
Direct Macrobid Pills Low Price Pharmacy Cash On Delivery Cialis En Ligne 10 Mg Priligy Euro cialis Kamagra Senza Prescrizione Acyclovir 800 Mg Tablets For Sale Prix Levitra 10 Mg Orange
Kamagra Prescrizione France cialis buy online Metronidazole For Cheap What Are The Ingredients Of Amoxicillin
Best Buy Stendra No Prior Script El Paso viagra online Buy Gabapentin Online Refill Prednisone
Pompe Lioresal Legally Online Progesterone Mastercard Accepted Prezzo Cialis 4 Compresse buy vardenafil online cheap Buy Cialus Cheap Priligy Potenzmittel Overseas Prescription Drugs Online
Cialis Suisse Vente Levitra Sus Efectos Secundarios online pharmacy On Line Direct Doryx Cheapeast Internet Over Night Presidone Best Price Cialis
Cialis Uso Frequente Diarrhea Amoxicillin 500 Mg buy viagra Algodones Pharmacy Online Pastillas Cytotec En Dallas Tx
Voltar para CSS & Semântica (Tableless)


0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. → CSS & Semântica (Tableless)
  5. Privacy Policy
  6. Regras ·
IPB Skin By Virteq