Layout 3 Colunas Liquid

[diogodourado 0]

Seguinte pessoal, atraves de:

http://www.dourado.net/tab/template.html

 

implantei aqui:

http://www.flogvip.net/xis

 

Problema:

Quando visualizo em 800x600 o layout se deforma. Ja identifiquei o problema, é no caso a foto central tem 500 pixels, entao é mais que 50% da tela, entao ele da esse problema ae. Tem alguma forma de deixar esse layout 3 colunas liquid? nesse padrao.. 25% 50% 25%... sendo que se o meio pegar mais que 50% pega e divide o restante para a coluna da esquerda e da direita?

 

Alguem pode me dar uma luz? Posso ate remunerar se for o caso.

[programador php 0]

cara tenta controlar o layout da imagem com porcentagem também

 

 

falou

[brcontainer 16]

ou então você pode fazer um elemento pai com largura minima tipo 800px e largura normal 100%

as laterais você pode fazer com largura fixa

e assim você trabalha em um layout em 800px pois assim quando visualizar em resolução maior

não haverá problemas

 

exemplo de layout liquido com colunas fixas:

<style>
#div1{
background:#fc0;
float:left;
width:99px;
height:500px;
}

#div2{
background:#fc0;
float:right;
width:99px;
height:500px;
}

#div3{
background:#fc0;
display:block;
margin: 0px 100px;
height:500px;
}
</style>

<div id="div1">esq</div>
<div id="div2">dir</div>
<div id="div3">conteudo</div>

e para fazer um uma largura minima faça o segiunte leia esse tópico http://forum.imasters.com.br/index.php?showtopic=258273

 

;)

[diogodourado 0]

cara tenta controlar o layout da imagem com porcentagem também

 

 

falou

 

nao entendi sua colocacao... pode me explicar melhor?

[programador php 0]

assim acho que funciona

 

<img src="teste.jpg" style="width: 50%;" />

[brcontainer 16]

assim acho que funciona

 

<img src="teste.jpg" style="width: 50%;" />

lembre-se programador php evite estilos inline

e outra a sua aplicação vai redimensionar a imagem fazendo ela ficar estranha

talvez isso não seja uma boa aplicação

 

:wink:

[programador php 0]

assim acho que funciona

 

<img src="teste.jpg" style="width: 50%;" />

lembre-se programador php evite estilos inline

e outra a sua aplicação vai redimensionar a imagem fazendo ela ficar estranha

talvez isso não seja uma boa aplicação

 

:wink:

 

obrigado pela dica do estilo inline...

 

o que seria melhor usar neste caso(inline) a especificidade ou uma classe??

 

mesmo que a imagem seja maior do que os 50% da tela??

 

abraço

[brcontainer 16]

Depende da quantidade de imagens(ou elementos iguais)

nesse caso como há mais imagens é melhor usar uma classe(acaso tenha mais imagens na mesmo elemento)

 

;)

[programador php 0]

caso seja apenas um elemento vale mais usar a especificidade

 

certo?

 

abraço

[brcontainer 16]

caso seja apenas um elemento vale mais usar a especificidade

 

certo?

 

abraço

Sim, mas isso pode variar conforme a aplicação que será feita, por exemplo se eu apenas quiser bloquear a borda da imagem (elemento) e posso especiacar usando o elemento PAI

#pai img{
border:none;
}

acaso eu tenha uma visão mais dessa imagem do meramente uma foto, tipo não seria só uma foto mas a foto principal

e abaixo vier fotos menores ae seria melhor definir uma Classe para a foto principal, claro que isso varia conforme você quer aplicar, exemplo para fotos menores(geralmente um menu com thumbs da fotos) eu prefiro usar <UL> e <LI> para organizar

 

mas lembre-se nem só por que você segue essas ideias suas aplicações serão boas, tem tambem de ter uma ideia boa de organizar os elementos na página.

 

você está aprendendo rapido(tambem estou aprendendo pois nunca se para de aprender), continue assim

 

;)

[programador php 0]

hunm entendido!!!

 

mas tenho muito a aprender ainda, muito mesmo...

 

considero-me como iniciante begginer

 

hehe

 

 

abraço