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:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • amc

    amc

    21 EYLÜL 2005
  • MrChiCity3

    MrChiCity3

    14 NİSAN 2008
  • RayperEnglishKnight

    RayperEnglis

    24 Kasım 2008