Come faccio a fare il mio menu categoria CSS / HTML ridurre al minimo garbo quando un utente minimizza la finestra del browser?

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

Domanda

Il mio problema

Quando ho ridurre al minimo la finestra del browser del menu categoria non minimizza il modo in cui mi piacerebbe a. Desidero il li elementi a cadere uno ad uno sotto elementi altro altro Li come la finestra è minimizzata. Il problema è che tutta la ul è sceso al di sotto della p elemento.

Un esempio vivo del menu si trova qui .
del esempio dal vivo si trova qui.

Ecco il menu categoria in una finestra full size. Notate le principali categorie e sotto categorie grigio p DIV non sono alla massima altezza, anche se ho impostato la loro altezza al 100%. L'arancio e giallo DIV sono chiamati #main e #sub . Il DIV viola è il ul e i blocchi leggermente colorate con il testo in loro sono li elementi. alt text http://lh3.ggpht.com/ _rNlSpSUBkYo / TF08FsFrA4I / AAAAAAAAAFw / hZm7flu032A / cat-full-size.jpg

Qui è in una grande finestra 861px. Nessun cambiamento... alt text http://lh3.ggpht.com/ _rNlSpSUBkYo / TF08GYxMMhI / AAAAAAAAAF0 / nFpr-pV3eF4 / cat-861px.jpg

Qui è in una finestra di 777px. Qui potete vedere l'intero viola ul nel #sub DIV scende appena sotto le grigie Sotto categorie p giallo elemento alt text http://lh5.ggpht.com/_rNlSpSUBkYo/ TF08H2tAA8I / AAAAAAAAAF4 / VH5Wo46HCgg / cat-777px.jpg

Qui è in una finestra di 731px. Qui possiamo vedere la ul elemento viola in arancione #main DIV scende anche al di sotto delle principali categorie p elemento. alt text http://lh3.ggpht.com/_rNlSpSUBkYo/ TF08IUMAXRI / AAAAAAAAAF8 / pqmPpOgVv_Y / cat-731px.jpg

Qui è in una finestra di 721px. Finalmente possiamo vedere che la li gli elementi cominciano a cadere verso il basso livello come il giallo #sub minimzes DIV ancora di più.

La Soluzione I Seek

Ora vorrei visualizzare i risultati che sto dopo con mock up ho costruito in Photoshop.

Qui possiamo vedere il grigio p elemento contenente il testo principale categorie e sotto categorie sono ora al culmine della loro piena #main e #sub DIV contenenti. Anche e soprattutto, possiamo vedere che l'intero ul elemento non scende sotto il grigio p elemento. alt text http://lh3.ggpht.com/ _rNlSpSUBkYo / TF08LBmFWnI / AAAAAAAAAGM / WLQx_wVsSQw / cat-corretta-777px.jpg

E finalmente possiamo vedere #main DIV viola ul elemento minimizzare propely proprio come la #sub DIV viola ul elemento ha fatto nella schermata qui sopra. alt text http://lh6.ggpht.com/ _rNlSpSUBkYo / TF08L0F5OoI / AAAAAAAAAGQ / isdjLp6m_rs / cat-corretta-731px.jpg

immagini in grandezza delle immagini qui può essere visto al mio album di Picasa

Tutte le idee su come risolvere questo problema?

È stato utile?

Soluzione 2

Quello che dovevo fare era di aggiungere display: table; all'elemento ul e sbarazzarsi di float:left. Ora minimizza come vorrei attraverso Firefox, Chrome, IE, Opera e Safa Ecco l' collegamento alla nuova codice aggiornato

Altri suggerimenti

Non ho il tempo di finire questo, ma dopo aver lavorato su di esso questo è quello che ho ottenuto: (Distacco qui causa la funzione di risparmio non sembrava di lavoro). 

<!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>

Il problema è che il set di altezza sul contenitore del testo + ul, deve essere impostato per il p-elemento (ho cambiato in div penso, non ricordo perché) per ereditare l'altezza al 100%.

Spero che questo tipo di aiuti se so che questo non è l'intera soluzione.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top