Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][rozwiązany] Nakładka na obrazek
bim2
post 15.11.2008, 15:40:43
Post #1





Grupa: Zarejestrowani
Postów: 1 873
Pomógł: 152
Dołączył: 9.04.2006
Skąd: Berlin

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

Witam, mam mały problem.
http://hernass.pl/css.htm
Chciałbym, aby obramka znalazła się nad czerwonym tłem. I nie mogę sobie poradzić. Tło musi iść od dołu w górę. Jak daje margin-top to obramowanie także zmienia swoje położenie.
Ma ktoś jakiś pomysł, jak to naprawić?

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style>
  4. #health {
  5. 	height: 334px;
  6. 	width: 18px;
  7. }
  8. #health_bar {
  9. 	height: 34px;
  10. 	padding-top: 300px;
  11. 	width: 18px;
  12. 	background: url('HP-pasek_04.gif') repeat-y;
  13. 	float: left;
  14. }
  15. #border_health {
  16. 	height: 334px;
  17. 	width: 18px;
  18. 	background: url('HP pasek.png');
  19. 	float: left;
  20. 	z-index: 1000;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div id="health"><div id="health_bar"><div id="border_health"></div></div></div>
  26. </body>
  27. </html>
[HTML] pobierz, plaintext


Ten post edytował bim2 15.11.2008, 23:56:44


--------------------
» Hern.as
» Move to Apple Music
Go to the top of the page
+Quote Post
ayeo
post 15.11.2008, 15:48:37
Post #2





Grupa: Przyjaciele php.pl
Postów: 1 202
Pomógł: 117
Dołączył: 13.04.2007
Skąd: 127.0.0.1

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

Witam!

Zmień padding-top: 300; na 0 winksmiley.jpg

Pozdrawiam!

edit:

[HTML] pobierz, plaintext 
  1. <style>
  2. #health {
  3.     position: relative;
  4.     height: 334px;
  5.     width: 18px;
  6. }
  7. #health_bar {
  8.     height: 34px;
  9.     padding-top: 0px;
  10.     width: 18px;
  11.     background: url('HP-pasek_04.gif') repeat-y 0 bottom;
  12.     position: absolute;
  13.     bottom: 0;
  14.     left: 0;
  15. }
  16. #border_health {
  17.     position: absolute;
  18.     top: 0;
  19.     left: 0;
  20.     height: 334px;
  21.     width: 18px;
  22.     background: url('HP pasek.png');
  23.  
  24.  
  25. }
  26. </style>
  27.  
  28. <body>
  29.  <div id="health">
  30.   <div id="health_bar"></div>
  31.   <div id="border_health"></div>
  32.  </div>
  33. </body>
[HTML] pobierz, plaintext


--------------------
ayeo.pl
Go to the top of the page
+Quote Post
kleszczoscisk
post 15.11.2008, 15:50:04
Post #3





Grupa: Zarejestrowani
Postów: 164
Pomógł: 3
Dołączył: 13.12.2007

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

[HTML] pobierz, plaintext 
  1. #border_health {
  2.     height: 334px;
  3.     width: 18px;
  4.     background: url('http://hernass.pl/HP pasek.png');
  5.     float: left;
  6.     margin-top: -300px;
  7.     z-index: 1000;
  8. }
[HTML] pobierz, plaintext

moze tak ?

Ten post edytował kleszczoscisk 15.11.2008, 15:50:40


--------------------

Siedź cicho, kiedy śpi licho.
Go to the top of the page
+Quote Post
bim2
post 15.11.2008, 15:50:06
Post #4





Grupa: Zarejestrowani
Postów: 1 873
Pomógł: 152
Dołączył: 9.04.2006
Skąd: Berlin

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

Tylko, że teraz czerwony pasek idzie od góry, a ja chce go od dołu smile.gif

@up
Tak banalne, że aż się dziwie że zapomniałem o tym. smile.gif Należyte pomógł. :]

EDIT:
A co z IE? haha.gif
http://hernass.pl/css.htm Ucina mi paseczek sad.gif

Ten post edytował bim2 15.11.2008, 15:52:23


--------------------
» Hern.as
» Move to Apple Music
Go to the top of the page
+Quote Post
ayeo
post 15.11.2008, 15:54:29
Post #5





