• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Kropki dookoła zdjęcia. Jak pozbyć się tej usterki?

0 głosów
95 wizyt
pytanie zadane 28 czerwca 2016 w HTML i CSS przez Krzysiek_34 Gaduła (3,340 p.)
zamknięte 29 czerwca 2016 przez Krzysiek_34

Witam.

Gdy wchodzę na podstronę nr 1, to mam kilka zdjęć i gdy kliknę na obojętnie jakie zdjęcie, to wchodzę na podstronę nr 2. Będąc na podstronie nr 2, gdy kliknę w przeglądarce "Przejdź do poprzedniej strony" w celu powrotu na podstronę nr 1, to dookoła tego konkretnego zdjęcia znajdują się kropki. Wysokość zdjęć to 143px, a te kropki znajdują się jeszcze pod zdjęciem, czyli wysokość kropek to ok 150px. Co do szerokości, to te kropki przylegają do zdjęcia.

<a href="podstrona2/podstrona2.php">
		<img class="images" src="obrazki/obrazek1.jpg"></img>
</a>
.images
{
	width: 100px;
	height: 143px;
	border: 2px solid #000000;
}

.images:hover
{
	border: 2px solid #FF0000;
	cursor: pointer;
}

Co muszę poprawić w kodzie, aby te kropki zniknęły?

komentarz zamknięcia: Problem został rozwiązany i temat uważam za zamknięty.

2 odpowiedzi

+2 głosów
odpowiedź 28 czerwca 2016 przez Comandeer Ekspert (346,680 p.)

Te kropki to najprawdopodobniej outline, czyli ważna rzecz z punktu widzenia dostępności. To nie jest usterka.

Jeśli chcesz się tego pozbyć, proponuję przepisać style z :hover także dla :focus i usunąć outline dla TEGO KONKRETNEGO linka.

komentarz 28 czerwca 2016 przez Krzysiek_34 Gaduła (3,340 p.)

To tak, jakby domyślnie był ustawiony styl:

outline-style: dotted;

czyli kropkowany styl zarysu.

 

Muszę brać pod uwagę tylko:

outline-style: none;

aby usunąć ten zarys.

2
komentarz 28 czerwca 2016 przez Comandeer Ekspert (346,680 p.)

Jest w Firefoksie, bo – jak mówiłem – outline jest ważną częścią mechanizmów dostępności → http://outlinenone.com

komentarz 28 czerwca 2016 przez Krzysiek_34 Gaduła (3,340 p.)

Stosowałem 3 warianty i żaden nie przyniósł efektu:

Wariant 1:

.images:focus
{
	outline: 0;
}

Wariant 2:

.images
{
	width: 100px;
	height: 143px;
	border: 2px solid #000000;
	outline-style: none;
}

Wariant 3:

.images
{
	width: 100px;
	height: 143px;
	border: 2px solid #000000;
	outline: 0;
}

Gdzie popełniam błąd?

1
komentarz 28 czerwca 2016 przez Comandeer Ekspert (346,680 p.)

Bo outline jest na linku, nie obrazku

komentarz 28 czerwca 2016 przez Krzysiek_34 Gaduła (3,340 p.)

Wystarczy tylko taki zapis i jest super:

a
{
	outline: none;
}

Kurde, wcześniej nieodpowiednie warianty brałem pod uwagę. Ważne, że działa.

Dzięki za pomoc.wink

2
komentarz 28 czerwca 2016 przez Comandeer Ekspert (346,680 p.)

NIE!!!

Zaznaczyłem to wystarczającą liczbę razy, podałem nawet link do odpowiedniego artykułu.

USUWANIE OUTLINE DLA WSZYSTKICH LINKÓW BEZ PODAWANIA ALTERNATYWNEGO STYLOWANIA JEST JEDNYM Z PODSTAWOWYCH BŁĘDÓW DOSTĘPNOŚCI.

Na tyle poważnym, że jest w stanie wręcz UNIEMOŻLIWIĆ korzystanie ze strony pewnym grupom osób, które korzystają wyłącznie z klawiatury do nawigacji.

Dlatego właściwym rozwiązaniem jest usunięcie outline dla konkretnych linków, co dodatkowo warto połączyć z przeniesieniem ich stylów z :hover także na :focus.

komentarz 28 czerwca 2016 przez Krzysiek_34 Gaduła (3,340 p.)

W artykule jest podane:

