9 replies to this topic

[Klaus]

Olá pessoal!

Sou um dos adeptos ao Tableless, como alguns aqui já sabem. Ser adepto, não signifca dominar, infelizmente, rs.

Imagine um layout simples, como exposto na imagem em anexo. Temos o topo (em verde), o menu (em azul) e o conteúdo (em... na outra cor).

Minha indagação: Imaginemos que eu queria fazer com que a cor de fundo do menu, se extenda diretamente proporcional à altura do conteúdo. Ou seja, aumentou o conteúdo, ela aumenta, diminuiu, ela diminui tambem (claro que tem o valor mínimo, sem problemas quanto à isso).

Seria digamos, emular o efeito de duas células de uma mesma tabela, só que com camadas.

Alguém tem alguma idéia para isso, ou já faz isso, e queira compartilhar essa maneira?

Obrigado e []´s.

Attached Files

•  tableless.gif   3.28KB   3 downloads

[brunoalves]

Eu já fiz isso a muito tempo e coloquei aqui no fórum, mas não me lembro mais do código exatamente e dava problema no opera, mas se não me engano definia a altura minima para o valor que eu queria e definia a máxima para 100%, você pode tentar colocar a margem inferior fixa também.

Tenta e ve no que dá.

Abraço.

[_MX_]

ja pesquisei muito sobre isso mas nao achei nada até hj tambem

[Alex Hiroshi]

Eu tbm estou procurando uma solução pra isso!!
Ja tentei de tudo, mais não da certo...
uma que deu, mais só no IE, foi deixar a div geral com 100% de altura.. e a div do menu tbm.. mais so no ie ele funciona .. testei no opera e no firefox

Se acharem alguma coisa, postem ae

[Klaus]

Valeu galera!

Ahhh que alívio! Achei que eu estava enferrujando.

Bruno: Você fala em definir min-height e max-height? Se for, pelos testes que efetuei (com selects), eles não funcionam no IE.

Vou procurar algo assim ou desenvolver isso. Podem ter certeza.

[f4hr3nh3it]

tem um truque que eu vi no csszengarden uma vez:

tem um DIV pegando esses dois containers do meio, certo ?
como background desse container, tem uma imagem da cor do menu e da largura do menu

funciona para alguns casos



acho que há um script em javascript que regula isso, mas eu não gosto muito, hehehe


abraços

[brunoalves]

Eu definia dois valores sim, min-height e height, mas tinha uma malandragem para que um fosse interpretado pelo IE e outro não, mas perdi a joça do código, vou dar uma fuçada e se achar alguma coisa posto aqui (to meio parado em fazer páginas então dei uma enferrujada ).

Tem alguns seletores que uns browsers vêm e outros não e tem a opção de usar o <!--[if IE]> <![endif]-->, o código que estiver dentro do bloco só é executado pelo IE.

Abraço.

[MarviN*]

Geralmente eu coloco o background no div que engloba tudo (pra centralizar por exemplo). Faz uma imagem de uma linha com a largura do menu e manda ele repetir só na vertical.

[f4hr3nh3it]

Geralmente eu coloco o background no div que engloba tudo (pra centralizar por exemplo). Faz uma imagem de uma linha com a largura do menu e manda ele repetir só na vertical.

haha

foi isso que eu quis dizer no meu post

[d3lay]

Olá pessoal!

Sou um dos adeptos ao Tableless, como alguns aqui já sabem. Ser adepto, não signifca dominar, infelizmente, rs.

Imagine um layout simples, como exposto na imagem em anexo. Temos o topo (em verde), o menu (em azul) e o conteúdo (em... na outra cor).

Minha indagação: Imaginemos que eu queria fazer com que a cor de fundo do menu, se extenda diretamente proporcional à altura do conteúdo. Ou seja, aumentou o conteúdo, ela aumenta, diminuiu, ela diminui tambem (claro que tem o valor mínimo, sem problemas quanto à isso).

Seria digamos, emular o efeito de duas células de uma mesma tabela, só que com camadas.

Alguém tem alguma idéia para isso, ou já faz isso, e queira compartilhar essa maneira?

Obrigado e []´s.

ISSO NO HTML

<div id="menu_IPUF">
    <ul>
     <li><font size="2px" color="#535353" ><b>&nbsp;Menu de Navegação</b></font></li>
  <li><a href="index.htm" target="_self">Atribuições Legais</a></li>
        <li><a href="#" target="_self">Contatos</a></li>
        <li><a href="#" target="_self">Geoprocessamento</a></li>
        <li><a href="#" target="_self">Eventos</a></li>
        <li><a href="#" target="_self">Floripa mais Segura</a></li>
        <li><a href="#">Fale Conosco</a></li>
     <li><a href="#">Informações</a></li>
  <li><a href="#">Imagens</a></li>
  <li><a href="#">Licitações</a></li>
  <li><a href="#">Links Úteis</a></li>
  <li><a href="#">O Instituto</a></li>
  <li><a href="#">Patrimônio</a></li>
  <li><a href="#">Pré-Consulta de Viabilidade</a></li>
  <li><a href="#">Planos</a></li>
  <li><a href="#">Projetos</a></li>
  <li><a href="#">Zona Azul</a></li>
        <li><font size="2px" color="#535353" ><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Parceiros</b></font></li>
     <li><a href="#">Prefeitura Municipal de Florianópolis</a></li>
  <li><a href="#">Polícia Militar de Santa Catarina</a></li>
  <li><a href="#">CIASC</a></li>
  <li><a href="#">IBAMA</a></li>
  <li><a href="#">Itis</a></li>
  <li><a href="#">Detran/Sc</a></li>
    </ul>
	</div>

ISSO NO CSS:

#coluna_esquerda{ 
 float:left;
 Background: #7AA8D6;
 width: auto;
 margin-left: 0px;
 margin-top: 3px;
}
 * html #coluna_esquerda{
   margin-top: 0px;
}

#menu_IPUF ul{
  list-style-type: none;
  padding:0 1px 1px;
  margin: 0;
  margin-left: 1em;
  background-color: #E4E4E4;
  font: 12px Verdana, sans-serif;
  width: 13em;
  text-decoration: none;
  }

 #menu_IPUF li{
  list-style: none;
  margin: 0;
  text-align: left;
  text-decoration: none;
  background: #CECECE;
  padding: 1px;
  }

 #menu_IPUF li a{
  display: block;
  margin: 0;
  border-bottom: 1px solid black; 
  text-align: left;
  text-decoration: none;
  background: #E4E4E4;
  }

#menu_IPUF li a:hover{
   border-color: #FF0000;
   color: #000000;
   background: #B4D0EF;
   text-align: left;
}

#menu_IPUF li a:link{  
  color: #000000;
  }

#menu_IPUF li a:visited{  
  color: #000000;
  }

Divirta-se... Retire alguns LINKS ali em cima e verá que irá diminuir...

Para se fazer menu nao há nada melhor que o famoso <ul><li></li><ul>