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
Tomplus
post
Post #2





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

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

Jeżeli jest to bug Firefoxa, to również Opery, bo działa tak samo.

Co do słów umieścić grafikę - Tak, chcę w HTML wpisać w tagu np. <p src="sciezka"> i działało jak obrazek który dałbym odrazu w stylach CSS.
Podobnie z kolorami czy to rgb, hex czy zwykle text.

Standardowo można byłoby zrobić to w dwóch sposobach:
- dodając n-ty razy style CSS o innych nazwach i podopbnych właściwościach - nawet zapętlając przy pomocy PHP
- dodać <img/> i nadać grafice odpowiednie właściwości w stylach.

jednakże nie o to chodzi, wlaśnie chce wykorzystać tą ciekawą właściwość która z attrybutów osadzonych w HTML, przenosi je do CSS. Tak jak to się dzieje z "title"
Go to the top of the page
+Quote Post
.radex
post
Post #3





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

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

Cytat(Tomplus @ 7.08.2008, 00:39:31 ) *
Jeżeli jest to bug Firefoxa, to również Opery, bo działa tak samo.

Co do słów umieścić grafikę - Tak, chcę w HTML wpisać w tagu np. <p src="sciezka"> i działało jak obrazek który dałbym odrazu w stylach CSS.
Podobnie z kolorami czy to rgb, hex czy zwykle text.

Standardowo można byłoby zrobić to w dwóch sposobach:
- dodając n-ty razy style CSS o innych nazwach i podopbnych właściwościach - nawet zapętlając przy pomocy PHP
- dodać <img/> i nadać grafice odpowiednie właściwości w stylach.

jednakże nie o to chodzi, wlaśnie chce wykorzystać tą ciekawą właściwość która z attrybutów osadzonych w HTML, przenosi je do CSS. Tak jak to się dzieje z "title"


Mylisz się. W Operze można ten tekst skopiować bez problemów (chyba, że masz jakąś historyczną wersję).

Ostrzegam przed zbyt dużym wykorzystywaniem tych bajerów CSS. Jeśli content będzie wyświetlało tekst istotny dla zrozumienia całego sensu to będzie to niesemantyczne. Oczywiście teksty typu "Treść:" przed treścią, "Data:" przed datą, urozmaicenia nagłówków typu "..::sam nagłówek::.." są jak najbardziej ok i prawdopodobnie właśnie do takich rzeczy zostało to stworzone.
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: 6.10.2025 - 18:44
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn