SORU
17 Mayıs 2010, PAZARTESİ

Div kaplama sayfasında (görünüm penceresi) TÜM yapmak?

Oldukça yaygın olduğunu düşündüğüm bir sorun var ama henüz iyi bir çözüm bulamadım. Bir kaplama div sayfanın TAMAMINI... sadece görüş kapak yapmak istiyorum. Bu kadar zor olduğunu anlamıyorum... 100% vb vücut, html yükseklik ayarı denedim ama işe yaramıyor. Şu ana kadar öğrendiklerimi burada

<html>
<head>
    <style type="text/css">
    .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
    body { height: 100%; }
    html { height: 100%; }
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; position: relative;">
        <div style="height: 100px; width: 300px; background-color: Red;">
        </div>
        <div style="height: 230px; width: 9000px; background-color: Green;">
        </div>
        <div style="height: 900px; width: 200px; background-color: Blue;"></div>
        <div class="OverLay">TestTest!</div>
    </div>


    </body>
</html>

Ayrıca eğer varsa JavaScript çözümü için daha açık olmak isterdim, ama çok değil sadece bazı basit CSS kullanarak olurum.

CEVAP
17 Mayıs 2010, PAZARTESİ

Görünüm çok önemli ama muhtemelen tüm web kaydırma bile olsa karanlık kalmak istiyorum. Bunun için, position:absolute yerine position:fixed kullanmak istediğiniz. Sabit eleman kaydırırken ekranda statik, tüm vücudu karanlık olduğu izlenimini vermeye devam edecek.

Örnek: http://jsbin.com/okabo3/edit

div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}

<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
HtmlCss

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Goran Dimov

    Goran Dimov

    1 HAZİRAN 2014
  • OnlyFunClips

    OnlyFunClips

    16 ŞUBAT 2012
  • sghaff1

    sghaff1

    23 Mart 2009

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR