Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Nieaktywne formularze na stronie
Forum PHP.pl > Forum > Przedszkole
NickOver
21.11.2014, 07:36:38
Witam. Mam problem z formularzami, mianowicie na stronie są , lecz są "nieklikalne" Na początku pomyślałem że to wina z-index'a lecz po nadaniu tego atrybutu dla diva w którym formularz jest nic się nie zmienia, tj. nadal są nieaktywne. Oto kod css i html (chodzi dokładniej o ten w divie body-register-left)
Z góry dzięki za pomoc smile.gif
CSS
[HTML] pobierz, plaintext 
  1. body {
  2. 	margin: 0px;
  3. }
  4. .header {
  5. 	position: fixed;
  6. 	top: 0;
  7. 	width: 100%;
  8. }
  9. .topbar
  10. {
  11. 	position: absolute;
  12. 	top: 0px;
  13. 	left: 0px;
  14. 	width:100%;
  15. 	height: 64px;
  16. 	background-color: #3c3c3c;
  17. }
  18. .topbar-content
  19. {
  20. 	width: 1004px;
  21. 	margin: 0 auto;
  22. }
  23. .topbar-logo
  24. {
  25. 	position: relative;
  26. 	margin: 5px;
  27. 	width: 200px;
  28. 	height: 54px;
  29. 	float: left;
  30. 	color: #fff;
  31. 	font-size: 50px;
  32. }
  33. .topbar-navi
  34. {
  35. 	position: relative;
  36. 	width: 280px;
  37. 	height: 64px;
  38. 	float: right;
  39. 	margin-right: 8px;
  40. }
  41. .topbar-navi-logout
  42. {
  43. 	position: relative;
  44. 	width: 64px;
  45. 	height: 64px;
  46. 	background-image: url('/dir/images/shut_down.png');
  47. 	float: right;
  48. }
  49. .topbar-navi-options
  50. {
  51. 	position: relative;
  52. 	width: 64px;
  53. 	height: 64px;
  54. 	margin-right: 8px;
  55. 	background-image: url('/dir/images/process.png');
  56. 	float: right;
  57. }
  58. .topbar-navi-user
  59. {
  60. 	position: relative;
  61. 	width: 64px;
  62. 	height: 64px;
  63. 	margin-right: 8px;
  64. 	background-image: url('/dir/images/user.png');
  65. 	float: right;
  66. }
  67. .topbar-navi-calendar
  68. {
  69. 	position: relative;
  70. 	width: 64px;
  71. 	height: 64px;
  72. 	margin-right: 8px;
  73. 	background-image: url('/dir/images/calendar_date.png');
  74. 	float: right;
  75. }
  76. /*-------------------------------------------------------*/
  77. .topbar-navi-logout
  78. {
  79. 	position: relative;
  80. 	width: 64px;
  81. 	height: 64px;
  82. 	background-image: url('/dir/images/shut_down.png');
  83. 	float: right;
  84. }
  85. .topbar-navi-options
  86. {
  87. 	position: relative;
  88. 	width: 64px;
  89. 	height: 64px;
  90. 	margin-right: 8px;
  91. 	background-image: url('/dir/images/process.png');
  92. 	float: right;
  93. }
  94. .topbar-navi-user
  95. {
  96. 	position: relative;
  97. 	width: 64px;
  98. 	height: 64px;
  99. 	margin-right: 8px;
  100. 	background-image: url('/dir/images/user.png');
  101. 	float: right;
  102. }
  103. .topbar-navi-calendar
  104. {
  105. 	position: relative;
  106. 	width: 64px;
  107. 	height: 64px;
  108. 	margin-right: 8px;
  109. 	background-image: url('/dir/images/calendar_date.png');
  110. 	float: right;
  111. }
  112. /*----------------------------------------------------*/
  113. .topbar-search
  114. {
  115. 	position: relative;
  116. 	width: 280px;
  117. 	height: 64px;
  118. 	float: right;
  119. 	margin-right: 15px;
  120. }
  121. .topbar-calendar-day
  122. {
  123. 	font-size: 20px;
  124. 	margin-top: 25px;
  125. 	text-align: center;
  126. }
  127. input.search
  128. {
  129. 	width: 280px;
  130. 	height: 38px;
  131. 	margin-top: 13px;
  132. 	background-image: url('/dir/images/search.png');
  133. 	background-repeat: no-repeat;
  134. 	background-position: right;
  135. 	font-size: 30px;
  136. 	background-position:240px;
  137. 	border: 0;
  138. }
  139. .loginbar
  140. {
  141. 	position: absolute;
  142. 	top: -91px;
  143. 	right: 50px;
  144. 	width:  280px;
  145. 	height: 155px;
  146. 	background-color: #3c3c3c;
  147. 	z-index: -1;
  148. 	transition: all 0.3s;
  149.  
  150. }
  151. .loginbar:hover {
  152. 	top: 64px;
  153. }
  154. .loginbody
  155. {
  156. 	position: relative;
  157. 	width: 280px;
  158. 	height: 155px;
  159. 	float: right;
  160. 	display: block;
  161. }
  162. .loginbutton
  163. {
  164. 	position: relative;
  165. 	width: 100px;
  166. 	height: 40px;
  167. 	background-color: orange;
  168. 	clear: both;
  169. 	bottom: -0px;
  170. 	margin: 0 auto;
  171. 	float: right;
  172. }
  173. .body
  174. {
  175. 	position: relative;
  176. 	top:  64px;
  177. 	height: 1000px;
  178. 	width: 1004px;
  179. 	margin: 0 auto; 
  180. 	z-index: -1;
  181. }
  182. .register-block
  183. {
  184. 	width: 1004px;
  185. 	margin-top: 1px;
  186. 	height: 300px;
  187. 	background-color: orange;
  188. 	z-index: 1;
  189. }
  190. .register-form
  191. {
  192. 	width: 442px;
  193. 	margin-left: 50px;
  194. 	float: left;
  195. 	height: 300px;
  196. 	background-color: #000;
  197.  
  198. }
  199. .register-desc
  200. {
  201. 	width: 442px;
  202. 	margin-right: 50px;
  203. 	height: 300px;
  204. 	color: #3c3c3c;
  205. 	float: right;
  206. 	background-color: #000;
  207. 	font-size: 30px;
  208. }
  209. input.register
  210. {
  211. 	width: 280px;
  212. 	margin-left: 60px;
  213. 	height: 38px;
  214. 	margin-top: 30px;
  215. 	background-image: url('/dir/images/search.png');
  216. 	background-repeat: no-repeat;
  217. 	background-position: right;
  218. 	font-size: 30px;
  219. 	background-position:240px;
  220. 	border: 0;
  221. }
  222. input.login
  223. {
  224. 	width: 240px;
  225. 	height: 32px;
  226. 	margin-top: 13px !important;
  227. 	background-image: url('/dir/images/search.png');
  228. 	background-repeat: no-repeat;
  229. 	background-position: right;
  230. 	font-size: 25px;
  231. 	background-position:200px;
  232. 	border: 0;
  233. 	margin-left: 20px;
  234. }
  235. input.pass
  236. {
  237. 	width: 240px;
  238. 	height: 32px;
  239. 	margin-top: 13px !important;
  240. 	background-image: url('/dir/images/search.png');
  241. 	background-repeat: no-repeat;
  242. 	background-position: right;
  243. 	font-size: 25px;
  244. 	background-position:200px;
  245. 	border: 0;
  246. 	margin-left: 20px;
  247. }
  248. .body-register
  249. {
  250. 	top: 2px;
  251. 	height: 400px;
  252. 	background-color: orange;
  253. 	position: relative;
  254. 	z-index: 20;
  255. }
  256. .body-register-left
  257. {
  258. 	background-color: #ddd;
  259. 	width: 50%;
  260. 	float: left;
  261. 	height: 400px;
  262. }
  263. .body-register-right
  264. {
  265. 	background-color: #fff;
  266. 	width: 50%;
  267. 	float: right;
  268. 	height: 400px;
  269. }
