Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: znikające div'y na Androidzie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
ABDOO
6.07.2014, 23:30:43
Witam,
strona wyświetlająca się prawidłowo na komputerze z systemem Windows we wszystkich przeglądarkach nie wyświetla divów na Androidzie. W trakcie ładowania divy są widoczne, ale znikają gdy ładowanie strony się zakończy. Myślałam, że divy zostają zasłonięte tłem, dodałam z-index, co jednak nie przyniosło żadnych efektów. Czy ktoś spotkał się z takim problemem?
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="css/text">
  4. .extras {
  5. 	width:150px;
  6. 	height:100px;
  7. 	padding: 50px 75px;
  8. 	position: absolute;
  9. 	color: #003781;
  10. 	display:block;
  11. 	text-align: center;
  12. 	vertical-align: top;
  13. 	z-index:101
  14.  
  15. }
  16.  
  17.  
  18. div.text {
  19. 	display:none;
  20. }
  21.  
  22. .inline {
  23. 	background-image: url("../img/ribbon5.png");
  24. 	background-size: 100%;
  25. 	background-repeat: no-repeat;
  26. 	padding: 2px;
  27. 	margin: 0px 0px;
  28. 	width: 65px;
  29. 	height:16px;
  30. 	display:block;
  31. 	color:#fd6c1d;
  32. 	text-align: left;
  33. 	position:absolute;
  34. 	left: 80%;
  35. 	top:40%;
  36. 	text-transform: uppercase;
  37. 	font-size: 0.8em
  38. }
  39.  
  40.  
  41. #div1{
  42. 	background: url("../img/cl6.png");
  43. 	position:absolute;
  44. 	top: 37%;
  45. 	left: 3%;
  46. 	background-size: contain;
  47. 	background-repeat: no-repeat;
  48. 	background-position:top;
  49. 	z-index: 101;
  50. }
  51. </style>
  52.  
  53. </head>
  54. <body>
  55. <div id="div1" class="extras">
  56. Some text <a class="inline" href="#responsive"> details</a>
  57. </div>
  58. <div class="text">
  59. <div id="responsive" >
  60. <p> Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p>
  61. </div>
  62. </div>
  63.  
  64. </body>
  65. </html>
[HTML] pobierz, plaintext
werdan
7.07.2014, 07:34:49
http://jsfiddle.net/L23vy/embedded/result/

U mnie na Androidzie jest to samo co na desktopie.
ABDOO
7.07.2014, 07:44:42
Wygląda więc na to że może problem leży wyżej 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="css/text">
  4. html, body {
  5. 	background: rgba(179,220,237,1);
  6. margin:0;
  7. 	padding: 0;
  8. 	min-height: 100%;
  9. 	position: relative;
  10. 	font-size: 1em;
  11. 	font-size: 14px;
  12. 	line-height:18px;
  13. width:100%;
  14. 	color: #003781;
  15. 	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif
  16.  
  17. 	}
  18. #skrollr-body {
  19. 	height:3500px;
  20. 	width:100%;
  21. 	margin:0;
  22. 	padding:0;
  23. 	clear:both;
  24. 	background: rgba(179,220,237,1);
  25. position:absolute;
  26. }
  27.  
  28. #first{
  29. 	height:20%;
  30. 	width:100%;
  31. 	clear:both;
  32. 	position: absolute;
  33. 	top:0%
  34.  
  35. }
  36. .extras {
  37. width:150px;
  38. height:100px;
  39. padding: 50px 75px;
  40. position: absolute;
  41. color: #003781;
  42. display:block;
  43. text-align: center;
  44. vertical-align: top;
  45. z-index:101
  46.  
  47. }
  48.  
  49.  
  50. div.text {
  51. display:none;
  52. }
  53.  
  54. .inline {
  55. background-image: url("../img/ribbon5.png");
  56. background-size: 100%;
  57. background-repeat: no-repeat;
  58. padding: 2px;
  59. margin: 0px 0px;
  60. width: 65px;
  61. height:16px;
  62. display:block;
  63. color:#fd6c1d;
  64. text-align: left;
  65. position:absolute;
  66. left: 80%;
  67. top:40%;
  68. text-transform: uppercase;
  69. font-size: 0.8em
  70. }
  71.  
  72.  
  73. #div1{
  74. background: url("../img/cl6.png");
  75. position:absolute;
  76. top: 37%;
  77. left: 3%;
  78. background-size: contain;
  79. background-repeat: no-repeat;
  80. background-position:top;
  81. z-index: 101;
  82. }
  83. </style>
  84. </head>
  85. <body>
  86. <div id="skrollr-body">		
  87. <div id="first">
  88. <div id="div1" class="extras">
  89. Some text <a class="inline" href="#responsive"> details</a>
  90. </div>
  91. <div class="text">
  92. <div id="responsive" >
  93. <p> Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p>
  94. </div>
  95. </div>
  96.  </div>
  97. </div>
  98. </body>
  99. </html>
  100.  
[HTML] pobierz, plaintext


Jeśli możesz powiedzieć czy teraz też działa u Ciebie werdan będę wdzięczna smile.gif u mnie wciąż się chowa... O_o

Udało mi się zlokalizować problem: skroll-body - position:absolute. Skasowałam i już wszystkie divy są widoczne. biggrin.gif
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.