Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Własny button
Forum PHP.pl > Forum > Przedszkole
Turson
Mam obrazek do buttona, w css:
  1. .button, input[type="submit"] {
  2. background: transparent url(button1.jpg) 0 0;
  3. }

HTML
  1. <input class="button" type="button" value="Start"/>


Jedynie zmienia sie tło, a mi chodzi o totalnie własny layout ;/ mam go wyciętego z PS w pliku jpg
pedro84
Wybacz, ale co ma się zmienić jeszcze jak podałeś TYLKO tło? Ma zacząć się sam animować? Layout strony? Ke?
Lars_18
Możesz użyć go jako obrazka i dodać do tego kod JavaScript/jQuery (submit()).
pedro84
Cytat(Lars_18 @ 9.07.2010, 19:33:50 ) *
Możesz użyć go jako obrazka i dodać do tego kod JavaScript/jQuery (submit()).

Po co?
Turson
Cytat(pedro84 @ 9.07.2010, 19:24:49 ) *
Wybacz, ale co ma się zmienić jeszcze jak podałeś TYLKO tło? Ma zacząć się sam animować? Layout strony? Ke?

  1. <div id="main">
  2. <div id="text" class="text">
  3. <form method="post" id="upload_form" enctype="multipart/form-data" action="upload.php">
  4.  
  5. <input name="userfile[]" type="file" size="50" /> <br />
  6. <input name="userfile[]" type="file" size="50" /> <br />
  7. <input name="userfile[]" type="file" size="50" /> <br />
  8. <span id="more_file_inputs"></span> <br />
  9.  
  10.  
  11. <br /><br />
  12.  
  13.  
  14. <div id="upload" class="upload"><input class="button" type="button" value="Start"/></div>
  15. </p>
  16. </form>
  17. </div>
  18. </div>

  1. body {
  2. background: url(bg.png);
  3. font-family: Arial, Verdana, Helvetica, sans-serif;
  4. font-size: 75%;
  5. padding:0;
  6. }
  7. #main {
  8. background: url(kwadratin.jpg) repeat-x;
  9. vertical-align: top;
  10. width:900px;
  11. height:60%;
  12. margin:0px auto;
  13. padding:0;
  14. }
  15.  
  16. .menu_gora {
  17. background: url(menugora.jpg) repeat-x top;
  18. height: 80px;
  19. padding: 2px;
  20. color:white;
  21. font-size:30px;
  22. }
  23. .mgp {
  24. float:right;
  25. color:white;
  26. font-size:20px;
  27. padding: 0px;
  28. word-spacing:6pt
  29. }
  30. .mgl {
  31. float:left;
  32. color:white;
  33. font-size:20px;
  34. padding: 0px;
  35. word-spacing:6pt
  36. }
  37.  
  38. .logo {
  39. margin: 10;
  40. }
  41. .text {
  42. float:left;
  43. color:white;
  44. font-size:20px;
  45. padding: 0px;
  46. margin-top:40px;
  47. margin-left:50px;
  48. }
  49. .upload {
  50. vertical-align: top;
  51. margin:0px auto;
  52. padding:0;
  53. }
  54. .button, input[type="submit"] {
  55. background: transparent url(button1.jpg) 0 0;
  56. width: 145px;
  57. }



krzysztof_kf
Powinno działać obrazek na button ? jakiej przeglądarki używasz nie za duży ten obrazek ? tak na marginesie masz błędu w klasie


.logo margin: 10; ?
akapit p linia 79


EDIT

A zresztą masa tematów była już o tym
Turson
Cytat(krzysztof_kf @ 9.07.2010, 20:41:28 ) *
Powinno działać obrazek na button ? jakiej przeglądarki używasz nie za duży ten obrazek ? tak na marginesie masz błędu w klasie


.logo margin: 10; ?
akapit p linia 79


EDIT

A zresztą masa tematów była już o tym

Używam MF/GC

Tak wygląda button który chcę



Wrzuciłem
  1. .button, input[type="submit"] {
  2. background:transparent url(wyslij2.jpg) ;
  3. font-size:18px;
  4. font-weight:bold;
  5. height:105;
  6. width:292;
  7. color:white;
  8. }

Działa, ale ramka jest niepotrzebna
gigzorr
Jeśli dobrze rozumuje to daj
  1. border-width: 0px;
a jeśli taka ramke masz w obrazku?zle wyciety to musisz zapisac go jako .png ew. gif zeby mial przezroczystosc.
Turson
Tak to wygląda




border-width: 0px; pomogło. Wielkie dzięki.
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.