Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z ułożeniem buttonów w formularzu
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
mich32@interia.pl
12.12.2007, 10:50:31
Mam zrobiony formularz i chciałbym żeby przyciski "Dodaj" i "Anuluj" były równo wyświetlone. Firefox wyświetla te przycisk równo, ale opera i IE ma już z tym kłopoty. Wiem, że poroblemem jest znacznik </form> od formularza "userAdd". Bo jeżeli dam go poza DIV-a "userButtons", to wszystko się ładnie układa, ale wtedy formularze się zgnieżdżają, a to nie może mieć miejsca. Prosiłbym o pomoc w rozwiązaniu problemu.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5.  
  6. .userBody{
  7. 	background-color: #ffffff;
  8. }
  9.  
  10. #userFrame{
  11. 	border: 1px solid red;
  12. 	padding: 0px;
  13. 	width: 320px;
  14. 	margin: auto;
  15. 	margin-top: 50px;
  16. 	color: #ffffff;
  17. }
  18.  
  19. #userHeader{
  20.         font-weight: bold;        
  21.         font-size: large;
  22.         color: #26598B;
  23.         text-align: center;
  24.  
  25.         height: 30px;
  26.         background-color: #D1E3FB;               
  27.         padding: 10px 0px 0px 10px;
  28.         border: 1px solid red;
  29.  
  30. }
  31.  
  32. #user{
  33. 	padding: 10px;
  34. 	padding-top: 20px;
  35. 	margin: auto;
  36. 	/* background-color: #316ac5; */
  37. 	background-color:#F6FAFF;
  38. 	text-align: left;
  39. 	border: 1px solid red;
  40.  
  41. }
  42.  
  43. .userMain{
  44. 	width: 75%;
  45. 	margin-right: 20%;
  46. 	text-align: center;
  47. 	border: 1px solid red;
  48. }
  49.  
  50.  
  51. .userDescription{
  52. 	color: #26598B;
  53. 	font-weight: bold;
  54. 	margin-bottom: 2px;
  55. 	float: left;
  56. 	padding: 5px;
  57. 	border: 1px solid red;
  58.  
  59. }
  60.  
  61. .userInput{
  62. 	border: 1px solid #c0c0c0;
  63. 	margin-bottom: 5px;
  64. 	width: 96%;
  65. 	border: 1px solid red;
  66. }
  67.  
  68.  
  69. .userButtons{
  70.         padding: 15px 0px 0px 15px;
  71.         margin: 0; padding: 0;
  72.         border: 1px solid blue;
  73. }
  74.  
  75. .buttonOk{        
  76.         float: left;
  77. 		padding: 15px 0px 0px 15px;
  78. 		border: 1px solid red;
  79. }
  80.  
  81. .buttonCancel{
  82.   		float: right;
  83. 		padding: 15px 0px 0px 15px;	
  84. 		border: 1px solid red;
  85. }
  86.  
  87. </style> 
  88. </head>
  89.     <body class="userBody">   
  90.  
  91.         <div id="userFrame">
  92.             <div id="userHeader">
  93.                 Dodawanie użytkownika
  94.             </div>
  95.             <div id="user">
  96.                 <div class="userMain">
  97.  
  98.                     <form name="userAdd" action="add_user.jsp" method="POST">
  99.  
  100.                         <span class="userDescription">Login</span>
  101.                         <input type="text" name="userLogin" value="" class="userInput" />
  102.                         <span class="userDescription">Hasło</span>
  103.                         <input type="password" name="userPasswd" value="" class="userInput" />
  104.                         <span class="userDescription">Powtórz hasło</span>
  105.                         <input type="password" name="userRepeatPasswd" value="" class="userInput" />
  106.  
  107.                         <input type="hidden" name="mode" value="checked" />
  108.  
  109.                         <div class="userButtons">
  110.                             <div class="buttonOk">
  111.                                 <input type="submit" value="Dodaj" class="userButton" />
  112.  
  113.                             </div>
  114.                     </form> 
  115.                          <div class="buttonCancel">
  116.                              <form name="cancelUserAdd" action="index.jsp" method="POST">
  117.                          	    <input type="submit" value="Anuluj" class="userButton" />                        
  118.                              </form>
  119.                          </div>    
  120.  
  121.                         </div> 
  122.  
  123.  
  124.  
  125.                 </div>
  126.             </div>
  127.         </div>
  128.  
  129.     </body>
  130. </html>
[HTML] pobierz, plaintext
wolguy
12.12.2007, 11:47:15 
[XML] pobierz, plaintext 
  1. form { margin:0; padding:0 }
[XML] pobierz, plaintext

?
mich32@interia.pl
12.12.2007, 12:45:13
wolguy pomogło, dzięki za pomoc smile.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.