Firefox i CSS dla stron
Moderator: Pomocy?!
Posty: 6
• Strona 1 z 1
Firefox i CSS dla stron
autor: ciekawski » 10 grudnia 2008, 20:50
Przeglądarka: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/2008111317 Ubuntu/8.04 (hardy) Firefox/3.0.3 (Linux Mint)
Mam pytanie, jak zrobić żeby przy ładowaniu określonych stron z netu firefox kożystał z moich plikow CSS a nie tych pobranych z servera ?
- ciekawski
Odp: Firefox i CSS dla stron
autor: Gość » 09 sierpnia 2010, 20:11
Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.8) Gecko/20100722 FireDownload/2.0.1 Firefox/3.6.8 ( .NET CLR 3.5.30729)
Czy jest jakaś możliwość stworzenia ramki wokół tła wstawionego za pomocą -moz-border-image ?
Mam obrazek "obraz.png" oraz taki kod w <style>:
#wyroznij:hover{border:3px solid black;
-moz-border-image:url("obraz.png")0 0 0 0 / 0px 0px 0px 0px ;
text-shadow:yellow 0px 0px 5px,yellow 0px 0px 5px;}
oraz w <body>:
<p id="wyroznij">Tekst</p>
Po wskazaniu myszą na napis "obraz.png" ładuje się tak jak powinien, tylko ja chciałbym, aby wokół tego obrazka była również ramka wstawiona do stylu "border:3px solid black" - nie mam pojęcia dlaczego nie jest widoczna.
Problem można częściowo rozwiązać poprzez dorysowanie ręcznie obwódki do "obraz.png" np. w Paincie lub GImpie, ale wtedy podczas skalowania funkcją -moz-border-image ta ramka miałaby różne szerokości - w zależności od treści zawartej między znacznikami <p></p>.
Prosiłbym o poprawienie mojego kodu tak, aby bez względu na rozmiar elementu zawartego miedzy znacznikami <p></p>, dookoła tła z -moz-border-image istniała ramka border:3px solid black.
Mam obrazek "obraz.png" oraz taki kod w <style>:
#wyroznij:hover{border:3px solid black;
-moz-border-image:url("obraz.png")0 0 0 0 / 0px 0px 0px 0px ;
text-shadow:yellow 0px 0px 5px,yellow 0px 0px 5px;}
oraz w <body>:
<p id="wyroznij">Tekst</p>
Po wskazaniu myszą na napis "obraz.png" ładuje się tak jak powinien, tylko ja chciałbym, aby wokół tego obrazka była również ramka wstawiona do stylu "border:3px solid black" - nie mam pojęcia dlaczego nie jest widoczna.
Problem można częściowo rozwiązać poprzez dorysowanie ręcznie obwódki do "obraz.png" np. w Paincie lub GImpie, ale wtedy podczas skalowania funkcją -moz-border-image ta ramka miałaby różne szerokości - w zależności od treści zawartej między znacznikami <p></p>.
Prosiłbym o poprawienie mojego kodu tak, aby bez względu na rozmiar elementu zawartego miedzy znacznikami <p></p>, dookoła tła z -moz-border-image istniała ramka border:3px solid black.
- Gość
Odp: Firefox i CSS dla stron
autor: Grzegorz » 10 sierpnia 2010, 07:13
Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
ramka = frame
obramowanie = border
Co do problemu, niech się wypowie jakiś webmaster.
obramowanie = border
Co do problemu, niech się wypowie jakiś webmaster.
GnuPG. Podpisuję własne wypowiedzi. | TrueCrypt. Ufam kryptografii, nie państwu. | Tor. Dbam o swoją prywatność. | OTR. Moje rozmowy nie są podsłuchiwane.
Załóż konto lub kup domenę WWW z linka polecającego: http://www.hekko.pl/?ref=34295
Załóż konto lub kup domenę WWW z linka polecającego: http://www.hekko.pl/?ref=34295
- Grzegorz
- Moderator
- Posty: 7486
- Z nami od: 15 kwietnia 2007, 12:33
Odp: Firefox i CSS dla stron
autor: MrMistrzuch » 25 sierpnia 2010, 23:30
Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.2.8) Gecko/20100722 FireDownload/2.0.1 Firefox/3.6.8 ( .NET CLR 3.5.30729)
Przyszły mi do głowy trzy rozwiązania, niestety nie są one idealne, dlatego jeśli ktoś znajdzie lepszy sposób aby wokół -moz-border-image zrobić obramowanie niech śmiało pisze.
Tak przy okazji lepiej nie używać <p>...</p> bo z nimi najczęściej są problemy. Lepiej zrobić to za pomocą <br><div>...</div><br>.
1. Najprostszy, bez modyfikacji obrazka. Problem jednak polega na tym, że wykorzystujemy dwa razy polecenie div, tak więc ten sposób działa tylko na stronach, których jesteśmy właścicielami - nie innych nie (mam na myśli modyfikację kodu css za pomocą Stylish):
2. Chcemy, aby wokół naszego obrazka z -moz-border-image było obramowanie, czyli cała powierzchnia w znaczniku <div id="wyroznij">...</div> była pokryta obrazkiem, a wokół niego by było obramowanie (efekt będzie taki sam jak w przykładzie 1.). Takie rozwiązanie może spowodować, że jeżeli wstawimy za duże obramowanie, to może ono się pokryć z elementami sąsiadujacymi z <div id="wyroznij"> (nad, pod i z boków naszego znacznika). Ten sposób jest podobny do domyślnego obramowanie (np. do takiego: <div style="border:3px solid black"> - obramowanie dorysowywane jest od padding:0 (0 - domyślnie) na zewnątrz), lecz w domyślnym nigdy nie zdarzy nam się, aby obramowanie nakładało się na sąsiednie elementy (o ile oczywiście tego sami nie zmienimy), ponieważ mamy ustalony jeszcze margin:0 (0 - domyślnie). Tutaj sprawa wygląda inaczej - trzeba uważać na to. Można to oczywiście zmienić za pomogą poleceń maring i padding. A wracając do przykładu:
Jeżeli nasz obrazek ma wymiary 100x200, a my chcemy żeby wokół niego było obramowanie 3px, to zmieniamy jego wymiary na 106x206, ale nie skalujemy go, tylko dodajemy wolne przestrzenie po 3px z każdej strony. Następnie zamalowujemy te przestrzenie na taki kolor, jakim ma być nasze obramowanie. Teraz umieszczamy taki kod:
3. Chcemy, aby nasze obramowanie mieściło się w obrębie znacznika <div id="wyroznij">, który ma mieć taką wysokość, jaką ma najwyższy element w grupie + ustalony padding. Obramowanie do wewnątrz to rzadko spotykany sposób obramowania, ale podaję, bo może komuś się przydać. Takie rozwiązanie może spowodować, że jeżeli wstawimy za duże obramowanie, to może ona pokryć się z elementami zawartymi wewnątrz znacznika <div id="wyroznij">, a w skrajnym przypadku zamknąć się ze sobą, tworząc jednokolorowy prostokąt (takiej wysokości jak najwyższy element w tym znaczniki + podany padding dla tego znacznika, i kolorze obramowania dorysowanym ręcznie). Niestety tej metody również nie wykorzystamy cudzych stronach:
Jeżeli nasz obrazek ma wymiary 100x200, a my chcemy żeby wokół niego było obramowanie 3px, to zmieniamy jego wymiary na 106x206, ale nie skalujemy go, tylko dodajemy wolne przestrzenie po 3px z każdej strony. Następnie ponownie zmieniamy jego wymiary, tym razem na na 112x212, również nie skalujemy, tylko dodajemy wolne przestrzenie po 3px z każdej strony. Tym razem jednak mają to być powierzchnie przezroczyste (dla plików png jest to kanał alfa). Potrzebujemy tego, aby spod tych powierzchni było widać właściwe tło strony. Tak więc "idą od góry obrazka" napotkamy się na 3px przestrzenie przezroczystej (kanał alfa), 3px przestrzenie w takim kolorze, w jakim ma być nasze obramowanie, 100px obrazka właściwego, ponownie 3px przestrzenie w kolorze obramowanie i znów 3px kanału alfa:
Tak przy okazji lepiej nie używać <p>...</p> bo z nimi najczęściej są problemy. Lepiej zrobić to za pomocą <br><div>...</div><br>.
1. Najprostszy, bez modyfikacji obrazka. Problem jednak polega na tym, że wykorzystujemy dwa razy polecenie div, tak więc ten sposób działa tylko na stronach, których jesteśmy właścicielami - nie innych nie (mam na myśli modyfikację kodu css za pomocą Stylish):
- Kod: Zaznacz cały
#pomoc:hover{border:3px solid black;
margin:-3px}
#wyroznij:hover{-moz-border-image:url(obraz.png) 0 0 0 0 / 0 0 0 0;
text-shadow:yellow 0px 0px 5px,yellow 0px 0px 5px}
...
<br><div id="pomoc"><div id="wyroznij">Napis</div></div><br>
2. Chcemy, aby wokół naszego obrazka z -moz-border-image było obramowanie, czyli cała powierzchnia w znaczniku <div id="wyroznij">...</div> była pokryta obrazkiem, a wokół niego by było obramowanie (efekt będzie taki sam jak w przykładzie 1.). Takie rozwiązanie może spowodować, że jeżeli wstawimy za duże obramowanie, to może ono się pokryć z elementami sąsiadujacymi z <div id="wyroznij"> (nad, pod i z boków naszego znacznika). Ten sposób jest podobny do domyślnego obramowanie (np. do takiego: <div style="border:3px solid black"> - obramowanie dorysowywane jest od padding:0 (0 - domyślnie) na zewnątrz), lecz w domyślnym nigdy nie zdarzy nam się, aby obramowanie nakładało się na sąsiednie elementy (o ile oczywiście tego sami nie zmienimy), ponieważ mamy ustalony jeszcze margin:0 (0 - domyślnie). Tutaj sprawa wygląda inaczej - trzeba uważać na to. Można to oczywiście zmienić za pomogą poleceń maring i padding. A wracając do przykładu:
Jeżeli nasz obrazek ma wymiary 100x200, a my chcemy żeby wokół niego było obramowanie 3px, to zmieniamy jego wymiary na 106x206, ale nie skalujemy go, tylko dodajemy wolne przestrzenie po 3px z każdej strony. Następnie zamalowujemy te przestrzenie na taki kolor, jakim ma być nasze obramowanie. Teraz umieszczamy taki kod:
- Kod: Zaznacz cały
#wyroznij:hover{-moz-border-image:url(obraz2.png)3 3 3 3 / 3px 3px 3px 3px;
margin:-3px;
text-shadow:yellow 0px 0px 5px,yellow 0px 0px 5px}
...
<br><div id="wyroznij">Tekst</div><br>
3. Chcemy, aby nasze obramowanie mieściło się w obrębie znacznika <div id="wyroznij">, który ma mieć taką wysokość, jaką ma najwyższy element w grupie + ustalony padding. Obramowanie do wewnątrz to rzadko spotykany sposób obramowania, ale podaję, bo może komuś się przydać. Takie rozwiązanie może spowodować, że jeżeli wstawimy za duże obramowanie, to może ona pokryć się z elementami zawartymi wewnątrz znacznika <div id="wyroznij">, a w skrajnym przypadku zamknąć się ze sobą, tworząc jednokolorowy prostokąt (takiej wysokości jak najwyższy element w tym znaczniki + podany padding dla tego znacznika, i kolorze obramowania dorysowanym ręcznie). Niestety tej metody również nie wykorzystamy cudzych stronach:
Jeżeli nasz obrazek ma wymiary 100x200, a my chcemy żeby wokół niego było obramowanie 3px, to zmieniamy jego wymiary na 106x206, ale nie skalujemy go, tylko dodajemy wolne przestrzenie po 3px z każdej strony. Następnie ponownie zmieniamy jego wymiary, tym razem na na 112x212, również nie skalujemy, tylko dodajemy wolne przestrzenie po 3px z każdej strony. Tym razem jednak mają to być powierzchnie przezroczyste (dla plików png jest to kanał alfa). Potrzebujemy tego, aby spod tych powierzchni było widać właściwe tło strony. Tak więc "idą od góry obrazka" napotkamy się na 3px przestrzenie przezroczystej (kanał alfa), 3px przestrzenie w takim kolorze, w jakim ma być nasze obramowanie, 100px obrazka właściwego, ponownie 3px przestrzenie w kolorze obramowanie i znów 3px kanału alfa:
- Kod: Zaznacz cały
#pomoc:hover{-moz-border-image:url(obraz3.png) 6 6 6 6 / 6px 6px 6px 6px;
margin:-3px}
#wyroznij:hover{margin:-6px;
padding:3px;
text-shadow:yellow 0px 0px 5px,yellow 0px 0px 5px}
...
<br><div id="pomoc"><div id="wyroznij">Tekst</div></div><br>
- MrMistrzuch
- Posty: 14
- Z nami od: 25 sierpnia 2010, 22:49
- Lokalizacja: Warszawa
Posty: 6
• Strona 1 z 1
Kto jest online
Zarejestrowani użytkownicy: Baidu [Spider], Google [Bot], Majestic-12 [Bot]