Grupa: Przyjaciele php.pl
Postów: 1 202
Pomógł: 117
Dołączył: 13.04.2007
Skąd: 127.0.0.1

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

look wyżej, dałem edycję smile.gif


--------------------
ayeo.pl
Go to the top of the page
+Quote Post
bim2
post 15.11.2008, 20:11:22
Post #6





Grupa: Zarejestrowani
Postów: 1 873
Pomógł: 152
Dołączył: 9.04.2006
Skąd: Berlin

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

No niby tak się da, ale jak bez position absolute, ani relative? smile.gif Taki trening sobie wymysliłem :]

EDIT; Przepraszam, jednak śmiga tak jak chciałem. Dziękuje bardzo.



Jednak nadal mam problem smile.gif Nie może być absolute tongue.gif bo nie działa. http://web.altaron.pl</a> -> abcd1/abdc1 -> zakładka Client

Ten post edytował bim2 15.11.2008, 20:12:22


--------------------
» Hern.as
» Move to Apple Music
Go to the top of the page
+Quote Post
hiszpanespaniol
post 15.11.2008, 21:22:08
Post #7





Grupa: Zarejestrowani
Postów: 213
Pomógł: 39
Dołączył: 7.04.2008
Skąd: 3city

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

po co tyle div'ów, marginesów i absolutów?

można to zrobić inaczej i prościej więc będzie pasować do ładnego layoutu:

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2.  
  3. img#health {
  4.  
  5. background-image: url(czerwona-linia-zycia.gif);
  6.  
  7. background-position: 0px 50px;
  8.  
  9. }
  10.  
  11. </style>
  12.  
  13. <img src="obramowanie.gif" id="health" alt="poziom zdrowia" />
[HTML] pobierz, plaintext




osobną kwestią jest, czy chcesz pozycjonować obrazek absolutnie, czy wrzucić go wewnątrz czegokolwiek. obramowanie.gif musi mieć oczywiście przezroczysty środek, a wysokość linii życia tez musi byc odpowiednia. Za pomocą php, czy czego tam będziesz używał jako drugą wartość dla background-position wstawiasz ile życia ktoś stracił. przy obrazku wysokim na 100px sprawa jest banalna. 

edit:
Nawet lynx wyświetli te obrazki poprawnie winksmiley.jpg

Ten post edytował hiszpanespaniol 15.11.2008, 21:45:06


--------------------
profesjonalny webmastering: "save for web > html and images"
Go to the top of the page
+Quote Post
--rogal--
post 15.11.2008, 21:27:39
Post #8





Goście
o0 przydałby mi się taki kodzik, ale jak do tego wyświetlić jakaś ilość z mysql np 1000 a w drugim polu mam 2500 czyli ile mam 1000 a maks 2500.
I jak to do tego co zrobiliście w tym temacie wyświetlić?
Go to the top of the page
+Quote Post
Mize
post 15.11.2008, 21:36:54
Post #9





Grupa: Zarejestrowani
Postów: 84
Pomógł: 6
Dołączył: 26.03.2008
Skąd: Łódź

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

Obliczasz % i odpowiednio do tego długość paska życia.


--------------------
NULL;
Go to the top of the page
+Quote Post
bim2
post 15.11.2008, 21:44:25
Post #10





Grupa: Zarejestrowani
Postów: 1 873
Pomógł: 152
Dołączył: 9.04.2006
Skąd: Berlin

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

Ale, ja chce mieć to obramowanie smile.gif


--------------------
» Hern.as
» Move to Apple Music
Go to the top of the page
+Quote Post
hiszpanespaniol
post 15.11.2008, 21:48:53
Post #11





Grupa: Zarejestrowani
Postów: 213
Pomógł: 39
Dołączył: 7.04.2008
Skąd: 3city

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

nic nie stracisz.

1. tworzysz gif wyglądający identycznie jak obramowanie. ten gif ma przezroczysty środek.

2. tworzysz (w tym samym .psd czy .xcf) linię życia żeby pasowała pod spodem i była wysoka tak samo jak obramowanie.

3. css i html jak podałem wyżej i smiga wszystko.



możesz to zrobić inaczej, ale to chyba najczystsze rozwiązanie jakie znam. jeszcze jako alt dla obrazka tez mozesz wstawiać zdanie typu "pozostało Ci 20 procent życia" więc będzie też semantycznie