:focus {
outline: 0;
}

To jak to ma być zapisane prawidłowo? Przeniesienie stylów z :hover także na :focus?

a
{
	outline: 0;
}

a:hover
{
	outline: 0;
}

a:focus
{
	outline: 0;
}

Tak powinno to być zapisane, aby było na 100% dobrze czy nadal jest źle?

1
komentarz 28 czerwca 2016 przez Comandeer Ekspert (346,680 p.)

W artykule jest podane:

Tak, jako przykład jak nie należy tego robić… Ba, tuż nad tym kodem jest:

/* remember to define focus styles! */

Poprawnie to powinno wyglądać IMO tak:

<a href="podstrona2/podstrona2.php" class="images">
        <img src="obrazki/obrazek1.jpg" alt="Przejdź do podstrony Jakiejś tam">
</a>

i w CSS:

.images
{
    width: 100px;
    height: 143px;
    border: 2px solid #000000;
}
 
.images:hover, .images:focus
{
    border: 2px solid #FF0000;
    cursor: pointer;
    outline: none;
}

 

komentarz 28 czerwca 2016 przez Krzysiek_34 Gaduła (3,340 p.)
edycja 28 czerwca 2016 przez Krzysiek_34

Nie było mnie teraz przez kilka godzin przy kompie, Drogi użytkowniku, Comandeer. Teraz przetestowałem ten Twój kod i w efekcie jest jeszcze gorzej:

<a href="podstrona2/podstrona2.php" class="images">
        <img src="obrazki/obrazek1.jpg" alt="Przejdź do podstrony Jakiejś tam">
</a>
.images
{
    width: 100px;
    height: 143px;
    border: 2px solid #000000;
}
  
.images:hover, .images:focus
{
    border: 2px solid #FF0000;
    cursor: pointer;
    outline: none;
}

Przy tym zapisie pokazał się ogromny obrazek, bo jego oryginalny rozmiar to 389x552. Na dole tego ogromnego obrazka zamiast kropek pojawiła się czerwona ciągła kreska koloru czerwonego. Bez sensu. W CSS zapisane jest na stałe 100x143, aby kilkakrotnie zmniejszyć rozmiary obrazka w px. Gdzieś jest tutaj błąd w tym Twoim zapisie.

Co należy w tym Twoim kodzie poprawić?

komentarz 28 czerwca 2016 przez Pietrak Stary wyjadacz (14,720 p.)
Po prostu wciskasz taba na stronie i patrzysz czy widzisz, gdzie aktualnie się znajduje fokus.
0 głosów
odpowiedź 28 czerwca 2016 przez HaKIM Maniak (69,760 p.)
Trochę ciężko pisze się z telefonu, ale spróbuj dodać do a text-decoration: none; w CSS
komentarz 28 czerwca 2016 przez Krzysiek_34 Gaduła (3,340 p.)
<a style="text-decoration: none; href="podstrona2/podstrona2.php">

Tak ma być?

komentarz 28 czerwca 2016 przez HaKIM Maniak (69,760 p.)
Nie. a href="#" style="text-decoration: none" tyle ze z nie mogę na tel wklepać to do bloczków z kodem.
komentarz 28 czerwca 2016 przez Krzysiek_34 Gaduła (3,340 p.)
a img
{
	text-decoration: none;
}

Tak też jest źle.

komentarz 28 czerwca 2016 przez mitelak Stary wyjadacz (14,410 p.)
komentarz 28 czerwca 2016 przez Krzysiek_34 Gaduła (3,340 p.)

text-decoration: none; nie jest jednak odpowiednim stylem do usunięcia tych kropek. W tym celu sprawdza się tylko outline: none;

komentarz 28 czerwca 2016 przez HaKIM Maniak (69,760 p.)
Cóż, spórobwać nie zaszkodzi. :>

Myślałem też o nadaniu dla focus/active border:0 px; albo usunięciu outline, ale pisanie na tel. kodu to koszmar. Outline niezbyt rozumiałem, aby wytłumaczyć dlaczego tak jest, iż są kropki. : )

Podobne pytania

+2 głosów
4 odpowiedzi 2,030 wizyt
pytanie zadane 28 lipca 2015 w HTML i CSS przez ewelina.r Nowicjusz (210 p.)
0 głosów
3 odpowiedzi 88 wizyt
0 głosów
2 odpowiedzi 337 wizyt
...