Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

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





Grupa: Zarejestrowani
Postów: 1 879
Pomógł: 230
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 (1 - 4)
.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
Tomplus
post
Post #3





Grupa: Zarejestrowani
Postów: 1 879
Pomógł: 230
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 #4





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





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

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

Opera 9.5 historyczna ? mniejsza.


Jednakze właśnie do takich rzeczy potrzebuje. Wykorzystanie textu do własnie takich rzeczy, które są informacyjne a zarazem nie potrzebne w toku przetwarzania całego tekstu.
Taki sam skutek chciałem osiągnąć aby móc dodać grafike.

content umożliwia dodawanie grafiki

[HTML] pobierz, plaintext 
  1. p:before {
  2. content url("grafika.png");
  3. }
[HTML] pobierz, plaintext

ale znów wykorzystując attr(title) czy attr(src) nie dodaje mi żadnej informacji.

Szukając w Google nic nie znalazłem ciekawego na ten problem, tylko tyle co ja wiem i sam wymyśliłem również. Jednak wiem że jest mnóstwo sztuczek które czasami nikt ich nie odkrył.
Go to the top of the page
+Quote Post
« 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 · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 04:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn