Wie kann ich meine CSS / HTML-Kategorie-Menü vornehmen anmutig minimieren, wenn ein Benutzer das Browser-Fenster minimiert?

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

Frage

Mein Problem

Wenn ich das Browser-Fenster minimieren die Kategorienavigation den Weg nicht minimieren ich es möchte. Ich möchte die li Elemente eines nach dem anderen unter den anderen anderen li Elemente fallen, wenn das Fenster minimiert wird. Das Problem ist, dass das ganze ul Element ist unter dem p gesunken Elemente.

Ein anschauliches Beispiel des Menü befindet sich hier .
Die Live-Beispiel Code befindet sich hier.

Hier ist das Kategorie-Menü in einem großen Fenster. Beachten Sie die Hauptkategorien und Unterkategorien grau p DIVS sind nicht auf max-height obwohl ich ihre Höhe auf 100% festgelegt haben. Die orange und gelb DIVs sind genannt #main und #sub . Die lila DIV ist die ul Element und die leicht mit Text farbigen Blöcken in ihnen sind die li Elemente. alt text http://lh3.ggpht.com/ _rNlSpSUBkYo / TF08FsFrA4I / AAAAAAAAAFw / hZm7flu032A / cat-full-size.jpg

Hier ist es in einem 861px breiten Fenster. Keine Änderung... alt text http://lh3.ggpht.com/ _rNlSpSUBkYo / TF08GYxMMhI / AAAAAAAAAF0 / nFpr-pV3eF4 / cat-861px.jpg

Hier ist es in einem 777px Fenster. Hier können Sie sehen, die ganzen lila ul Element in dem gelben #sub DIV fällt knapp unter dem grauen Unter Kategorien p Element alt text http://lh5.ggpht.com/_rNlSpSUBkYo/ TF08H2tAA8I / AAAAAAAAAF4 / VH5Wo46HCgg / cat-777px.jpg

Hier ist es in einem 731px Fenster. Hier können wir die lila ul in der Orange siehe #main DIV fällt auch unter den Hauptkategorien p Element. alt text http://lh3.ggpht.com/_rNlSpSUBkYo/ TF08IUMAXRI / AAAAAAAAAF8 / pqmPpOgVv_Y / cat-731px.jpg

Hier ist es in einem 721px Fenster. können wir sehen schließlich, dass die li Elemente beginnen, ein Niveau, wie das gelbe fallen nach unten #sub DIV minimzes noch mehr.

Die Lösung I Seek

Nun möchte Ich mag Ihnen zeigen die Ergebnisse, die ich bin, nachdem sie mit mock ups ich in Photoshop erstellt.

Hier können wir die graue p Element siehe Text Hauptkategorien und Unterkategorien sind jetzt in voller Höhe ihrer #main enthält, und #sub enthält DIVs. Siehe auch und was noch wichtiger ist, können wir, dass die gesamte ul Element nicht mehr fällt unter dem grauen p Element. alt text http://lh3.ggpht.com/ _rNlSpSUBkYo / TF08LBmFWnI / AAAAAAAAAGM / WLQx_wVsSQw / cat-correct-777px.jpg

Und schließlich können wir sehen, #main DIVs lila ul Element minimieren propely ebenso wie die #sub DIVs lila ul Element hat im Screenshot oben. alt text http://lh6.ggpht.com/ _rNlSpSUBkYo / TF08L0F5OoI / AAAAAAAAAGQ / isdjLp6m_rs / cat-correct-731px.jpg

Bilder in voller Größe der Bilder können hier an meinem Picasa-Album

Alle Ideen, wie dieses Problem beheben?

War es hilfreich?

Lösung 2

Was ich tun musste, war display: table; zum ul Elemente hinzufügen und los float:left bekommen. Jetzt minimiert es, wie ich über Firefox, Chrome, IE, Opera und Safa möchte hier der Link zum neuen aktualisierten Code

Andere Tipps

ich habe nicht die Zeit, dies zu beenden, aber nach der Arbeit auf sie dies ist, was ich habe: (Posting hier Ursache die Speicherfunktion nicht zur Arbeit erscheinen). 

<!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 der Höhe Satz auf dem Behälter des Textes + ul ist, ist es für die p-Element eingestellt werden muss (habe ich es div denke, ich kann mich nicht erinnern, warum), um die 100% Höhe zu erben.

Hope diese Art der hilft, wenn ich weiß, dies ist nicht die ganze Lösung.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top