Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Button z 4 grafik, jak ?
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Mayka
18.06.2012, 10:20:08
Witam

Mam taki problem, chciałbym zrobić przyciski do formularzy w css'ie z 3 grafik, prawa 3px, lewa 3px i srodek 1px. tak żeby sie rozszerzał w zależności od tekstu który jest na buttonie.
Dodatkowo chciałbym żeby przed tekstem(po lewej) pojawiała sie ikonka. Ktoś mogłby mi podpowiedzieć jak coś takiego zrobić ? Albo chociaż czego szukać ?
pedro84
18.06.2012, 10:21:47
Tfu! Buttona z kilku grafik nie zrobisz. Vide post niżej.

Ale mamy rok 2012, CSS3!
pehaperowiec
18.06.2012, 11:04:57
Cytat(pedro84 @ 18.06.2012, 11:21:47 ) *
Buttona z kilku grafik nie zrobisz. Ale mamy rok 2012, CSS3!
Jak ja normalnie kocham to forum i ich użytkowników:D Wystarczy umieścić 3 spany w znaczniku button i każdemu spanowi nadac inne tło. Przykład:

http://jsfiddle.net/vbgDC/

ale tak jak napisał mój poprzednik. Technologia CSS 3 jest teraz wielkim ułatwieniem smile.gif
Mayka
18.06.2012, 13:09:40
Haha, proste rozwiązania są z regóły skuteczne. Dzieki za pomoc.

Dobra a ktoś może mi powiedzieć jak to w "super" IE odpalić ? Żeby nie było jedno pod drugim ?
thek
18.06.2012, 13:28:54
Najlepiej weź użyj już CSS wyższego, tło rzuć i border odpowiedni, bo domyślam się, że chcesz zaokrąglenia zrobić, czyli border-radius wink.gif. Co do ikonki, to można choćby dla tego co jest we wnętrzu zastosować jego własny background-image z ową ikonką. Po tej stronie gdzie ikona, zastosować odpowiednio duży padding... Wtedy tekst na ikonkę nie wejdzie.
pehaperowiec
18.06.2012, 13:33:43
Cytat
Dobra a ktoś może mi powiedzieć jak to w "super" IE odpalić ? Żeby nie było jedno pod drugim ?
Pod IE 7 buttom jest poprawnie wyświetlany. Chcesz coś umieścić obok tego buttona? Uzyj floata
Mayka
18.06.2012, 14:30:06
IE 9 jest każdy element, jeden pod drugim.



pehaperowiec
18.06.2012, 14:51:46
Cytat(Mayka @ 18.06.2012, 15:30:06 ) *
IE 9 jest każdy element, jeden pod drugim.

Nie mam IE 9 więc nei wiem jak wygląa. Pod iE 8 jest ok. Spóbuj nadać sztywne wymiary spanom i buttonowi. Być moze coś u Ciebei dziedziczy style. Sprawdź to
pedro84
18.06.2012, 14:54:14
Pod IE 9 jest ok.

IE 6/7 mają pewne problemy ze stylowaniem <button>.
Mayka
18.06.2012, 14:56:09 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
  5.   <style type="text/css">
  6.     .przycisk {
  7.     background:none;
  8.     overflow:hidden;
  9.     border:0px;
  10.     margin:0px;
  11.     padding:0px;
  12. }
  13. .left{
  14. 	background-image: url(lewy.png); 
  15.  float:left;
  16. 	width:10px;
  17. 	 height:24px;
  18.     display:block;
  19. }
  20. .right {
  21.  	background-image: url(prawy.png); 
  22. width:10px;
  23.  height:24px;
  24.     display:block;
  25.      float:left;
  26. }
  27.  
  28. .center {
  29. 	 float:left;
  30. 	background-image: url(tlo.png); 
  31. 	background-repeat: repeat-x;
  32. 	padding-top:4px;
  33. 	padding-left:6px;
  34. 	padding-right:6px;
  35. 	 height:24px;
  36.     display:block;
  37. }
  38. .obrazek {
  39.  float:left;
  40. 	background-image: url(tlo.png); 
  41. 	background-repeat: repeat-x;
  42. 	padding-right:5px;
  43. 	padding-left:5px;
  44. 	padding-top:3px;
  45.  height:24px;
  46.     display:block;	
  47. }
  48.   </style>
  49.   <title></title>
  50. </head>
  51. <body>
  52. <form name="wyslij" action="" method="GET">
  53. <input type="text" name="test" value="ds" />
  54. <button type="submit" class="przycisk">
  55.     <span class="left"></span>
  56.     <span class="obrazek"><img src="obrazek.png"/></span>
  57.     <span class="center">Kliknij</span>
  58.     <span class="right"></span>
  59. </button>
  60. </body>
  61. </html>
[HTML] pobierz, plaintext


Wydaje mi sie że nie ma poczym.. ale zobacz ten kod u siebie w IE7 jak możesz
pehaperowiec
18.06.2012, 15:11:33
Tak jak mówiłem, wystarczy nadać odpowiednie szerokości. Przyjmijmy, ze całość ma 200px, .l oraz .r po 20px, więc .c ma 160px.

http://jsfiddle.net/vbgDC/1/

Mayka
18.06.2012, 15:18:24
Działa jeszcze raz dzieki za pomoc.
pehaperowiec
18.06.2012, 15:20:10
nie ma problemu. Moge pomóc w czymś jeszcze?
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.