Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Stylizowanie formularza - label (odstępy)
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
victor_19
13.03.2011, 13:38:33
Jest taki formularz - http://img42.imageshack.us/i/formularz.jpg/

Kod:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=Windows-1250" />
  5. <title>Formularz</title>
  6. <style type="text/css">
  7. #subForm {
  8. 	font-size: .8em;
  9. 	margin: 0;
  10. 	padding: 0;
  11. }
  12.  
  13. #subForm .label {
  14. 	margin: 0;
  15. 	padding: 0;
  16. 	float: left;
  17. 	width: 150px;
  18. 	border: 1px solid blue;
  19. 	text-align: right;
  20. 	font-weight: bold;
  21. 	clear: left;
  22.  
  23. }
  24. </style>
  25. </head>
  26. <body id="feature" class="col2">
  27. <div id="wrapper">
  28.  
  29.   <div id="main">
  30.     <h1 id="lead"><span class="section">Zapisz się:</span> Formularz rejestracji czytelnika </h1>
  31.     <form id="subForm" name="subForm" method="post" action="">
  32.     <p>
  33. 		<label for="name" class="label">Jak się nazywasz?</label>
  34. 		<input type="text" name="name" id="name" />
  35. 	</p>
  36. 	<p>
  37. 		<label for="email" class="label">Podaj swój adres e-mail</label>
  38. 		<input type="text" name="email" id="email" />
  39. 	</p>
  40. 	<p>
  41. 	<span class="label">Twoja wiedza:</span>
  42. 	    <label>
  43. 	    <input name="skill" type="radio" value="novice" />Słaba</label>
  44. 	    <label>
  45. 	    <input name="skill" type="radio" value="intermediate" />Średnia</label>
  46. 	    <label>
  47. 	    <input name="skill" type="radio" value="advanced" />Duża</label>
  48. 	  </p>
  49. 	 <p>
  50. 	    <label for="refer" class="label">Gdzie się o nas dowiedziałeś? </label>
  51. 	    <select name="refer" id="refer">
  52. 	      <option value="null">Proszę wybrać</option>
  53. 	      <option value="1">Od przyjaciela</option>
  54. 	      <option value="2">Dżungla Ziołowa</option>
  55. 	      <option value="3">Dziennik kompostowy</option>
  56. 	      <option value="4">Vanity Fair</option>
  57.         </select>
  58. 	  </p>
  59. 	  <p>
  60. 	    <label for="comments" class="label">Czy masz jakieś komentarze? </label>
  61.         <textarea name="comments" rows="4" id="comments"></textarea>
  62. 	  </p>
  63. 	  <p>
  64. 	    <input type="submit" name="Submit" id="subscribe" value="Wyślij" />
  65. 	  </p>
  66.     </form>
  67.  
  68.   </div>
  69. </div>
  70.  
  71. </body>
  72. </html>
[HTML] pobierz, plaintext


Jak ustawić, żeby etykiety label o nazwach: "Podaj swój adres email i Twoja wiedza", "Gdzie sie o nas dowiedziales i Czy masz jakies komentarze"
miały taki sam odstęp tak jak między Jak się nazywasz a Podaj swój adres email, czyli jednym słowem, żeby wszystkie etykiety label miały taki same odstępy
krzywy36
13.03.2011, 13:51:09
dla znacznika p najpierw wyzeruj marginesy (margin: 0;) a potem ustaw np. margin-bottom: 20px;, a jak nie zadziała to zamiast p użyj divow
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.