Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]Własny button
Turson
post 9.07.2010, 18:13:59
Post #1





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
pedro84
post 9.07.2010, 18:24:49
Post #2





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----


Wybacz, ale co ma się zmienić jeszcze jak podałeś TYLKO tło? Ma zacząć się sam animować? Layout strony? Ke?


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
Lars_18
post 9.07.2010, 18:33:50
Post #3





Grupa: Zarejestrowani
Postów: 63
Pomógł: 11
Dołączył: 29.05.2010

Ostrzeżenie: (0%)
-----


Możesz użyć go jako obrazka i dodać do tego kod JavaScript/jQuery (submit()).
Go to the top of the page
+Quote Post
pedro84
post 9.07.2010, 18:41:33
Post #4





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----


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?


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
Turson
post 9.07.2010, 19:14:35
Post #5





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----


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. }



Go to the top of the page
+Quote Post
krzysztof_kf
post 9.07.2010, 19:41:28
Post #6





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----


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

Ten post edytował krzysztof_kf 9.07.2010, 19:48:14
Go to the top of the page
+Quote Post
Turson
post 9.07.2010, 19:57:23
Post #7





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----


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

Ten post edytował TursoN 9.07.2010, 21:20:08
Go to the top of the page
+Quote Post
gigzorr
post 10.07.2010, 08:25:42
Post #8





Grupa: Zarejestrowani
Postów: 652
Pomógł: 47
Dołączył: 6.02.2010
Skąd: Radom

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
Turson
post 10.07.2010, 11:14:50
Post #9





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----


Tak to wygląda




border-width: 0px; pomogło. Wielkie dzięki.

Ten post edytował TursoN 10.07.2010, 11:15:42
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 10.07.2025 - 08:21