0

私の問題

ブラウザ ウィンドウを最小化すると、カテゴリ メニューが希望どおりに最小化されません。ウィンドウが最小化されているときに、li要素を他の li 要素の下に 1 つずつドロップしたいと思います。問題は、 ul要素全体がp要素の下にドロップされることです。

メニューの実例はこちらにあります。
実際の例のコードはここにあります。

フルサイズのウィンドウのカテゴリ メニューです。メイン カテゴリとサブ カテゴリの灰色のp DIVS は、高さを 100% に設定したにもかかわらず、最大高さに達していないことに注意してください。オレンジと黄色の DIV は#mainと#subと呼ばれます。紫の DIV はul要素で、テキストが入った明るい色のブロックはli要素です。 代替テキスト http://lh3.ggpht.com/_rNlSpSUBkYo/TF08FsFrA4I/AAAAAAAAAFw/hZm7flu032A/cat-full-size.jpg

これは 861px 幅のウィンドウです。変更なし... 代替テキスト http://lh3.ggpht.com/_rNlSpSUBkYo/TF08GYxMMhI/AAAAAAAAAF0/nFpr-pV3eF4/cat-861px.jpg

これは 777px のウィンドウです。ここでは、黄色の#sub DIV 内の紫色のul要素全体が、灰色の Sub Categories p要素 のalt テキストの下にあることがわかります

これは 731px のウィンドウです。ここでは、オレンジ色の#main DIV 内の紫色のul要素も、メイン カテゴリのp要素の下にあることがわかります。 代替テキスト http://lh3.ggpht.com/_rNlSpSUBkYo/TF08IUMAXRI/AAAAAAAAAF8/pqmPpOgVv_Y/cat-731px.jpg

これは 721px のウィンドウです。最後に、黄色の#sub DIV がさらに 最小化されるにつれて、 li要素がレベルを下げ始めることがわかります。

私が求める解決策

ここで、Photoshop で作成したモックアップの結果をお見せしたいと思います。

ここでは、メイン カテゴリとサブ カテゴリのテキストを含む灰色のp要素が、DIV を含む#mainと#subの高さいっぱいになっていることがわかります。また、さらに重要なことに、ul要素全体が灰色のp要素を下回っていないことがわかります。 代替テキスト http://lh3.ggpht.com/_rNlSpSUBkYo/TF08LBmFWnI/AAAAAAAAAGM/WLQx_wVsSQw/cat-correct-777px.jpg

そして最後に、上のスクリーン ショットで #sub DIVs の紫の ul 要素が行った ように、# main DIVs の紫のul要素が適切に最小化されていることがわかります。代替テキスト http://lh6.ggpht.com/_rNlSpSUBkYo/TF08L0F5OoI/AAAAAAAAAGQ/isdjLp6m_rs/cat-correct-731px.jpg

ここにある画像のフル サイズの画像は、私のPicassa アルバムで見ることができます

これを修正する方法についてのアイデアはありますか?

4

2 に答える 2

0

私がしなければならなかったのはdisplay: table;、要素に追加して、ulを取り除くことでしfloat:leftた。これで、Firefox、Chrome、IE、Opera、Safa全体で必要に応じて最小化されます。これが新しい更新されたコードへのリンクです。

于 2010-08-08T08:23:48.093 に答える
0

これを完了する時間はありませんが、作業した後、これが得られました: (ここに投稿すると、保存機能が機能していないように見えます)。

<!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 のコンテナーに設定された高さです。100% の高さを継承するには、p 要素 (div に変更したと思いますが、理由を思い出せません) に設定する必要があります。

これが完全な解決策ではないことはわかっていますが、この種の助けになることを願っています。

于 2010-08-07T12:38:25.287 に答える