Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]przyciemnianie diva podrzędnego
Forum PHP.pl > Forum > Przedszkole
jeremiash
10.01.2013, 15:41:14
Cześć. Nakładam na siebie dwa divy - dzieje się to przy wywołaniu jakiejś strony z danymi. Chciałbym, aby div podrzędny z grafiką został przytłumiony np. 80%, a nadrzędny był wyrazisty.

Próbowałem wykorzystać 

[PHP] pobierz, plaintext 
  1. 	 filter:alpha(opacity=70);
  2. 	opacity: 0.7;
  3. 	-moz-opacity:0.7;
[PHP] pobierz, plaintext


jednak to ingeruje w oba divy... ekran. Proszę o pomoc... 

[PHP] pobierz, plaintext 
  1.  
  2. #podrzedny { 
  3. padding: 0px 0px 0px 0px;
  4. margin:0;
  5. width: 100%;
  6. height: 100%;
  7. position: absolute; 
  8. top: 0px;
  9. overflow:hidden;
  10. float: left;
  11. z-index:100;
  12. }
  13.  
  14. #nadrzedny { 
  15. padding: 0px 0px 0px 0px;
  16. margin:0;
  17. width: 100%;
  18. height: 100%;
  19. position: absolute; 
  20. top: 0px;
  21. overflow:hidden;
  22. float: left;
  23. z-index:110;
  24.  
  25. }
  26.  
[PHP] pobierz, plaintext
Sephirus
10.01.2013, 16:30:29
Spójrz tu

Widzę że tam kombinujesz w tym podrzędnym z floatem itd... w linku masz najprostszy możliwy przykład.

EDIT: Po zastanowieniu chyba nie do końca obczaiłem temat :/
bpskiba
10.01.2013, 17:14:00
Taki kompletny przykładzik...

[HTML] pobierz, plaintext 
  1. <html>
  2. <style>
  3. .a1{
  4.     position : absolute ;
  5.     display:none;
  6.     background : yellow ;
  7.     z-index : 5 ;
  8.     width : 100% ;
  9.     height : 100% ;
  10.     opacity:0.8;
  11.     filter:alpha(opacity=80);
  12.    }
  13. .a2{
  14.    position : absolute ;
  15.    display: none;  
  16.    width : 300px ;
  17.    background: red;
  18.    z-index :9;  
  19.    top :150px ;
  20. }   
  21. </style>
  22. <script language="javascript" type="text/javascript">
  23. function f1()
  24.     {
  25.      document.getElementById("t1").style.display="inline";
  26.      document.getElementById("t3").style.display="inline";
  27.      document.getElementById("t3").style.right=(screen.width/2)-150;
  28.  
  29.     }
  30. function f2()
  31.     {
  32.     document.getElementById("t1").style.display="none";
  33.     document.getElementById("t3").style.display="none";
  34.     }
  35. function f3()
  36.     {
  37.     document.getElementById("e1").innerHTML=document.getElementById("r1").checked;
  38.     document.getElementById("e2").innerHTML=document.getElementById("r2").checked;
  39.     f2();
  40.     }    
  41. </script>
  42.  <body>
  43.  <div class="a1" id="t1"></div>
  44. <form>
  45. <table class="a2"  id="t3">
  46. <tr><td align="left" width=99%>Wybierz opcję</td><td></td><td align="right"><div onclick="f2();"><a href="">zamknij&nbsp[X]</a></div></td></tr>
  47. <tr><td align="left"> &nbsp;</td><td> </td><td></td></tr>
  48. <tr><td align="left">Opcja 1</td><td><input type="checkbox" id="r1"></td>&nbsp;<td></td></tr>
  49. <tr><td align="left">Opcja 2</td><td><input type="checkbox" id="r2"></td>&nbsp;<td></td></tr>
  50. <tr><td align="left"> &nbsp;</td><td> </td><td></td></tr>
  51. <tr><td align="left"> <input type="button" value="  Zapisz  " onclick="f3();"></td><td><input type="button" value="Zrezygnuj" onclick="f2();"></td><td></td></tr>
  52. </table>
  53. </form>
  54. <a href="#"><div onclick="f1();">pokaż</div></a><br><br>
  55. <div id="e1"></div>
  56. <div id="e2"></div>
  57. </body>
  58. </html>
[HTML] pobierz, plaintext
jeremiash
10.01.2013, 18:44:39
Dziękuję Wam koledzy, problem został rozwiązany.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.