Jump to content
ClaudioxPT

Problema com layout de 3 colunas

Recommended Posts

ClaudioxPT

Boas

Estou com um problema a desenhar um prototipo de layout para um site.

O layout é suposto ter 3 colunas (side/navig , conteudo e anúncios) sendo que a coluna do centro é "liquida" e as laterais são de tamanho fixo.

O problema é aparentemente simples mas não sou capaz de o solucionar. As colunas laterais levaram float no css de modo a ficarem nas laterais da principal, mas a maldita coluna (e respectiva div) insiste em enfiar-se por debaixo da coluna esquerda moldando o testo á sua volta.

What can i do to solve it?

O site está alojado temporariamente aqui: http://84.90.209.231/

E os sources do pouco que já fiz do layout são:

index.html

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>NoName Site (AKA test)</title> 

<head>
<link rel="stylesheet" type="text/css" href="css.css" />

</head>

<body>
<div id="wrap" class="clearfix">
<div id="topnavup">
<ul class="links">
<li><a href="/page1">link1</a></li> 
<li><a href="/page2">link2</a></li> 
<li><a href="/page3">link3</a></li> 
<li><a href="/page4">link4</a></li> 
</ul>
</div>
<div id="header" class="header"><a href="http://localhost">Test Site Layout</a></div>
<div id="topnavdown">
<ul class="links">
<li><a href="/page5">link5</a></li> 
<li><a href="/page6">link6</a></li> 
<li><a href="/page7">link7</a></li> 
<li><a href="/page8">link8</a></li> 
</ul>
</div>
<div id="leftcol">
<h1>123456789123456789123456789123456789123456789</h1>
</div>
<div id="rightcol">
<div id="AdsTitle"><h3>Advertisements</h3></div>
<img src="./ads/120600.jpg"/>
</div>
<div id="title">
<h2>The Title!</h2>
</div>
<div id="content"><p class="one">There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content </p>

<p>There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content There should be content </p>
</div>
<div id="footer">
<h2>The footer!</h2><ul class="links">
<li><a href="/page5">link5</a></li> 
<li><a href="/page6">link6</a></li> 
<li><a href="/page7">link7</a></li> 
<li><a href="/page8">link8</a></li> 
</ul>
</div></div>
</body>
</html>

e css.css

body {
background-color:#AAAAAA;
font-family:arial, verdana, sans-serif;
font-size:12px;
}
#wrap {
margin-left: 20px ;
margin-right: 20px ;
border-style:solid;
border-width:1px;
border-color:#000000;
background-color:white;
display:block;
}
.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
/*estava aqui no clearfix*/
.clearfix{display: inline-block;}
li{
display:inline;
}
ul.links {
list-style-type:none;
}
#topnavdown  {
border-style:solid;
border-width:1px;
border-color:#000000;
}
#header {
top:0px;
left:0px;padding:20px;
font-size:28px;
color:#ffffff;
background-color:gray;
border-style:solid;
border-width:2px;
border-color:#000000;
}
#leftcol {
float:left;
background-color:green;
width:150px;
word-wrap:break-word;
border-style:solid;
border-width:1px;
border-color:#000000;
}
#rightcol {
float:right;
background-color:#696969;
width:120px;
word-wrap:break-word;
border-style:solid;
border-width:1px;
border-color:#000000;
padding: 10px
}
#AdsTitle {

}
#content {
border-style:solid;
border-width:1px;
border-color:#000000;
width:80%;
}
#footer {
clear:both;
border-style:solid;
border-width:1px;
border-color:#000000;
}

Agradeço a quem me possa dar uma ajudinha que já á 3 horas que insisto em tentar tudo e mais algo, troca aqui mete ali... e ainda nada.

E já agora como estico as colunas até alcançarem o footer sem especificar medidas e não estando totalmente preenchidas?

Cumprimentos

Share this post


Link to post
Share on other sites
ClaudioxPT

Mas como dou esse float se o quiser manter centrado entre as colunas e ao mesmo tempo "liquido"?

Se dou float:left ele encosta-se á lateral esquerda por de baixo da coluna, e se dou float:right ele encosta-se ao lado da coluna da direita mas perde o centramento fora que com 75% de width reduzindo a janela para 1024px de largura desformata-se todo e com mais de 1360 fica um espaço gigante entre o content e a coluna lateral esquerda.

E mantem-se a duvida de como esticar as colunas até ao footer ficando todas com a altura da mais preenchida.

Share this post


Link to post
Share on other sites
Lfscoutinho

Boas,

Primeiro: usas larguras fixas ou percentagens ! Agora, juntar as duas é que não.

Segundo: líquido ? ou que é isso ?

Para as colunas esticarem tens de definir o height: 100%.

Share this post


Link to post
Share on other sites
ClaudioxPT

Então se quiser que as colunas laterais fiquem sempre com o mesmo tamanho visto que levam sempre o conteúdo do mesmo tamanho mas quiser que o conteúdo se adapte ao ecrã?

É que se definir tudo em percentagem as colunas laterais esticam e encolhem coisa que não queria que acontecesse mas se meter tudo em tamanho fixo, em resoluções altas só se vê uma tira no ecrã com 960-980px de largura.

Como posso fazer então o conteúdo "elástico" e as sidebars estáticas na sua dimensão.

Design liquido ou Liquid Design foi o termo que encontrei quando aprendi a trabalhar com as medidas sendo a definição de um design que aumenta e encolhe com a janela.  Como por exemplo este: http://www.pixy.cz/blogg/clanky/css-3col-layout/

Cumprimentos

Share this post


Link to post
Share on other sites
ClaudioxPT

Já me conseguiram ajudar aqui mas obrigado na mesma.

Pelos vistos o problema era que duas divs estavam trocadas (devia de estar primeiro o conteúdo e depois a coluna direita no html e estavam as duas colunas juntas em vez de isso.)

Cumprimentos

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.