Forum PHP.pl > [CSS][rozwiązany] Nakładka na obrazek

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][rozwiązany] Nakładka na obrazek

bim2

15.11.2008, 15:40:43

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 
<html>
<head>
<style>
#health {
	height: 334px;
	width: 18px;
}
#health_bar {
	height: 34px;
	padding-top: 300px;
	width: 18px;
	background: url('HP-pasek_04.gif') repeat-y;
	float: left;
}
#border_health {
	height: 334px;
	width: 18px;
	background: url('HP pasek.png');
	float: left;
	z-index: 1000;
}
</style>
</head>
<body>
<div id="health"><div id="health_bar"><div id="border_health"></div></div></div>
</body>
</html>
[HTML] pobierz, plaintext

ayeo

15.11.2008, 15:48:37

Witam!

Zmień padding-top: 300; na 0

Pozdrawiam!

edit:

[HTML] pobierz, plaintext 
<style>
#health {
    position: relative;
    height: 334px;
    width: 18px;
}
#health_bar {
    height: 34px;
    padding-top: 0px;
    width: 18px;
    background: url('HP-pasek_04.gif') repeat-y 0 bottom;
    position: absolute;
    bottom: 0;
    left: 0;
}
#border_health {
    position: absolute;
    top: 0;
    left: 0;
    height: 334px;
    width: 18px;
    background: url('HP pasek.png');
 
 
}
</style>
 
<body>
 <div id="health">
  <div id="health_bar"></div>
  <div id="border_health"></div>
 </div>
</body>
[HTML] pobierz, plaintext

kleszczoscisk

15.11.2008, 15:50:04

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

moze tak ?

bim2

15.11.2008, 15:50:06

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

@up
Tak banalne, że aż się dziwie że zapomniałem o tym.

Należyte pomógł. :]

EDIT:
A co z IE?

http://hernass.pl/css.htm Ucina mi paseczek

ayeo

15.11.2008, 15:54:29

look wyżej, dałem edycję

bim2

15.11.2008, 20:11:22

No niby tak się da, ale jak bez position absolute, ani relative?

Taki trening sobie wymysliłem :]

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

Jednak nadal mam problem

Nie może być absolute

bo nie działa. http://web.altaron.pl</a> -> abcd1/abdc1 -> zakładka Client

hiszpanespaniol

15.11.2008, 21:22:08

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 
<style type="text/css">
 
img#health {
 
background-image: url(czerwona-linia-zycia.gif);
 
background-position: 0px 50px;
 
}
 
</style>
 
<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

-rogal-

15.11.2008, 21:27:39

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ć?

Mize

15.11.2008, 21:36:54

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

bim2

15.11.2008, 21:44:25

Ale, ja chce mieć to obramowanie

hiszpanespaniol

15.11.2008, 21:48:53

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

cbagov

15.11.2008, 22:47:51

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.

bim2

15.11.2008, 23:09:49

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

hiszpanespaniol

15.11.2008, 23:17:19

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

bim2

15.11.2008, 23:27:32

Wiesz co, nie rozumiem.

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 
<style>
img#health {
	background-image: url(red_health.gif);
	background-position: 0px 100px;
}
</style>
 
<body>
<img src="border_health.gif" id="health" alt="poziom zdrowia" />
</body>
[HTML] pobierz, plaintext

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

hiszpanespaniol

15.11.2008, 23:37:36

może daj wszystko razem:

[HTML] pobierz, plaintext 
img#health {
 
background: url(red_health.gif) no-repeat scroll 0 100px
 
}
[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

. problem rozwiązany. prawda, że prościej niż te 3 div'y co były na początku?

bim2

15.11.2008, 23:47:04

bardzo wielkie dzięki

Trzeba było dodać scroll, bo na FF nie działało.

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.