[HTML] pobierz, plaintext


HTML:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. 	<link rel="stylesheet" type="text/css" href="style.css" />
  5. </head>
  6. <body>
  7. 	<header class="header">
  8. 		<div class="topbar">
  9. 			<div class="topbar-content">
  10. 				<div class="loginbar">
  11. 					<div class="loginbody">
  12. 					<form action="glowna.html" method="POST">
  13. 						<input type="text" class="login" />
  14. 						<input type="password" class="pass" />
  15. 						<input type="button" class="login" value="ZALOGUJ" />
  16. 					</form>
  17. 					</div>
  18. 					<div class="loginbutton">login</div>
  19. 				</div>
  20. 				<div class="topbar-logo"> LOGO</div>
  21. 				<div class="topbar-navi">
  22. 					<div class="topbar-navi-logout"></div>
  23. 					<div class="topbar-navi-options"></div>
  24. 					<div class="topbar-navi-user"></div>
  25. 					<div class="topbar-navi-calendar"></div>
  26. 				</div>
  27. 			</div>
  28. 		</div>
  29. 	</header>
  30. 	<div class="body">
  31. 		<div class="body-register">
  32. 			<div class="body-register-left">
  33. 				<form action="index.php" method="POST">
  34. 					<input type="text" name="email">
  35. 					<input type="password" name="password">
  36. 					<input type="password" name="password-repeat">
  37. 					<input type="button" name="register-button">
  38. 				</form>
  39. 			</div>
  40. 			<div class="body-register-right">
  41. 				<form action="index.php" method="POST">
  42. 					<input type="text" name="email">
  43. 					<input type="password" name="password">
  44. 					<input type="password" name="password-repeat">
  45. 					<input type="button" name="register-button">
  46. 				</form>
  47. 			</div>
  48. 		</div>
  49. 	</div>
  50. </body>
  51. </html>
[HTML] pobierz, plaintext
Jarma
21.11.2014, 07:53:03 
[HTML] pobierz, plaintext 
  1. .body{
  2.    ...
  3.    z-index: 0;
  4. }
[HTML] pobierz, plaintext
NickOver
21.11.2014, 07:56:57
Cytat(Jarma @ 21.11.2014, 07:53:03 ) *
[HTML] pobierz, plaintext 
  1. .body{
  2.    ...
  3.    z-index: 0;
  4. }
[HTML] pobierz, plaintext

Niestety musi być tam ten z-index -1 aby poprawnie wyświetlalo się menu logowania.
trueblue
21.11.2014, 08:33:44 
[HTML] pobierz, plaintext 
  1. header{
  2.  z-index:1;
  3. }
  4. div.body{
  5.  z-index:0;
  6. }
[HTML] pobierz, plaintext
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.