--------------------
profesjonalny webmastering: "save for web > html and images"
Go to the top of the page
+Quote Post
cbagov
post 15.11.2008, 22:47:51
Post #12





Grupa: Zarejestrowani
Postów: 181
Pomógł: 18
Dołączył: 19.04.2008

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

Mozesz tez uzyc rozciaganego czerwonego diva, jesli chcesz 2 kolorowego: to o wysokosci/szerokosci polowy wskaznika i marginie takze szerokosci polowy - 1 obrazek mniej.
Jesli 3 kolory to margin]div[margin itd

I radze nie miec spacji w nazwach plikow, ani duzych liter.
Go to the top of the page
+Quote Post
bim2
post 15.11.2008, 23:09:49
Post #13





Grupa: Zarejestrowani
Postów: 1 873
Pomógł: 152
Dołączył: 9.04.2006
Skąd: Berlin

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

nadal kurczę nie chodzi i nie wiem czemu. Albo jest cały wypełniony, albo w ogóle ;/
http://hernass.pl/css.htm

Ten post edytował bim2 15.11.2008, 23:10:05


--------------------
» Hern.as
» Move to Apple Music
Go to the top of the page
+Quote Post
hiszpanespaniol
post 15.11.2008, 23:17:19
Post #14





Grupa: Zarejestrowani
Postów: 213
Pomógł: 39
Dołączył: 7.04.2008
Skąd: 3city

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

1. nie pisałem "png" tylko "gif"

2. pisałem jeszcze o pozycji tła.

3. Na pewno nie pisałem, zebyś wymieszał background-imagez background-repeat



to są przyczyny. jezeli je usuniesz, będzie działać, gwarantuję, tylko czytaj dokładnie jak ktos radzi


--------------------
profesjonalny webmastering: "save for web > html and images"
Go to the top of the page
+Quote Post
bim2
post 15.11.2008, 23:27:32
Post #15





Grupa: Zarejestrowani
Postów: 1 873
Pomógł: 152
Dołączył: 9.04.2006
Skąd: Berlin

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

Wiesz co, nie rozumiem. smile.gif Możesz mi napisać krok po kroku. Nie pomyliłem repeat z position, tylko złe pliki wgrałem. Na localu miałem poprawnie.

[HTML] pobierz, plaintext 
  1. <style>
  2. img#health {
  3. 	background-image: url(red_health.gif);
  4. 	background-position: 0px 100px;
  5. }
  6. </style>
  7.  
  8. <body>
  9. <img src="border_health.gif" id="health" alt="poziom zdrowia" />
  10. </body>
[HTML] pobierz, plaintext

Zapełnia całe życie, nieważne ile px dam. ;/


--------------------
» Hern.as
» Move to Apple Music
Go to the top of the page
+Quote Post
hiszpanespaniol
post 15.11.2008, 23:37:36
Post #16





Grupa: Zarejestrowani
Postów: 213
Pomógł: 39
Dołączył: 7.04.2008
Skąd: 3city

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

może daj wszystko razem:

[HTML] pobierz, plaintext 
  1. img#health {
  2.  
  3. background: url(red_health.gif) no-repeat scroll 0 100px
  4.  
  5. }
[HTML] pobierz, plaintext


to działa a tamto poprzednie nie wiem czemu nie. jak się dowiem, edytuję post.



edit:

tamto też działa, ale nie było "no-repeat" i pomimo, że obrazek zaczynał się od 100px, to się powtarzał wszędzie smile.gif. problem rozwiązany. prawda, że prościej niż te 3 div'y co były na początku?

Ten post edytował hiszpanespaniol 15.11.2008, 23:41:21


--------------------
profesjonalny webmastering: "save for web > html and images"
Go to the top of the page
+Quote Post
bim2
post 15.11.2008, 23:47:04
Post #17





Grupa: Zarejestrowani
Postów: 1 873
Pomógł: 152
Dołączył: 9.04.2006
Skąd: Berlin

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

bardzo wielkie dzięki smile.gif Trzeba było dodać scroll, bo na FF nie działało.


--------------------
» Hern.as
» Move to Apple Music
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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 Wersja Lo-Fi Aktualny czas: 16.06.2025 - 19:46
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn