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

  • Kai Moosmann

    Kai Moosmann

    5 Temmuz 2006
  • listedabive

    listedabive

    30 Ocak 2007
  • PhoneArena

    PhoneArena

    7 NİSAN 2006

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR