Ir para conteúdo

POWERED BY:

Arquivado

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

donato

layout: 3 box liquidos

Por , em Desenvolvimento frontend

Recommended Posts

donato    0

donato
Postado

Olá pessoal, desenvolvi esse layout, e esses box centrais gostaria que fosse liquidos, ai consegui fazer somente com listas pq com divs só deu certo se os dos laterais ficassem fixos, alguem sabe como fazer com divs? Com lista deu certo mas acho q está errado, ou não??

 

 

www.ourofino.com/web/portal

 

abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

donato    0

donato
Postado

Visitou o site? esses boxs internos tem que redimencionar de acordo com a resolução tb, consegui isso com listas, mas sei q está errado

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

faça tipo assim:

<style>
div{
height:auto;
float:left;
}
#div1{
background:#0000ff;
width:32%;
}
#div2{
background:#00ff00;
width:32%;
}
#div3{
background:#ff0000;
width:32%;
}
</style>

<div id="div1">1</div>
<div id="div3">3</div>
<div id="div2">2</div>

mas você pode seguir a ideia com lista

apenas troque <UL> e <LI> por Classes e Divs(ou objetos complacentes)

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

donato    0

donato
Postado

ok, vou tentar!! valeuuu

Compartilhar este post

Link para o post
Compartilhar em outros sites

donato    0

donato
Postado

Galerinha, fiz as divs da forma a seguir, como era minha dúvida pode ser a de alguém tb, está ai, bem fácil!!

 

 

abraços

 

 

<style type="text/css">
<!--
#div2 {
	background: #FFFF00;
 	float: left;
	width:30%;
	height:250px;
}
#div3 {
	background:#00FF00;
	margin:auto;
	width:30%;
	height:250px;
}
#div1 {
	background: #FF0000;
 	float: right;
	width:30%;
	height:250px;
	
}
-->
</style>
</head>

<body>

<div id="base">

   
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>

</div>

</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

obrigado donato

e que bom que foi resolvido seu problema

qualquer coisa volte a postar

 

só que tem um problema Donato no IE6 o seu Layout fica com o Div do meio menor do que deveria

tente seguir o exemplo que lhe passei

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

donato    0

donato
Postado

amigo, fiz esse layout separado ai deu certo de boa, mas quando coloquei no meu layout ele está jogando uma div pra baixou não ficam alinhados, não sei mais o que fazer.

 

 

abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

donato    0

donato
Postado

Esse que eu fiz, fiz ele separado ficou perfeito, ai quando jogo no layout do site ele detona tudo!!vou ver o seu atualizado!!! abraçoss

 

[atualizado]

Seu código não funcionou ak tb não!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

donato    0

donato
Postado

As divs não aparecem, www.ourofino.com/web/portal, acho q vou voltar atrás e fazer com listas mesmo!!rsrs, pelo mneos tinha funcionado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

você tambem poderia fazer as laterais com largura FIXA assim teria menos problemas

siga esse exemplo:

<style>
#a{
	float:left;
	background:#ff0000;
	width:100px;
	height:200px;
}
#b{
	display:block;
	background:#0000ff;
	margin: 0 110px;
	height:200px;
}
#c{
	float:right;
	background:#0000ff;
	width:100px;
	height:200px;
}
</style>
<div id="a">a</div>
<div id="c">c</div>
<div id="b">b</div>
;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

donato    0

donato
Postado

Mas ai vai ficar estranho! Acha q dá problema usar Listas? com elas funcionou perfeito. abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

como assim estranho?? eu utlizo assim

e uso largura minina no elemento pai...

 

mas se deu certo com as listas tambem deveria dar certo como outros elementos

talvez você tenha feito algo errado =)

 

verifica beleza?? http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

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