تظهر صور الخلفية DIV ، لكن لون الخلفية لا

Question

أواجه مشكلة بسيطة CSS.

لديّ سلسلة من divs ذات الطبقات وقمت بتعيين أنماط فئة Div وكلها تظهر (حشو ، ألوان الخط ، إلخ). ومع ذلك ، فإن لون الخلفية لن يعمل مع DIVs المتراكمة.

كاختبار ، حاولت وضع أساليب حدودية وحدودية ، وقد عملوا جميعًا أيضًا ، باستثناء اللون الحدودي ، ولم يظهر ولم يظل الحدود بتصميم إضافي أسود.

كل DIV لديه معرف فريد ، والمعرف الذي لا يعمل فيه لون الخلفية متداخل (جنبًا إلى جنب) في حاوية Div. لقد كنت أحاول أن أفهم ما إذا كانت DIVs المتداخلة تأخذ لون خلفية Divs ، لكنني حاولت تغيير الفائض من الوالد ، ولم يكن له أي تأثير.

كعمل حول ، قمت بإنشاء 1 × 1 بكسل JPG من لون الخلفية الصحيح وضبط صورة خلفية DIVS ، التي نجحت. لكنه اختراق ، وأنا لست أفضل حالًا من معرفة سبب عمل جميع عناصر الأناقة ، باستثناء لون الخلفية.

آمل أن أكون قد شرحت وضعي بشكل كافٍ ، إذا كان بإمكان أي شخص مساعدتي ، فسأقدر ذلك.

(أيضًا ، كإضافة ، أستخدم Dreamweaver لكتابة الكود وتظهر ألوان الخلفية في وضع المعاينة ، ولكن لا تظهر في Firefox أو Chrome أو IE)

الرمز المطلوب:

      <div id="longBox">
        <div id="specialLable"> Rent Specials &amp; promotions</div><!--end specialLable-->
        <div id="promoMain"> 
        <div id="proHeader">Alhambra Village Fall Special:</div><!--end proHeader-->
        <div id="proDate">Expires: Date</div><!--end proDate-->
        <div id="clear"></div>
        <div id="protext">This is where the details go</div><!--end protext-->
        <div id="promoConditions"><br />Limited availability. All promotions subject to change. Not good with other offers or promotions unless specified.</div><!--end promoConditions-->
        <div id="proContact">Request an Appointment</div><!--end proContact-->
        </div><!--end specialLable-->
      </div><!--end longBox-->

#longBox{
width:713px;
height:225px;
background-color:#FFFFFF;
float:left;
margin:1.2em 0 0 .7em;
}

#specialLable{
background-image:url(../images/01titleBar.png);
margin: .5em .5em .5em .5em;
width:689px;
height:30px;
font-size:1.2em;
font-weight:bold;
text-transform:uppercase;
color:#667b90;
padding:3px 0 0 6px;
}


#promoMain{
margin: 0 .5em .5em .6em;
background-color:#ced5da;
height:166px
}

#proHeader{
font-size:11px;
text-align:left;
font-weight:bold;
text-transform:uppercase;
color:#CC6666;
float:left;
padding:.3em .6em .3em .6em;
margin:.6em 0 0 .6em;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
width:503px;
}
#proDate{
font-size:11px;
text-align:left;
font-weight:bold;
text-transform:uppercase;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
color:#CC6666;
float:right;
width:150px;
padding:.3em .6em .3em .6em;
margin:.6em .6em .6em 0;
}

#protext{
font-size:11px;
text-align:left;
margin:0 .6em 0 .6em;
height:80px;
background:ffffff;
padding:0 0 0 .6em;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
}

#promoConditions{
font-size:9px;
text-align:left;
line-height:100%;
float:left;
padding:0 .6em 0 .6em;
margin:.6em 0 0 .6em;
width:503px;
}

