Comment puis-je faire mon menu de catégorie CSS / HTML minimiser grâce lorsqu'un utilisateur réduit la fenêtre du navigateur?

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

Question

Mon problème

Quand je réduis la fenêtre du navigateur dans le menu de la catégorie ne minimise pas la façon dont je voudrais à. Je voudrais que le li éléments pour déposer un par un sous l'autre autre li éléments que la fenêtre est réduite au minimum. Le problème est que l'ensemble de l'élément ul tombe en dessous de l'élément p .

Un exemple en direct de la menu est situé .
L'exemple de code en direct se trouve ici.

Voici le menu de la catégorie dans une fenêtre de taille réelle. Remarquez les catégories principales et sous catégories gris p DIVS ne sont pas au maximum de la hauteur, même si je mets leur hauteur à 100%. Le DIVs orange et jaune sont appelés #main et #sub . La DIV pourpre est le ul et les blocs légèrement colorés avec du texte en eux sont les éléments li . alt texte http://lh3.ggpht.com/ _rNlSpSUBkYo / TF08FsFrA4I / AAAAAAAAAFw / hZm7flu032A / chat-plein size.jpg

Ici, il est dans une fenêtre large 861px. Pas de changement... alt texte http://lh3.ggpht.com/ _rNlSpSUBkYo / TF08GYxMMhI / AAAAAAAAAF0 / NFPR-pV3eF4 / chat-861px.jpg

Ici, il est dans une fenêtre de 777px. Ici vous pouvez voir l'ensemble violet élément ul dans le jaune #sub DIV tombe juste en dessous des gris sous catégories élément p alt texte http://lh5.ggpht.com/_rNlSpSUBkYo/ TF08H2tAA8I / AAAAAAAAAF4 / VH5Wo46HCgg / chat-777px.jpg

Ici, il est dans une fenêtre de 731px. Ici, nous pouvons voir le violet élément ul dans l'orange #main DIV tombe également en dessous des catégories principales élément p . alt texte http://lh3.ggpht.com/_rNlSpSUBkYo/ TF08IUMAXRI / AAAAAAAAAF8 / pqmPpOgVv_Y / chat-731px.jpg

Ici, il est dans une fenêtre de 721px. Enfin, nous pouvons voir que le li éléments commencent à descendre un niveau que le jaune #sub DIV minimzes encore plus.

La solution I Seek

Maintenant, je voudrais vous montrer les résultats que je suis après des maquettes que je construisais dans Photoshop.

Ici, nous pouvons voir le gris p élément contenant le texte principal Catégories et sous catégories sont maintenant à la pleine hauteur de leur #main et #sub contenant. DIVs Aussi et surtout, nous pouvons voir que l'ensemble ul élément ne tombe en dessous du gris p élément . alt texte http://lh3.ggpht.com/ _rNlSpSUBkYo / TF08LBmFWnI / AAAAAAAAAGM / WLQx_wVsSQw / chat correct-777px.jpg

Et enfin, nous pouvons voir #main DIVs violet ul élément minimiser propely comme #sub DIVs violet ul élément a fait dans la capture d'écran ci-dessus. alt texte http://lh6.ggpht.com/ _rNlSpSUBkYo / TF08L0F5OoI / AAAAAAAAAGQ / isdjLp6m_rs / chat correct-731px.jpg

images en taille réelle des images ici peut être vu à mon album Picasa

Toutes les idées sur la façon de résoudre ce problème?

Était-ce utile?

La solution 2

Qu'est-ce que je devais faire était d'ajouter display: table; à l'élément ul et se débarrasser de float:left. Maintenant, il réduit au minimum que je voudrais dans Firefox, Chrome, IE, Opera et Safa Voici le lien vers la nouvelle code mis à jour

Autres conseils

Je n'ai pas le temps de finir cela, mais après avoir travaillé là-dessus c'est ce que je suis: (Affichage ici cause de la fonction d'économie ne semble pas au travail). 

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

Le problème est l'ensemble de la hauteur sur le conteneur du texte + ul, il doit être défini pour le p-élément (je l'ai changé div Je pense, ne peut pas se rappeler pourquoi) pour hériter la hauteur de 100%.

espère que ce genre d'aide si je sais que ce n'est pas la solution entière.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top