Como faço para fazer meu menu CSS/HTML minimizar graciosamente quando um usuário minimiza a janela do navegador?

StackOverflow https://stackoverflow.com/questions/3430234

Pergunta

Meu problema

Quando minimizo a janela do navegador, o menu de categoria não minimiza a maneira como gostaria. Eu gostaria do li elementos para cair um por um abaixo do outro li elementos como a janela é minimizada. O problema é que o todo ul O elemento é lançado abaixo do p elemento.

Um exemplo ao vivo do O menu está localizado aqui.
O exemplo ao vivo O código está localizado aqui.

Aqui está o menu de categoria em uma janela de tamanho completo. Observe as principais categorias e sub -categorias cinza p As divs não estão na altura máxima, apesar de eu ter definido sua altura para 100%. Os divs laranja e amarelo são chamados #a Principal e #sub. A div roxa é o ul elemento e os blocos levemente coloridos com texto neles são os li elementos.texto alt http://lh3.ggpht.com/_rnlssubkyo/tf08fsfra4i/aaaaaaaaafw/hzm7flu032a/cat-full-size.jpg

Aqui está em uma janela de 861px de largura. Sem mudança ...texto alt http://lh3.ggpht.com/_rnlssubkyo/tf08gyxmmhi/aaaaaaaaaf0/nfpr-pv3ef4/cat-861px.jpg

Aqui está em uma janela de 777px. Aqui você pode ver todo o roxo ul elemento no amarelo #sub Div apenas cai abaixo das sub -categorias cinza p elementoTEXTO ALT http://lh5.ggpht.com/_rnlspsubkyo/tf08h2taa8i/aaaaaaaaaf4/vh5wo46hcgg/cat-777px.jpg

Aqui está em uma janela de 731px. Aqui podemos ver o roxo ul elemento na laranja #a Principal Div também cai abaixo das categorias principais p elemento.texto alt http://lh3.ggpht.com/_rnlssubkyo/tf08iumaxri/aaaaaaaaaf8/pqmpogvv_y/cat-731px.jpg

Aqui está em uma janela de 721px. Finalmente podemos ver que o li Os elementos começam a descer um nível como o amarelo #sub Div mínimos ainda mais.

A solução que procuro

Agora eu gostaria de mostrar os resultados que eu tenho com maquetes que construí no Photoshop.

Aqui podemos ver o cinza p elemento que contém as categorias principais e sub -categorias do texto está agora no auge de seus #a Principal e #sub contendo divs. Além disso, e mais importante, podemos ver que todo o ul O elemento não cai mais abaixo do cinza p elemento.TEXTO ALT HTTP://lh3.ggpht.com/_rnlssubkyo/tf08lbmfwni/aaaaaaaaagm/wlqx_wvssqw/cat-correct-777px.jpg

E finalmente podemos ver #a Principal Divs roxo ul elemento minimize propomente exatamente como o #sub Divs roxo ul O elemento fez na tela a foto acima.TEXTO ALT HTTP://lh6.ggpht.com/_rnlspsubkyo/tf08l0f5ooi/aaaaaaaaagq/isdjlp6m_rs/cat-correct-731px.jpg

Imagens em tamanho real das imagens aqui podem ser vistas no meu Álbum de Picassa

Alguma ideia de como consertar isso?

Foi útil?

Solução 2

O que eu tinha que fazer era adicionar display: table; para o ul elemento e se livrar de float:left. Agora minimiza como eu gostaria em Firefox, Chrome, IE, Opera e Safa aqui está o Link para o novo código atualizado

Outras dicas

Não tenho tempo para terminar isso, mas depois de trabalhar nisso, é isso que consegui: (postar aqui porque a função salvar não parecia funcionar).

<!DOCTYPE html>
<html>
  <head>
    <title>
      Categories DIV Problem
    </title>
    <style type="text/css">
      /*** GLOBAL ***/

      *
      {
        padding: 0;
        margin: 0 auto;
        outline: none;
      }

      html, body
      {
        height: 100%;
        font: .9em Arial ,san-serif;
      }

      ul, li
      {
        list-style: none;
      }

      .clear
      {
        clear: both;
      }  

      /*** PAGE ***/

      #container
      {
        max-width: 1000px;
        width: 85%;
        height: auto;
        min-height: 100%;
        margin: 0 auto;
      }

      /*** CATEGORIES ***/

      #categories
      {

        height: 100%;
        /* padding: 20px; */
        margin: 5px 0 0 0;
      }

      #main
      {
        background: orange;
        height:50px;

      }

      #sub
      {
        background: yellow;
      }

      #cat-main
      {

      }

      #cat-sub
      {
        float: left;
      }

      .cat-name-box
      {
        float: left;
        height: 100%;
        background: #ddd;
      }

      .cat-choice-box
      {
        width:auto;
        background: purple;

      }


      #categories li
      {
        float: left;
        padding: 3px 8px;
        margin: 1px;
      }

      #cat-main li
      {
        background: #D7B0FF;
      }

      #cat-main li:hover
      {
        cursor: pointer;
        background: #9A38FF;
        color: #fff;
      }  

      #cat-sub li
      {
        background: #85FF87;
      }

      #cat-sub li:hover
      {
        cursor: pointer;
        background: #00C403;
        color: #fff;
      }    

    </style>
  </head>
  <body>
    <div id="container">
      <div id="categories">
        <div id="main">
          <div class="cat-name-box">Main Categories</div>
          <ul class="cat-choice-box" id="cat-main">
            <li>Technology</li>
            <li>Politics</li>
            <li>Business</li>
            <li>Science</li>
            <li>Music</li>
            <li>Film</li>
            <li>Art</li>
            <li>Health</li>
            <li>Sports</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

O problema é que a altura definida no contêiner do texto + ul, ele deve ser definido para o elemento P (eu mudei para div, acho, não me lembro do porquê) para herdar a altura de 100%.

Espero que isso ajude, embora eu saiba que essa não é a solução inteira.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top