Ir para conteúdo

POWERED BY:

Arquivado

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

Rodrigo Tadewald

[Resolvido] Problemas com divs extensíveis

Por , em Desenvolvimento frontend

Recommended Posts

Rodrigo Tadewald    0

Rodrigo Tadewald
Postado

Encontrei um problema na formatação do meu site.

 

É um problema simples, aparentemente. Tenho 3 divs, lado a lado e gostaria que a div central tivesse width fixo e as laterais se esticassem igualmente para preencher o restante da página (exatamente como o topo do imasters, ali em cima, onde as laterais se esticam para ocupar o que falta). Já pesquisei em tudo quanto é lugar e não consigo encontrar a solução!

 

As tres divs possuem imagens de fundo. O código HTML segue abaixo:

 

<body id="body">

      		<div id="link-esquerda">	
           </div>
               <div id="link-meio">
     		</div>      
           <div id="link-direita">	
           </div>      



</body>

 

E o CSS:

 

#link-esquerda{
float:left;
width:auto;
height:100px;
background:url(../_img/link_lado.png);
}

#link-meio{
float:left;
width:1028px;
height:100px;
background:url(../_img/links.png);	

}

#link-direita{
float:right;
height:100px;
background:url(../_img/link_lado.png);
}

 

Alguém pode me ajudar?

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

pq você acha q precisa dessas DIVs laterais ?

 

se for para fins de arte de layout, existem formas melhores de resolver, como aplicar um background no body com position: center;

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo Tadewald    0

Rodrigo Tadewald
Postado

Oi, Willian!

 

O layout que fiz em fireworks é o seguinte: http://imageshack.us/f/835/layoutiu.jpg

O background já está com o fundo da textura e essas divs são na parte do menu, abaixo do logo (aquilo que parece uma fita). Tenho uma imagem, que é a parte central do menu e as laterais são as continuações (ao lado). Desejo que elas se prolonguem infinitamente, dependendo da tela do usuário. A parte central está setada com 1028x100.

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

então vejo 2 soluções:

 

A imagem da fita tendo um width grande, de pelo menos 2100px;

Ou, um bg-repeat de um filete vertical dessa fita, se repetindo por trás da fita real. Isso dará a sensação de prologamento, sem fazer uma imagem gigante.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo Tadewald    0

Rodrigo Tadewald
Postado

Pois é, foi exatamente isso que fiz, mas não estou conseguindo fazer a div crescer suficientemente pra completar o espaço que falta. Quando faço o código da maneira acima, o div fica pequeno, ja que o comando width:auto; não é suficiente pra fazer elas se repetirem até preencher a tela.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

então cara.. da forma q eu pensei você não terá 2 divs laterais.

 

E sim uma DIV pai da que contém o laço. Entendeu ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo Tadewald    0

Rodrigo Tadewald
Postado

entendi, entendi. Porém, o que acontece é que a div central contem uma imagem que contem transparência (justamente pra se adaptar à textura do fundo). Se eu fizesse da maneira que tu sugeriu, a div de cima sobreporia a de baixo e eu não obteria o efeito que eu quero :/

 

Entendeu?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

sim, e já que a transparência é um problema então a outra solução fica sendo a imagem gigante em width.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

background-position: center 100px;

 

sendo q ela deve ter width: auto; ou seja o mesmo width da janela do browser do cara.(mesmo do body)

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