Ir para conteúdo

POWERED BY:

Arquivado

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

Paulo Mardson

[Resolvido] Div fluida 100%

Por , em Desenvolvimento frontend

Recommended Posts

Léo Motta    1

Léo Motta
Postado

Desculpa mas nao estou conseguindo visualizar a imagem!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Léo Motta    1

Léo Motta
Postado

Faremos uma folha em HTML e uma em CSS: bem vamos la, depois vou mostrar onde estava o erro do seu codigo

 

Folha HMTL:

<html>

<head><title>teste de div</title>

<link href = "estilo.css" rel = "stylesheet" type = "text/css" media="all"/>

</head>

<body>

 

 

<!-- pelo que eu vi da imagem.. acho que isso soluciona -->

 

<div id="conteiner"><!-- é a principal, onde as demais ficaram dentro -->

 

<div id="left">inserir item</div><!-- é o menu da esquerda -->

<div id="right">inserir item</div><!-- menu da direita -->

</div><!-- fim div container -->

 

 

</body>

</html>

 

Folha em CSS:

 

#conteiner{

position:relative;

width:100%; /*largura da pagina*/

height: 600px; /*coloquei um tamanho consideravel, para enchergarmos a div pai por completo.*/

border: 2px solid #000000; /* inseri uma borda para melhor visualizar*/

}

 

#left{

margin-left:0px;

margin-top:3px;

width:200px; /*largura do menu da esquerda*/

height:auto; /* tamanho em automatico*/

float:left; /*ficara alinhado a esquerda*/

position:relative;

border:2px solid #000000; /* inseri uma borda para melhor visualizar*/}

 

#right{

margin-right:0px;

margin-top:3px;

width:80%; /*largura do menu da esquerda*/ "aqui estava o seu erro, se você colocar 100% ele vai querer ocupar toda a tela, entao como ja temos uma div na esquerda a da direita nao pode ocupar 100%"

height:auto; /* tamanho em automatico*/

float:right; /*ficara alinhado a direita*/

position: relative;

border: 2px solid #000000; /* inseri uma borda para melhor visualizar*/}

 

Bem acho que é isso, se lhe foi util da um alo ae ....

 

o resultado ficou assim:

 

http://imageshack.us/f/101/tstdiv.png/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exemplo:

http://wbruno.com.br/blog/2009/08/16/div-100-redimensionavel-com-coluna-fixa/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Léo Motta    1

Léo Motta
Postado

É eu testei isso, mas quando você redireciona a tela acontece como na imagem que anexei. =/

 

Não seria problema de compatibilidade do navegador que você esta usando?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe Tonolli    0

Felipe Tonolli
Postado

Não entendi direito, a div da direita tem que redimensionar ou ela pode ser fixa? Se puder ser fixa use uma div de fundo com altura que não permita a div da direita cair pra baixo. Por exemplo:

#fundo {width:500px; height:400px;}
#1 {width:200px; heigth:400px; float:left;}
#2 {width:300px; heigth:400px; float:left; }

<div id="fundo">
<div id="1"></div>
<div id="2"></div>
</div>

 

Quando você redimensionar a janela, a div 2 não irá cair embaixo da div 1 pois não terá espaço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

@Felipe Tonolli, no ie6 ela vai cair.. pq ele trabalha o box model de uma forma que pelo menos eu concordo com ele.

 

 

 

@Paulo Mardson veja o link que postei em #6

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe Tonolli    0

Felipe Tonolli
Postado

Eu testei aqui e não caiu em nenhum IE. Acredito que o que ele quer é um modelo semelhante ao da americanas.com, onde o conteúdo dessa div da direita é redimensionado, ele vai sendo "achatado" conforme você diminui o tamanho da janela. De uma olhada pra você ver.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado
use o Responder Azul respondery.png

ou a 'Resposta Rápida'.

 

@Felipe Tonolli, não caiu, pq você limitou a largura do pai em 500px.

No início do tópico ele cita que precisa da div em 100%.

 

Conform essa imagem:

http://twitpic.com/5aafar

 

e conforme a solução que postei:

http://wbruno.com.br/blog/2009/08/16/div-100-redimensionavel-com-coluna-fixa/

 

Mas é isso aí, bacana podermos discutir no fórum. :lol:

E seja bem vindo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe Tonolli    0

Felipe Tonolli
Postado

hehe, valeu, só fórum de carro da nisso, quote pra todo lado ..

 

Você tinha razão mesmo, quando utilizo porcentagem ela cai até nos outros IEs. Na verdade eu acho que ele quer a div 100% da largura restante, pois não tem como ser 100% sendo que já existe uma div de 200px descontando da largura total. Ele poderia por exemplo criar uma div de fundo com tamanho mais ou menos padrão de 960px, e essas duas divs utilizar do modo como ele quer, assim não caiaria. Isso claro pra contornar esse problema, não sei se seria o mais correto. Mais ou menos assim:

#fundo {width:960px; heigth:400px; position:absolute;}
#1 {width:200px; height:400px; float:left;}
#2 {width:760px; height:400px; float:left;} //100% do restante da página

<div id="fundo">
<div id="1"></div>
<div id="2"></div>
</div>

 

Mas realmente IE6 me condena, praticamente nem olho mais, hehe

Abraços e obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado
Ele poderia por exemplo criar uma div de fundo com tamanho mais ou menos padrão de 960px

isso.. só que a dificuldade é que ele quer os 100%-200px de forma automatica.

 

então se a viewport do monitor estiver com 1000px de largura, essa div 'automatica', teira 800px, se ela tiver 1440px de largura, essa automatica teria 1240px..

 

e assim por diante.

dá uma olhada nesse código aqui:

http://wbruno.com.br/blog/2009/08/16/div-100-redimensionavel-com-coluna-fixa/

 

você vai entender =)

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