Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][rozwiązany] Nakładka na obrazek
bim2
post
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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
hiszpanespaniol
post
Post #2





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

Posty w temacie
- bim2   [CSS][rozwiązany] Nakładka na obrazek   15.11.2008, 15:40:43
- - ayeo   Witam! Zmień padding-top: 300; na 0 P...   15.11.2008, 15:48:37
- - kleszczoscisk   [HTML] pobierz, plaintext #border_health { heig...   15.11.2008, 15:50:04
- - bim2   Tylko, że teraz czerwony pasek idzie od góry,...   15.11.2008, 15:50:06
- - ayeo   look wyżej, dałem edycję   15.11.2008, 15:54:29
- - bim2   No niby tak się da, ale jak bez position abso...   15.11.2008, 20:11:22
- - hiszpanespaniol   po co tyle div'ów, marginesów i absolutów? mo...   15.11.2008, 21:22:08
- - -rogal-   o0 przydałby mi się taki kodzik, ale jak do tego w...   15.11.2008, 21:27:39
- - Mize   Obliczasz % i odpowiednio do tego długość paska ży...   15.11.2008, 21:36:54
- - bim2   Ale, ja chce mieć to obramowanie   15.11.2008, 21:44:25
- - hiszpanespaniol   nic nie stracisz. 1. tworzysz gif wyglądający ide...   15.11.2008, 21:48:53
- - cbagov   Mozesz tez uzyc rozciaganego czerwonego diva, jesl...   15.11.2008, 22:47:51
- - bim2   nadal kurczę nie chodzi i nie wiem czemu. Alb...   15.11.2008, 23:09:49
- - hiszpanespaniol   1. nie pisałem "png" tylko "gif...   15.11.2008, 23:17:19
- - bim2   Wiesz co, nie rozumiem. Możesz mi napisać krok po...   15.11.2008, 23:27:32
- - hiszpanespaniol   może daj wszystko razem: [HTML] pobierz, plaintex...   15.11.2008, 23:37:36
- - bim2   bardzo wielkie dzięki Trzeba było dodać scroll, b...   15.11.2008, 23:47:04

« Następny starszy · Przedszkole · 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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