How do I make my CSS/HTML category menu minimize gracefully when a user minimizes the browser window?

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

문제

My Problem

When I minimize the browser window the category menu does not minimize the way I would like it to. I would like the li elements to drop one by one below the other other li elements as the window is minimized. The problem is that the whole ul element is dropped below the p element.

A live example of the menu is located here.
The live example's code is located here.

Here is the category menu in a full size window. Notice the Main Categories and Sub Categories gray p DIVS are not at max-height even though I have set their height to 100%. The orange and yellow DIVs are called #main and #sub. The purple DIV is the ul element and the lightly colored blocks with text in them are the li elements. alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08FsFrA4I/AAAAAAAAAFw/hZm7flu032A/cat-full-size.jpg

Here it is in a 861px wide window. No change... alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08GYxMMhI/AAAAAAAAAF0/nFpr-pV3eF4/cat-861px.jpg

Here it is in a 777px window. Here you can see the entire purple ul element in the yellow #sub DIV just drops below the gray Sub Categories p element alt text http://lh5.ggpht.com/_rNlSpSUBkYo/TF08H2tAA8I/AAAAAAAAAF4/VH5Wo46HCgg/cat-777px.jpg

Here it is in a 731px window. Here we can see the purple ul element in the orange #main DIV also drops below the Main Categories p element. alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08IUMAXRI/AAAAAAAAAF8/pqmPpOgVv_Y/cat-731px.jpg

Here it is in a 721px window. Finally we can see that the li elements begin to drop down a level as the yellow #sub DIV minimzes even more.

The Solution I Seek

Now I would like to show you the results I am after with mock ups I constructed in Photoshop.

Here we can see the gray p element containing the text Main Categories and Sub Categories are now at the full height of their #main and #sub containing DIVs. Also and more importantly, we can see that the entire ul element no longer drops below the gray p element. alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08LBmFWnI/AAAAAAAAAGM/WLQx_wVsSQw/cat-correct-777px.jpg

And finally we can see #main DIVs purple ul element minimize propely just as the #sub DIVs purple ul element did in the screen shot above. alt text http://lh6.ggpht.com/_rNlSpSUBkYo/TF08L0F5OoI/AAAAAAAAAGQ/isdjLp6m_rs/cat-correct-731px.jpg

Full size images of the images here can be seen at my Picassa album

Any ideas on how to fix this?

도움이 되었습니까?

해결책 2

What I had to do was to add display: table; to the ul element and get rid of float:left. Now it minimizes as I would like across Firefox, Chrome, IE, Opera and Safa Here is the link to the new updated code

다른 팁

I haven't got the time to finish this but after working on it this is what I got: (Posting here cause the save function didn't seem to work).

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

Problem is the height set on the container of the text + ul, it has to be set for the p-element(I changed it to div I think, can't remember why)to inherit the 100% height.

Hope this kind of helps though I know this isn't the entire solution.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top