كيف يمكنني أن أجعل CSS/HTML القائمة فئة تقليل بأمان عندما يقوم المستخدم يقلل من إطار المستعرض ؟

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

سؤال

مشكلتي

عند تصغير نافذة المتصفح الفئة القائمة لا تقلل الطريقة أود أن.أود لى عناصر قطرة واحدة دون الأخرى لى العناصر النافذة إلى الحد الأدنى.المشكلة هي أن كل ul عنصر انخفض p العنصر.

مثال حي من القائمة الموجودة هنا.
الحية على سبيل المثال رمز يقع هنا.

هنا هي الفئة القائمة في كامل حجم النافذة.إشعار الفئات الرئيسية والفئات الفرعية الرمادي p DIVS ليست في أقصى ارتفاع على الرغم من أنني قد وضعت الارتفاع إلى 100%.البرتقالي والأصفر DIVs تسمى #الرئيسية و #sub.الأرجواني هو DIV ul العنصر طفيفة القطع الملونة مع النص في هذه لى عناصر.النص البديل 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 النافذة.هنا يمكنك أن ترى كامل الأرجواني ul عنصر في الأصفر #sub DIV فقط قطرات أدناه الرمادي الفئات الفرعية p عنصر النص البديل http://lh5.ggpht.com/_rNlSpSUBkYo/TF08H2tAA8I/AAAAAAAAAF4/VH5Wo46HCgg/cat-777px.jpg

ومن هنا في 731px النافذة.هنا يمكننا أن نرى الأرجواني ul عنصر في البرتقال #الرئيسية DIV أيضا قطرات أدناه الفئات الرئيسية p العنصر.النص البديل http://lh3.ggpht.com/_rNlSpSUBkYo/TF08IUMAXRI/AAAAAAAAAF8/pqmPpOgVv_Y/cat-731px.jpg

ومن هنا في 721px النافذة.أخيرا يمكننا أن نرى أن لى تبدأ عناصر إلى القائمة المنسدلة مستوى الأصفر #sub DIV minimzes حتى أكثر من ذلك.

الحل أعوذ

الآن أود أن تظهر لك النتائج أنا بعد مع النموذجين لقد شيدت في برنامج فوتوشوب.

هنا يمكننا أن نرى الرمادي p العنصر الذي يحتوي على النص الفئات الرئيسية والفئات الفرعية هي الآن في ارتفاع كامل من #الرئيسية و #sub تحتوي DIVs.أيضا والأهم من ذلك, يمكننا أن نرى أن بأكمله ul العنصر لم يعد قطرات أدناه الرمادي p العنصر.النص البديل http://lh3.ggpht.com/_rNlSpSUBkYo/TF08LBmFWnI/AAAAAAAAAGM/WLQx_wVsSQw/cat-correct-777px.jpg

و أخيرا يمكننا أن نرى #الرئيسية DIVs الأرجواني ul عنصر تقليل propely فقط #sub DIVs الأرجواني ul عنصر في لقطة الشاشة أعلاه.النص البديل http://lh6.ggpht.com/_rNlSpSUBkYo/TF08L0F5OoI/AAAAAAAAAGQ/isdjLp6m_rs/cat-correct-731px.jpg

الصور بالحجم الكامل من الصور هنا يمكن أن ينظر إليه في بلدي Picassa الألبوم

أي أفكار حول كيفية حل هذه المشكلة ؟

هل كانت مفيدة؟

المحلول 2

ما كان علي القيام به هو إضافة display: table; إلى ul عنصر والتخلص من float:left.الآن فإنه يقلل كما أود عبر فايرفوكس, كروم, IE, Opera و الصفا هنا رابط تحديث جديد المدونة

نصائح أخرى

أنا لم يكن لديك الوقت لإنهاء هذا ولكن بعد العمل على ذلك هذا ما لدي:(نشر هنا يؤدي وظيفة حفظ لا يبدو أن العمل).

<!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-عنصر(غيرته إلى شعبة أعتقد, لا أتذكر لماذا)أن ترث 100% ارتفاع.

نأمل أن يكون هذا النوع من يساعد على الرغم من أنني أعرف أن هذا ليس حل كامل.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top