GoldenLine
Zaloguj się
Wojciech Małota

Wojciech Małota Programista

Temat: Niewidoczny tekst

Witajcie,

Często jest tak, że chcę aby na stronie była jakaś ikonka symbolizująca jakiś element. Chcę, żeby dla normalnego usera był to obrazek ale żeby po wyłączeniu styli żeby zamiast obrazka pokazywał się tekst.

W przypadku gdy opisywana rzecz dotyczy pola formularza to wygląda to mniej więcej tak:



<label class="icon" for="fieldId"><span>Tekst</span></label>


W stylach daję:



label.icon { background: url('icon.gif') center center; background-repeat: no-repeat; display: inline-block; width: 15px; height: 15px; }

label.icon span { display: none; }


Czasem chcę żeby ikonka była linkiem wtedy zamiast elementu label używam a. No i działa tak jak chcę. Jednak mam fioła na punkcie używania nadmiarowych elementów. A ten span w zasadzie nie jest do niczego potrzebny, zwłaszcza w sytuacjach kiedy owy tekst chcę ukrywać tylko czasami, a kod html jest generowany przez uniwersalną klasę zaś całą sprawę wyglądu regulują style.

Chciałbym aby kod html wyglądał tak:



<label class="icon" for="fieldId">Tekst</label>


W takim wypadku próbowałem ukryć tekst przez ustawienie ejgo koloru na przezroczysty:



label.icon { color: transparent; }


Niestety działa to tylko w Firefoxie i Safari.

Ktoś może opanował taki trick? Może jednak nie da się tego zrobić?
Link do wypowiedziLink

konto usunięte

Temat: Niewidoczny tekst

Wojciech Małota:
... Chcę, żeby dla normalnego usera był to obrazek ale żeby po wyłączeniu styli żeby zamiast obrazka pokazywał się tekst....


w sensie 2 przypadki wyswietlania label'a:

<style>

label.icon { background: url('icon.gif') top left; 

background-repeat: no-repeat; display: inline-block;

 width: 15px; 	height: 15px; overflow:hidden;

 line-height:50px;}

</style>





<label class="icon" for="fieldId">Tekst</label><br /><br />

<label for="fieldId">Tekst</label>
Krzysztof Tomczyk edytował(a) ten post dnia 21.09.08 o godzinie 20:24
Link do wypowiedziLink
Krzysztof Safjanowski

Krzysztof Safjanowski Senior JavaScript
Lead Developer

Temat: Niewidoczny tekst

Obrazek przy wlaczonych stylach, tresc label’a przy wylaczonych:

CSS:


label {overflow: hidden; width: __; height: __; text-indent: -665em; background: url(__) __ __ no-repeat;}


oraz HTML:


<label for="lorem">Ipsum dolor sit amet</label>
Krzysztof Safjanowski edytował(a) ten post dnia 21.09.08 o godzinie 20:45
Link do wypowiedziLink
Wojciech Małota

Wojciech Małota Programista

Temat: Niewidoczny tekst

O dzięki!
Nie wpadłem na użycie overflow :-).
Link do wypowiedziLink

konto usunięte

Temat: Niewidoczny tekst

1. A czemu nie img z odpowiednim alt? :)
2. Warto pamiętać nie tylko o sytuacji, kiedy wyłączone są style, a obrazki (style włączone).
3. Każda technika Image Replacement ma wady: http://www.mezzoblue.com/tests/revised-image-replacement/. Dla mnie mniejszą wadą jest nadmiarowy span niż mniejsza dostępność.
4. A może jednak w tej sytuacji img? :) Żeby się nie powtarzać: http://42.pl/u/116LBogdan Baraszkiewicz edytował(a) ten post dnia 22.09.08 o godzinie 12:20
Link do wypowiedziLink
Michał Zwoliński

Michał Zwoliński vojo w języku
esperanto to droga
:)

Temat: Niewidoczny tekst

W takim razie <label><img/></label>, tyle że tutaj będzie miał nadmiarowy tag jeśli będzie chciał zostać przy tekście.
Z drugiej strony jeśli pozbędzie się <label> na rzecz <img/> straci tą miłą funkcjonalność klikania na obrazek i uzyskania przy tym focusa na polu tekstowym.
Link do wypowiedziLink
Wojciech Małota

Wojciech Małota Programista

Temat: Niewidoczny tekst

Chcę mieć ładny label, który w normalnym przypadku jest ikonką, a bez styli jest zwykłym tekstem. Ukrycie tekstu i ustawienie obrazka jako tło jest według mnie idealnym rozwiązaniem. Analogicznie postępuję w przypadkach kiedy chcę mieć ikonkę będącą odnośnikiem (wykonującą po kliknięciu jakąś akcję). Wtedy zamiast label stosuję "a".
Link do wypowiedziLink

konto usunięte

Temat: Niewidoczny tekst

Michał Zwoliński:
W takim razie <label><img/></label>, tyle że tutaj będzie miał nadmiarowy tag jeśli będzie chciał zostać przy tekście.

Jaki nadmiarowy?
Link do wypowiedziLink

konto usunięte

Temat: Niewidoczny tekst

