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

  • bashirsultani

    bashirsultan

    22 Mart 2010
  • RaverX DouBle StAg XI

    RaverX DouBl

    23 Mayıs 2008
  • The Amazing Atheist

    The Amazing

    20 Kasım 2006

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR