[HTML][CSS]Ramka z obrazkami
- Thread starter H4eX
- Rozpoczęty
Boobie
Użytkownik
- Dołączył
- Lipiec 25, 2008
- Posty
- 195
hxv
Były Moderator
- Dołączył
- Sierpień 9, 2006
- Posty
- 797
Jeśli chcesz to koniecznie w jednym divie to będziesz musiał skorzystać z multiple background dostępnego w CSS3 (na razie obsługują to Opera, Firefox i Chrome):
HTML:
<html>
<head>
<style>
.box{
background: url('top.gif') top left no-repeat, /* obrazek widoczny na gorze */
url('bottom.gif') bottom left no-repeat, /* obrazek widoczny na dole */
url('middle.gif') repeat-y; /* obrazek pod tekstem */
width: 434px; /* szerokosc */
padding-top: 41px; /* wysokosc obrazke z gory */
padding-bottom: 41px; /* wysokosc obrazka z dolu */
}
</style>
</head>
<body>
<div class="box">tekst</div>
</body>
</html>hxv
Były Moderator
- Dołączył
- Sierpień 9, 2006
- Posty
- 797
Jeśli nie działa to:
a) źle wstawiłeś adresy obrazków
b) masz za starą wersję Firefoxa
U mnie na 3.6.4 wygląda to tak:
Sprawdź sam
a) źle wstawiłeś adresy obrazków
b) masz za starą wersję Firefoxa
U mnie na 3.6.4 wygląda to tak:
Sprawdź sam
hxv
Były Moderator
- Dołączył
- Sierpień 9, 2006
- Posty
- 797
Najprościej w JS będzie to zrobić przy użyciu czegoś w stylu jQuery - jest kompatybilne ze wszystkimi przeglądarkami i może zastąpić funkcję której IE nie obsługuje a która tutaj bardzo by się przydała - getElementsByClassName. Jeśli mnie pamięć nie myli, to aby pobrać wszystkie elementy o danej klasie wystarczyło napisać
Do tego wystarczy dołożyć funkcje after i before i można zamknąć to wszystko w 2 linijkach kodu.
Kod:
$('.klasa')