#proContact{
font-size:11px;
text-align:left;
font-weight:bold;
text-transform:uppercase;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
color:#CC6666;
float:right;
width:150px;
padding:.3em .6em .3em .6em;
margin:.6em .6em 0 0;
}

Answer 1

السبب في أن الصور تعمل هو أنها attribs جديدة محددة للطفل. لم يكن لدى الوالدين أي IMG لـ BG ، لذا فإن استخدام اختراق PXEL الملون 1x1 سيعمل بالتأكيد مع خروجك من بنية الميراث. على أي حال:

حاول القيام بما يلي:

     #longBox{
        width:713px;
        height:225px;
        background-color:#FFFFFF;
        float:left;
        margin:1.2em 0 0 .7em;
        }

    div#specialLable{
    background-image:url(../images/01titleBar.png);
    margin: .5em .5em .5em .5em;
    width:689px;
    height:30px;
    font-size:1.2em;
    font-weight:bold;
    text-transform:uppercase;
    color:#667b90;
    padding:3px 0 0 6px;
    }


    div#promoMain{
    margin: 0 .5em .5em .6em;
    background-color:#ced5da;
    height:166px
    }

    div#proHeader{
    font-size:11px;
    text-align:left;
    font-weight:bold;
    text-transform:uppercase;
    color:#CC6666;
    float:left;
    padding:.3em .6em .3em .6em;
    margin:.6em 0 0 .6em;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    width:503px;
    }

div#proDate{
    font-size:11px;
    text-align:left;
    font-weight:bold;
    text-transform:uppercase;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    color:#CC6666;
    float:right;
    width:150px;
    padding:.3em .6em .3em .6em;
    margin:.6em .6em .6em 0;
    }

div#protext{
    font-size:11px;
    text-align:left;
    margin:0 .6em 0 .6em;
    height:80px;
    background: #ffffff;
    padding:0 0 0 .6em;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    }

    div#promoConditions{
    font-size:9px;
    text-align:left;
    line-height:100%;
    float:left;
    padding:0 .6em 0 .6em;
    margin:.6em 0 0 .6em;
    width:503px;
    }

    div#proContact{
    font-size:11px;
    text-align:left;
    font-weight:bold;
    text-transform:uppercase;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    color:#CC6666;
    float:right;
    width:150px;
    padding:.3em .6em .3em .6em;
    margin:.6em .6em 0 0;
    }

Answer 2

هل لديك مكون إضافي مثل Firebug؟ يمكن أن يساعد ذلك كثيرًا في إظهار أي قواعد قد تكون فوق لون الخلفية.

أيضا ، تأكد من تضمين # قبل أرقام ألوان السداسي. (على سبيل المثال: #ffffff)

... يبدو أنك تستخدم المعرف لتحديد CSS ، وهو الأكثر تحديداً ، بحيث لا يمكن تجاوزه إلا: 1) محدد معرف آخر في CSS ، أو 2) محدد في أي مكان في CSS مع كل من معرف واسم فئة أو علامة ، مما يزيد من خصوصيته. ((جعلت خصوصية CSS بسيطة هنا)

Answer 3

تحقق من الاستهداف الخاص بك ... في بعض الأحيان لا تكون التعليمات الصريحة إلى فئة أو معرف غير كافية عندما يرث سمات الوالدين.

مثل ، تحديد:

#yourid {background-color: #333;}

قد لا يكون كافياً إذا كان لدى الوالدين خلافًا محددًا.

قد تحتاج إلى القيام بعنصر.

div#yourid {background-color: #333;}

امسك الانجراف الخاص بي؟

تعديل:

نعم ، أستطيع أن أرى أن الأطفال يرثون من #longBox. من الأفضل لك أن تستهدف كما ذكرت من قبل. وأيضًا ، هناك حاجة إلى التحقق من صحة التجزئة/الجنيه/الجنيه المفقود للتحقق من صحة ، ولكن يجب على معظم المتصفحات أن تفسر CSS المشوه موافق.