Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Zmienne (w) CSS, Unikalne wykorzystanie CSS
Tomplus
post
Post #1





Grupa: Zarejestrowani
Postów: 1 884
Pomógł: 231
Dołączył: 20.03.2005
Skąd: Będzin

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

Witam,
Myślę, że uda się mi się tutaj znaleźć pomoc i może ktoś inny również z korzysta z tego :)

Ostatnio zacząłem korzystać z nie których rzadkich attrybutów styli CSS np. content podczas
Zrobiłem sobie taką stronę testową: http://www.swos.pl/temp/css/testcss.html
a poniżej kod całej strony [skrócony o przykładowe texty i tagi]:


[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Test CSS</title>
  4. <style type="text/css">
  5. body {
  6.      background: url(t.gif);
  7. }
  8. .note, .note-title, .note-news { 
  9.      background: transparent; 
  10.      border: 1px solid #DDD; 
  11.      color: #999; 
  12.      font-size: .9em; 
  13.      padding: 2px 4px 2px 34px; 
  14. }
  15. .note { 
  16.      background: url(' ' attr(src) ' ') no-repeat 8px 50%;
  17. }
  18. .note-title { 
  19.      background: url(k.png) no-repeat 8px 50%;
  20.      color: #66B; 
  21. }
  22. .note-news { 
  23.     padding: 2px 4px 2px 4px; 
  24. }
  25. .note:before { 
  26.      background: transparent;
  27.      color: #9995DD;  
  28.      content: ' ' attr(title) ' ';
  29.      color: ' ' attr(color) ' ';  
  30.      background-image: url(' ' attr(src) ' ');
  31.      border-color: ' ' attr(color) ' ';
  32.      font-weight: bold; 
  33. }
  34.  
  35. p.note-news:before { 
  36.      background: transparent; 
  37.      color: #a96; 
  38.      content: 'NEWS: ';
  39.      font-weight: bold; 
  40. }
  41. p.note-title:before { 
  42.      background: transparent; 
  43.      color: #369; 
  44.      content: 'Tytuł: ';
  45.      font-weight: bold; 
  46. }
  47. .note:hover, .note-title:hover { 
  48.      border: 1px solid #999500; 
  49.      color: #666; 
  50. }
  51. .note-news:hover { 
  52.      border: 1px solid #666; 
  53.      color: #666; 
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <p class="note-title">O Łagiszy</p>
  59. <p class="note" title="Łagisza">W 1969 roku w wielu gazetach pisano o Łagiszy.</p>
  60. <p class="note-news">Z dniem pierwszego stycznia 1969 r, utraciłem definitywnie swoje wiejskie pochodzenie. Moja rodzinna wieś Łagisza w powiecie będzińskim.</p>
  61. <p class="note" title="Notka" src="quote.gif">W 1969 roku w wielu gazetach pisano o Łagiszy. </p>
  62.  
  63. </body>
  64. </html>
[HTML] pobierz, plaintext



Prosiłbym o skupienie się nad takimi miejscami jak title w tagach <p>

Dzięki tej własności wyświetla się tytuł odrazu na stronie, jako TEXT któru nie daje się skopiować jak zwykły text czy obrazek. Jest wygodne bo gdy user chce skopiować jakiś text, nie musi zaprzątać sobie głowy nie którymi "śmieciami".

Jednak ja chciałbym tą wygodę sobie rozszerzyć o inne elementy np. grafikę i kolory.
Szczególnie to pierwsze.

Nie chce tworzyć kolejnych wpisów jak przy klasa .note-news i .note-title, ale tak że za każdym razem gdy będzie tego potrzeba będę mógł zmienić grafikę/małą ikonkę przy wpisie.

Dlatego pytam się jak zrobić aby jakaś nowa grafika/kolor mógł się wyświetlić tak jak tytuł fragmentu textu czyli przy pomocy takich atrybutów jak ' ' attr(title) ' ', gdyż zastosowanieczegoś podobnego attr(src) nie działa?

Ten post edytował Tomplus 6.08.2008, 16:17:07
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
.radex
post
Post #2





Grupa: Zarejestrowani
Postów: 1 657
Pomógł: 125
Dołączył: 29.04.2006

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

Cytat(Tomplus @ 6.08.2008, 17:16:15 ) *
Dzięki tej własności wyświetla się tytuł odrazu na stronie, jako TEXT któru nie daje się skopiować jak zwykły text czy obrazek. Jest wygodne bo gdy user chce skopiować jakiś text, nie musi zaprzątać sobie głowy nie którymi "śmieciami".

Jednak ja chciałbym tą wygodę sobie rozszerzyć o inne elementy np. grafikę i kolory.
Szczególnie to pierwsze.

Nie chce tworzyć kolejnych wpisów jak przy klasa .note-news i .note-title, ale tak że za każdym razem gdy będzie tego potrzeba będę mógł zmienić grafikę/małą ikonkę przy wpisie.

Dlatego pytam się jak zrobić aby jakaś nowa grafika/kolor mógł się wyświetlić tak jak tytuł fragmentu textu czyli przy pomocy takich atrybutów jak ' ' attr(title) ' ', gdyż zastosowanieczegoś podobnego attr(src) nie działa?


Grafika, tzn? obrazek, czy ścieżka? Nie jestem pewien (rzadko korzystam z właściwość content), ale content chyba nie pozwala na HTML-a. Kolor, co masz na myśli? Coś w stylu #ffffff? Jeśli tak, to raczej Ci się to nie uda za pomocą CSS-a, bo attr jest od HTML-owskich atrybutów, a nie znam żadnego odpowiednika przeznaczonego do właciwości CSS.

Natomiast jesteś w błędzie jeśli chodzi o fragment "Dzięki tej własności wyświetla się tytuł odrazu na stronie, jako TEXT któru nie daje się skopiować jak zwykły text czy obrazek. Jest wygodne bo gdy user chce skopiować jakiś text, nie musi zaprzątać sobie głowy nie którymi "śmieciami"." - to, że Firefox nie uznaje tego jako tekst możliwy do skopiowania, nie oznacza, że z innymi przeglądarkami jest tak samo. Tak na prawdę większość osób uważa to za bug firefoksa.
Go to the top of the page
+Quote Post

Posty w temacie
- Tomplus   Zmienne (w) CSS   6.08.2008, 16:16:15
- - radex_p   Cytat(Tomplus @ 6.08.2008, 17:16:15 )...   6.08.2008, 16:53:21
- - Tomplus   Jeżeli jest to bug Firefoxa, to również Opery, bo ...   6.08.2008, 23:39:31
|- - .radex   Cytat(Tomplus @ 7.08.2008, 00:39:31 )...   7.08.2008, 21:22:26
- - Tomplus   Opera 9.5 historyczna ? mniejsza. Jednakze właśn...   8.08.2008, 10:05:50

« Następny starszy · CSS · 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: 7.10.2025 - 09:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn