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

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

Вопрос

Моя проблема

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

Живой пример Меню находится здесь.
Живой пример код расположен здесь.

Вот меню категории в полноразмерном окне. Обратите внимание на основные категории и подпункты серые п Divs не на максимальной высоте, даже если я установил свой рост до 100%. Оранжевые и желтые девцы называются #главный и #sub.. Отказ Фиолетовый Div - это ул элемент и слегка цветные блоки с текстом в них являются лита элементы.Alt Text http://lh3.ggpht.com/_rnlspsubkyo/tf08fsfra4i/aaaaaaaaafw/hzm7flu032a/cat-full-size.jpg.

Здесь он находится в широком окне 861PX. Без изменений...Text Text http://lh3.ggpht.com/_rnlspsubkyo/tf08gyxmmhi/aaaaaaaaf0/nfpr-pv3ef4/cat-861px.jpg.

Вот это в окне 777 пикселей. Здесь вы можете увидеть весь фиолетовый ул элемент в желтом #sub. Div просто падает ниже серых подпунктов п элементAlt Text http://lh5.ggpht.com/_rnlspsubkyo/tf08h2taa8i/aaaaaaaaaf4/vh5wo46hcgg/cat-777px.jpg.

Здесь он находится в окне 731Пкс. Здесь мы можем увидеть фиолетовый ул элемент в оранжевом #главный Div также падает ниже основных категорий п элемент.Alt Text http://lh3.ggpht.com/_rnlspsubkyo/tf08iumaxri/aaaaaaaaaf8/pqmppogvv_y/cat-731px.jpg.

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

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

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

Здесь мы можем увидеть серый п элемент, содержащий текстовые основные категории и подпункты, теперь на полной высоте их #главный и #sub. содержащие Divs. Также и что более важно, мы видим, что весь ул Элемент больше не падает ниже серого п элемент.Text Text http://lh3.ggpht.com/_rnlspsubkyo/tf08lbmfwni/aaaaaaaagm/wlqx_wvssqw/cat-correct-777px.jpg.

И, наконец, мы можем видеть #главный Диверс фиолетовый ул элемент минимизировать чрезвычайно просто как #sub. Диверс фиолетовый ул Элемент сделал на экране выстрел выше.Alt Text http://lh6.ggpht.com/_rnlspsubkyo/tf08l0f5ooi/aaaaaaaagq/isdjlp6m_rs/cat-correct-731px.jpg.

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

Любые идеи о том, как это исправить?

Это было полезно?

Решение 2

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

Другие советы

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top