Ir para conteúdo

POWERED BY:

Arquivado

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

micox

Menu com divs de largura automática

Por , em Desenvolvimento frontend

Recommended Posts

micox    2

micox
Postado

Olá.

 

bom. Aproveitando o tópico postado pelo lucas_bwd: http://forum.imasters.com.br/index.php?showtopic=157380&hl= que fala sobre dificuldades com divs, eu tenho mais uma dúvida no mesmo estilo.

 

Primeiramente vou colocar como faço no antigo sistema usando tabelas e gostaria de saber se é possível fazer isso na filosofia do tableless.:

 

<table width="100%">  <tr>	<tr>coluna 1</tr>	<tr>coluna 2</tr>	<tr width="200px">coluna 3</tr>  <tr></table>

Lendo o código, percebe-se facilmente que a coluna 3 terá uma largura fixa de 200px independente da largura da tabela pai, e a largura restante será dividida pelas outras colunas da forma que o browser desejar.

Caso futuramente eu mude a largura da tabela, a coluna 3 continuará com seus 200px e as outras aumentarão o tamanho automaticamente.

Caso futuramente eu acrescente novas colunas, a coluna 3 continuará com seus 200px e as outras dividirão a largura restante automaticamente.

 

Resumindo: As colunas sempre se ajustarão para ocupar o espaço total da tabela.

 

DÚVIDA: COMO FAZER ISTO USANDO DIVS???

Como fazer para que divs tenham sua altura ou largura ajustadas/divididas automaticamente entre si???

 

 

 

 

PS.: Pra que eu quero isto?

É que eu tenho um sistema que monta um menu principal automaticamente (via asp) de acordo com os links que estão cadastrados no banco de dados. O usuário cadastra no bd um novo link principal pra aparecer no site, e o script gera o menu (que tem a largura fixa de 450px) através de uma tabela como mostrada acima.

Usando a tabela acima, os links se ajustam automaticamente para ocupar o espaço de 450px.

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

primeiro, são <td>'s e não <tr>'s q devem receber o width http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

segundo, do mesmo modo como você faz com as tabelas, faça com os divs... leu meu segundo artigo? acho q naum... se leu, lê de novo e presta atenção quando falo sobre essa sua dúvida...

 

no css, a largura quando ela naum eh setada um valor, ela fica liquida, ou seja, vai esticando de acordo com o layout e seu conteudo...

 

WebStandards - Posicionamento e Layouts (Parte 02)

 

o topico está pendurado pra quando precisarem, eh soh ler http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

E ae. bleza.Valeu a resposta mas não consegui absorver como aquilo irá me ajudar em meu menu. (o código que eu coloquei no post anterior é só para o menu e não para o layout inteiro)

primeiro, são <td>'s e não <tr>'s q devem receber o width

Ops. foi mal, erro na hora de digitar, deveriam ser tr 's mesmo.Lá no seu artigo você fala que se eu deixar o width vazio, ele vai assumindo o tamanho inteiro. Porém você também fala que não se aplica a floats. Comé que eu faço meu menu então?

não declarando um width, automaticamente o elemento ficará com a largura de seu “pai”...Obs.: Como eu disse, o padrão de tamanho dos elementos é líquido, ou seja, estende-se ao final de seu “pai”. Mas isto não se atribui nos elementos com floats. Caso possua, o tamanho do elemento ficará de acordo com seu conteúdo.

Eu tentei fazer o código abaixo, porém ele não tomou a mesma aparencia de tabela, mas sim ficou com um espaço sobrando até chegar no final da div principal. E os divs não ajustaram automaticamente sua largura para preencher o espaço inteiro.
...<style type="text/css">.princ {  border: 1px solid red;  width: 400px;}.cols {  border: 1px solid blue;  float:left;}</style></HEAD><BODY><div class="princ">  <div class="cols">coluna 1</div>  <div class="cols">coluna 2</div>  <div class="cols">coluna 3</div></div></BODY></HTML>
Não sei se eu não entendi seu artigo. só sei que não achei a resposta.Então minha perguta inicial continua: Como fazer para que divs tenham sua altura ou largura ajustadas/divididas automaticamente entre si???Valews...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Se entendi mais ou menos a lombra que ce ta querendo, ce cria uma div maior q sirva de conteiner para as outras, em seguida você define uma largura e altura fixas para esse div, depois define larguras automaticas para as divs contidas no conteiner maior. Espero ter sido claro, senão...lê algo + sobre css :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Aí que está o problema cara.Eu nao posso ter largura nem alturas fixas.Eu preciso que a largura da div pai seja dividida entre as divs filhas.Já conheço muito sobre css, mas nada que possa me ajudar.Será que vou ter que continuar com tabelas nesse ponto?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Agora ñ to entendendo o q ta pegando...mesmo, explica melhor ou mostra online q o q tu que, fica mais facil, testei aqui e ta beleza :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Nao... você não entendeu. Não é questão de dar erro. É questão de ser possível ou não.

Leia meu primeiro post que você vai entender.

 

Veja este código:

<table width="400px">  <tr>	<td>coluna 1</tr>	<td>coluna 2</tr>	<td>coluna 3</tr>  <tr></table>
Quando o browser for carregar este código, ele irá dividir AUTOMATICAMENTE a largura 400px entre as 3 colunas.

 

O que eu quero é que haja uma forma de se fazer isto também utilizando tableless.

Leia atentamente meu primeiro post que entenderá.

 

Valewsss...

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Galera, ninguém vai me responder se pelo menos é possível com tableless??Alguém???

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

rapaz... espere as respostas... naum eh sempre q o pessoal pode responder http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

bom, pelo q eu saiba, floats sem valores absolutos se redimensionam de acordo com seu conteúdo, pontanto, não creio que dê para fazer isso sem um valor d width...

 

testei um jeito aki com valores em percentagem:

<html><head><title>Teste</title><style type="text/css">.princ {	border: 1px solid red;	width: 400px;}.cols {	background: #CCCCCC;	float: left;}.um, .tres { width: 33%; }.dois { width: 34%; }</style></head><body>	<div class="princ">		<div class="cols um">coluna 1</div>		<div class="cols dois">coluna 2</div>		<div class="cols tres">coluna 3</div>	</div></body></html>
mas creio q terá problemas, principalmente nos browsers decentes, eh soh verificar no i.e. e no FF, opera, etc... verá q o div princ não acompanha o conteúdo das divs cols por causa do float que contém nelas... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

rapaz... espere as respostas... naum eh sempre q o pessoal pode responder

Ops. Desculpe pela pressa. :)

mas creio q terá problemas, principalmente nos browsers decentes, eh soh verificar no i.e. e no FF, opera, etc... verá q o div princ não acompanha o conteúdo das divs cols por causa do float que contém nelas...

Ahném... então concluimos que é impossível que divs filhas dividam o conteúdo AUTOMATICAMENTE? Que pena...Então vou ter que escolher uma das 2 opções abaixo. Sendo que todas são ruins...:1) continuar usando tabelas mesmo neste menu atuomático2) tentar fazer as divs se dividirem usando linguagem serverside(asp,php), só que aí o css (design) irá se misturar com o conteúdo (html). Uma pena.Parece então que tem algumas coisas que só com tabelas mesmo.De qualquer jeito valeu, mas espero que alguém descubra um dia uma solução pra isto.

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