Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css] Button z 4 grafik, jak ?
Mayka
post
Post #1





Grupa: Zarejestrowani
Postów: 304
Pomógł: 1
Dołączył: 12.01.2009
Skąd: Kanapa

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

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ć ?
Go to the top of the page
+Quote Post
pedro84
post
Post #2





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

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

Tfu! Buttona z kilku grafik nie zrobisz. Vide post niżej.

Ale mamy rok 2012, CSS3!

Ten post edytował pedro84 18.06.2012, 11:09:53
Go to the top of the page
+Quote Post
pehaperowiec
post
Post #3





Grupa: Zarejestrowani
Postów: 91
Pomógł: 8
Dołączył: 26.09.2011

Ostrzeżenie: (10%)
X----

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 (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
Mayka
post
Post #4





Grupa: Zarejestrowani
Postów: 304
Pomógł: 1
Dołączył: 12.01.2009
Skąd: Kanapa

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

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 ?
Go to the top of the page
+Quote Post
thek
post
Post #5





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
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 (IMG:style_emoticons/default/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.
Go to the top of the page
+Quote Post
pehaperowiec
post
Post #6





Grupa: Zarejestrowani
Postów: 91
Pomógł: 8
Dołączył: 26.09.2011

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
Mayka
post
Post #7





Grupa: Zarejestrowani
Postów: 304
Pomógł: 1
Dołączył: 12.01.2009
Skąd: Kanapa

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

IE 9 jest każdy element, jeden pod drugim.

(IMG:http://img59.imageshack.us/img59/6510/beztytuuowrh.png)

Go to the top of the page
+Quote Post
pehaperowiec
post
Post #8





Grupa: Zarejestrowani
Postów: 91
Pomógł: 8
Dołączył: 26.09.2011

Ostrzeżenie: (10%)
X----

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

(IMG:http://img59.imageshack.us/img59/6510/beztytuuowrh.png)
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
Go to the top of the page
+Quote Post
pedro84
post
Post #9





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

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

Pod IE 9 jest ok.

IE 6/7 mają pewne problemy ze stylowaniem <button>.
Go to the top of the page
+Quote Post
Mayka
post
Post #10





Grupa: Zarejestrowani
Postów: 304
Pomógł: 1
Dołączył: 12.01.2009
Skąd: Kanapa

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

[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
Go to the top of the page
+Quote Post
pehaperowiec
post
Post #11





Grupa: Zarejestrowani
Postów: 91
Pomógł: 8
Dołączył: 26.09.2011

Ostrzeżenie: (10%)
X----

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/
Go to the top of the page
+Quote Post
Mayka
post
Post #12





Grupa: Zarejestrowani
Postów: 304
Pomógł: 1
Dołączył: 12.01.2009
Skąd: Kanapa

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

Działa jeszcze raz dzieki za pomoc.
Go to the top of the page
+Quote Post
pehaperowiec
post
Post #13





Grupa: Zarejestrowani
Postów: 91
Pomógł: 8
Dołączył: 26.09.2011

Ostrzeżenie: (10%)
X----

nie ma problemu. Moge pomóc w czymś jeszcze?
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 26.08.2025 - 22:56
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn