css kutu gölge bir div kapsayıcısında kesilmiş

Question

düzenleme: daha fazla genel soru: Ben kutu-shadow'd div altında bir div yerleştirir, ancak gölgenin alt kısmında bir div yerleştirin z-endeksleriyle uğraşmaya rağmen üst üste gelmez. Yani kutu gölgesi başka bir div'u kapatamaz gibi mi görünüyor? Herhangi bir fikir harika olurdu!

özgün soru- Düzeni için blueprint kullanıyorum. Bu demektir kinumaralı bir .Connerer daha sonra #content içerir.

Bu durumda #content tüm kabı doldurur, bu nedenle 950px da olur.

#content üzerinde bir alt gölge olmasını istiyorum, ancak sorun, .container'da görünecek boş alan kalmadığından gölgenin kesilmesidir.

Bir geçici çözüm, #content genişliğini azaltmak olabilir, ancak bu zaten sahip olduğum yerleşim konumlarını bozuyor ve çok dar görünüyor.

Ebeveyn kabını görmezden gelmek ve üzerinde görünmek için kutu gölgesini almanın bir yolu var mı? Bu sanırım özel bir plan değil, ama bu bağlam. Teşekkürler!

DÜZENLEME:

body .container { 
    margin: 0 auto; 
    overflow: hidden; 
    width: 950px; 
} 
body .container:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 
#content { 
    display: inline; 
    float: left; 
    margin-right: 0; 
    width: 950px; 
    box-shadow: 0 0 4px black; 
    -moz-box-shadow: 0 0 4px black; 
} 

#content.container içinde yer almaktadır. #content'a bir gölge düşürürsem, iç elemanlarla karışan genişliği küçültene kadar göremezsiniz.

Answer 1

.container öğesine bir miktar dolgu ekler ve #content ürününüzün gereksinim duyduğunuz genişlikte kalmasını sağlarım.

Answer 2

.container'ı daha geniş (960'ı sabit genişlik için mükemmel kabul edilebilir) yapabilir ve #content'i .container'ın içinde ortalayabilirsiniz. Bu senin için her şeyi mahvediyor mu?

Answer 3

Zaten üzerinde net düzeltme kullandığınızdan, .container üzerinde overflow: hidden'a ihtiyacınız yoktur. Yani, sadece atmayı başarabilirsiniz: http://jsfiddle.net/kizu/gDXLf/

Answer 4

Her şey, elde etmeye çalıştığınız şeye bağlıdır.

Satır içi bir liste öğeleri grubuyla ilgili sorun yaşıyorum. Sağ gölge vurgulu üzerine yanındaki liste öğesinin tarafından kesildi

Basit kesmek sadece öğesine aşağıdaki eklemektir: Her ne kadar

li:hover { 
    transform: scale(1,1); 
    -moz-transform: scale(1,1); 
    -webkit-transform: scale(1,1); 
    -o-transform: scale(1,1); 
    -ms-transform: scale(1,1); 
} 

WORKING EXAMPLE

, bu sadece belirli senaryolar için çalışabilir. Yukarıdaki örnekte sadece test ettim.