Как сделать, чтобы мое меню категорий CSS / HTML изящно свернулось, когда пользователь свернул окно браузера? - PullRequest
Новая
       8

Как сделать, чтобы мое меню категорий CSS / HTML изящно свернулось, когда пользователь свернул окно браузера?

0 голосов
/ 07 августа 2010

Моя проблема

Когда я минимизирую окно браузера, меню категорий не минимизирует, как я бы этого хотел. Я бы хотел, чтобы элементы li сбрасывались один за другим ниже других элементов li , так как окно свернуто. Проблема в том, что весь элемент ul опущен ниже элемента p .

Живой пример меню находится здесь .
Код действующего примера находится здесь.

Вот меню категорий в полноразмерном окне. Обратите внимание, что основные категории и подкатегории серого цвета p DIVS не на максимальной высоте, хотя я установил их высоту на 100%. Оранжевые и желтые DIV называются # main и # sub . Фиолетовый DIV - это элемент ul , а светлоокрашенные блоки с текстом в них - элементы li . альтернативный текст http://lh3.ggpht.com/_rNlSpSUBkYo/TF08FsFrA4I/AAAAAAAAAFw/hZm7flu032A/cat-full-size.jpg

Вот оно в окне шириной 861 пикселя. Без изменений... альтернативный текст http://lh3.ggpht.com/_rNlSpSUBkYo/TF08GYxMMhI/AAAAAAAAAF0/nFpr-pV3eF4/cat-861px.jpg

Вот оно в окне размером 777 пикселей. Здесь вы можете увидеть весь фиолетовый ul элемент в желтом # sub DIV чуть ниже серого элемента Sub Categories p альтернативный текст http://lh5.ggpht.com/_rNlSpSUBkYo/TF08H2tAA8I/AAAAAAAAAF4/VH5Wo46HCgg/cat-777px.jpg

Вот оно в окне размером 731 пикселей. Здесь мы видим фиолетовый ul элемент в оранжевом # main DIV, также опускающийся ниже элемента Main Categories p . альтернативный текст http://lh3.ggpht.com/_rNlSpSUBkYo/TF08IUMAXRI/AAAAAAAAAF8/pqmPpOgVv_Y/cat-731px.jpg

Вот оно в окне 721px. Наконец, мы видим, что элементы li начинают опускаться на уровень, так как желтый # sub DIV минимизирует еще больше.

Решение, которое я ищу

Теперь я хотел бы показать вам результаты с макетами, которые я создал в Photoshop.

Здесь мы видим серый элемент p , содержащий текст «Основные категории» и «Подкатегории» теперь на полной высоте их # main и # sub содержащие DIVs. Также, что более важно, мы видим, что весь элемент ul больше не опускается ниже серого элемента p . альтернативный текст http://lh3.ggpht.com/_rNlSpSUBkYo/TF08LBmFWnI/AAAAAAAAAGM/WLQx_wVsSQw/cat-correct-777px.jpg

И, наконец, мы можем видеть # main DIVs фиолетовый ul элемент минимизации просто так же, как # sub DIVs purple ul элемент сделал на скриншоте выше. альтернативный текст http://lh6.ggpht.com/_rNlSpSUBkYo/TF08L0F5OoI/AAAAAAAAAGQ/isdjLp6m_rs/cat-correct-731px.jpg

Полноразмерные изображения здесь можно увидеть в моем альбоме Picassa

Есть идеи как это исправить?

Ответы [ 2 ]

0 голосов
/ 08 августа 2010

Мне нужно было добавить display: table; к элементу ul и избавиться от float:left.Теперь он сворачивается так, как хотелось бы для Firefox, Chrome, IE, Opera и Safa. Вот ссылка на новый обновленный код

0 голосов
/ 07 августа 2010

У меня нет времени, чтобы закончить это, но после работы над этим вот что я получил: (Размещение здесь, потому что функция сохранения не работает). 

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

Проблема ввысота, установленная для контейнера текста + ul, должна быть установлена ​​для p-элемента (я изменил его на div, я думаю, не могу вспомнить почему), чтобы наследовать высоту 100%.

Надеюсь, что это поможет, хотя я знаю, что это еще не все решение.

...