Wojciech Małota:
Chcę mieć ładny label, który w normalnym przypadku jest ikonką, a bez styli jest zwykłym tekstem. Ukrycie tekstu i ustawienie obrazka jako tło jest według mnie idealnym rozwiązaniem. Analogicznie postępuję w przypadkach kiedy chcę mieć ikonkę będącą odnośnikiem (wykonującą po kliknięciu jakąś akcję). Wtedy zamiast label stosuję "a".

W takich sytuacjach powinieneś użyć właśnie img. Co z nim nie tak, oprócz tego, że bez styli też zobaczysz obrazek?Bogdan Baraszkiewicz edytował(a) ten post dnia 22.09.08 o godzinie 12:48
Link do wypowiedziLink
Michał Zwoliński

Michał Zwoliński vojo w języku
esperanto to droga
:)

Temat: Niewidoczny tekst

W sumie to nie rozumiem po co Ci ten tekst Wojtek. Faktycznie nalepiej będzie skorzystać ze zwykłego obrazka, on się załaduje bez względu na to czy style są włączone.
Link do wypowiedziLink
Wojciech Małota

Wojciech Małota Programista

Temat: Niewidoczny tekst

Michał Zwoliński:
W sumie to nie rozumiem po co Ci ten tekst Wojtek. Faktycznie nalepiej będzie skorzystać ze zwykłego obrazka, on się załaduje bez względu na to czy style są włączone.

Tylko, że jak mi nagle przyjdzie na myśl, że chciałbym żeby jednak pokazywał się sam tekst ebz obrazka albo tekst obok obrazka po lewej lub prawej stronie albo tekst pod/nad obrazkiem to będę musiał przekopywać całą wielką aplikację, a tak tylko sobie style pozmieniam. Chyba właśnie po to je wymyślono, nie?

Poza tym zawsze XHTMLa rozumiałem mniej więcej w ten sposób:
"Użyj nagłówka jeżeli chcesz pokazać nagłówek, użyj listy jeżeli chcesz pokazać listę, użyj obrazka jeżeli chcesz pokazać obrazek"

Używanie tagu <img> jako przycisku/linka/opisu/wywoływacza pewnej akcji przez kliknięcie wydaje mi się niezgodne z duchem xhtmla.
Obrazek, który służy zdefiniowaniu wyglądu (a nie pokazania na zdjęcia/schematu/wykresu etc.) powinien według mnie być realizowany właśnie przez css.
Link do wypowiedziLink
Michał Zwoliński

Michał Zwoliński vojo w języku
esperanto to droga
:)

Temat: Niewidoczny tekst

Jeśli faktycznie przewidujesz możliwość takich zmian to jak najbardziej masz rację i wykorzystaj css.
W takim wypadku również możesz skorzystać z tagu img i dać coś takiego


label img {

display: none;

}

Jeśli wolisz mniej tagów to oprzyj wszystko na label i css. Sam wybierz najlepsze rozwiązanie. Tekst już potrafisz ukryć.
Link do wypowiedziLink

konto usunięte

Temat: Niewidoczny tekst

Wojciech Małota:
W sumie to nie rozumiem po co Ci ten tekst Wojtek. Faktycznie nalepiej będzie skorzystać ze zwykłego obrazka, on się załaduje bez względu na to czy style są włączone.

Tylko, że jak mi nagle przyjdzie na myśl, że chciałbym żeby jednak pokazywał się sam tekst ebz obrazka albo tekst obok obrazka po lewej lub prawej stronie albo tekst pod/nad obrazkiem to będę musiał przekopywać całą wielką aplikację, a tak tylko sobie style pozmieniam. Chyba właśnie po to je wymyślono, nie?

A jak zdecydujesz zmienić treść labela, to co wg. idei rozdzielenia warstwy treści od prezentacji powinieneś modyfikować?
Poza tym zawsze XHTMLa rozumiałem mniej więcej w ten sposób:
"Użyj nagłówka jeżeli chcesz pokazać nagłówek, użyj listy jeżeli chcesz pokazać listę, użyj obrazka jeżeli chcesz pokazać obrazek"

Nikt nie broni Ci użyć nagłówka czy listy. Tylko jeśli treścią tego nagłówka czy elementem listy jest obrazek, to używa się obrazka w nagłówku/liście.
Używanie tagu <img> jako przycisku/linka/opisu/wywoływacza pewnej akcji przez kliknięcie wydaje mi się niezgodne z duchem xhtmla.

Po pierwsze, wywoływanie akcji przez kliknięcie to zadanie przycisków. Do przyciksów jest <input type="text"> albo button. Dla graficznych przycisków jest <input type="image">

Dla etykiet formularza jest label, w którym podaje się opis pola. Jeśli u Ciebie opisem pola jest ikona, to powinno się wstawić img.
Obrazek, który służy zdefiniowaniu wyglądu (a nie pokazania na zdjęcia/schematu/wykresu etc.) powinien według mnie być realizowany właśnie przez css.

Jeśli to dekoracja elementu, to tak. U Ciebie ten obrazek niesie ze sobą treść (nie jest dekoracją tekstu w labelu, a sam w sobie jest labelem pola formularza).
Link do wypowiedziLink
Wojciech Małota

Wojciech Małota Programista

Temat: Niewidoczny tekst

Hehhe. Widzę, że rozpętała się akademicka dyskusja :-).
Jeśli o mnie chodzi to ja już znalazłem to czego szukałem :-).
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Tekst dopasowny do komiksow...




Wyślij zaproszenie do
Anuluj