पृष्ठभूमि रंग काम कर रहा है नहीं

Question

इम पूरे ब्लॉक c_date के लिए पृष्ठभूमि रंग लागू करने के लिए कोशिश कर रहा है .. लेकिन इसकी काम नहीं कर रहा है .. मैं स्पष्ट करने की कोशिश की, सब कुछ ब्लॉक ..

Demo

HTML:

<div class="c_date"> <span class="c_day">30</span> 
<span class="c_month">Jun</span> 
<span class="c_year">2009</span> 
    <div style="clear:both;"></div>  
</div> 

सीएसएस:

.c_date { 
    position: relative; 
    width: 40px; 
    color: #999; 
    margin: -0px 0 0 0; 
    background:#999 !important; 
    display:block; 
    border:1px solid #ccc; 
    clear:both; 
} 
.c_day, .c_month, .c_year { 
    position: absolute; 
} 
.c_day { 
    font-size: 14px; 
    top: 10px; 
} 
.c_month { 
    top: 0; 
    left: 0; 
    font-size: 11px; 
} 
.c_year { 
    top: 9px; 
    right: 0; 
    font-size: 9px; 
    rotation: -90deg !important; 
    /* ** Hacks ** */ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
} 

Answer 1

.c_date { 
    position: relative; 
    width: 40px; 
    color: #999; 
    margin: -0px 0 0 0; 
    background-color: #999 !important; 
    display:block; 
    border:1px solid #ccc; 
    clear:both; 
    height: 30px; //change to your needs 

} 

Answer 2

ऐसा इसलिए है क्योंकि आपकी c_date div ऊंचाई 2px है (कारण स्थिति है: पूर्ण; आपके अन्य कंटेनरों में)। तो तुम यह शैली c_date को ऊंचाई जोड़ कर या उसे में चाइल्ड तत्वों की स्थिति संपत्ति को बदल कर ठीक कर सकते हैं।

Answer 3

यह वास्तव में position:absolute दिन और महीना फैला की आवश्यकता के बिना किया जा सकता है। इसका मतलब यह होगा कि आपके c_date तत्व की ऊंचाई वास्तव में स्टैक्ड दिन और महीने के तत्वों की ऊंचाई से संबंधित है।

मैं सीएसएस कोड के कुछ ऊपर फिक्सिंग की स्वतंत्रता वह भी अपने प्रदर्शन :)

एचटीएमएल

<div class="c_date"> 
    <span class="c_month">Jun</span><br /> 
    <span class="c_day">30</span> 
    <span class="c_year">2009</span> 
</div> 

सीएसएस से वहाँ होने की जरूरत नहीं था ले लिया

.c_date { 
    position: relative; 
    width: 40px; 
    color: #999; 
    margin: 0 0 0 0; 
    background:#00F !important; 
    display:block; 
    border:1px solid #ccc; 
    font-size:0; /* set to 0 so that <br/> and spaces between <span> dont effect height/spacing */ 
} 
.c_year { 
    position: absolute; 
} 
.c_day { 
    font-size: 14px; 
    display: inline-block; 
    line-height: 11px; 
    padding-bottom: 2px; 
    text-align:center; 
} 
.c_month { 
    font-size: 11px; 
    display: inline-block; 
    line-height: 14px; 
    text-align:center; 
} 
.c_year { 
    top: 9px; 
    right: 0; 
    font-size: 9px; 
    /* ** Hacks ** */ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
} 

DEMO