Forum PHP.pl > [HTML][CSS] "Prześwitujący" div

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] "Prześwitujący" div

Dawid Marshal

20.03.2012, 14:52:13

Interesuje mnie wykonanie diva w którym znajdą się dwa kolejne, leżące na sobie.

Zawartość w jednym z nich (położonym wyżej) moze sie pojawić lub nie - jest to zależne skryptu JS

W przypadku gdyby zawartosc nie zostala zwrocona chcialbym aby uzytkownik zobaczyl zawartosc diva polozonego nizej.

Moj kod:

[HTML] pobierz, plaintext 
<html>
 
    <head>
 
        <style type="text/css">
 
            .div1{
                width:100px;
                height:100px;}
            .div2{
                position:absolute;
                width:100px;
                height:100px;
                z-index:1000;
                background-color:transparent
            }
            .div3{
                position:absolute;
                width:100px;
                height:100px;
                z-index:900}
 
        </style>
 
    </head>
 
    <body>
 
        <div class="div1">
 
            <div class="div2">
                //zawartosc, ktora moze byc a moze jej nie byc
            </div>
 
            <div class="div3">
                //zawartosc "tłowa"
            </div>
 
        </div>
 
    </body>
 
</html>
[HTML] pobierz, plaintext

Kod ten wykonuje zadanie, ale jezeli w zawartosci diva nizszego znajdzie sie np tekst to nie moze on zostac zaznaczony przez uzytkownika - jest on "zablokowany", przykryty pustym tlem tego pierwszego.

Jak moze sprawic aby tekst w nizszym divie mogl byc zaznaczalny?

Bardzo zalezy mi na rozwiazaniu tego za pomoca HTML i CSS, a nie JS (sprawdzenie czy zawartosc=='', then display:none)

Damonsson

20.03.2012, 17:30:59

To nadaj temu DIVovi na wyższej warstwie height: auto, i wtedy będzie widoczny tylko wtedy gdy będzie w nim jakiś tekst, a nie zawsze 100px.

Dawid Marshal

20.03.2012, 21:29:37

Rozwiązanie zdaje się nie działać na najnowszym IE

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.