• 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?

VPS Starter Arubacloud
0 głosów
267 wizyt
pytanie zadane 28 czerwca 2016 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 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

+1 głos
odpowiedź 28 czerwca 2016 przez Comandeer Guru (599,730 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 Mądrala (6,050 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.

1
komentarz 28 czerwca 2016 przez Comandeer Guru (599,730 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 Mądrala (6,050 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 Guru (599,730 p.)

Bo outline jest na linku, nie obrazku

komentarz 28 czerwca 2016 przez Krzysiek_34 Mądrala (6,050 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

1
komentarz 28 czerwca 2016 przez Comandeer Guru (599,730 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 Mądrala (6,050 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?

komentarz 28 czerwca 2016 przez Comandeer Guru (599,730 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 Mądrala (6,050 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 Pasjonat (18,850 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 Szeryf (87,590 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 Mądrala (6,050 p.)
<a style="text-decoration: none; href="podstrona2/podstrona2.php">

Tak ma być?

komentarz 28 czerwca 2016 przez HaKIM Szeryf (87,590 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 Mądrala (6,050 p.)
a img
{
	text-decoration: none;
}

Tak też jest źle.

komentarz 28 czerwca 2016 przez mitelak Pasjonat (23,330 p.)
komentarz 28 czerwca 2016 przez Krzysiek_34 Mądrala (6,050 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 Szeryf (87,590 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

0 głosów
1 odpowiedź 121 wizyt
pytanie zadane 12 stycznia 2020 w HTML i CSS przez must Bywalec (2,980 p.)
+2 głosów
4 odpowiedzi 14,424 wizyt
pytanie zadane 28 lipca 2015 w HTML i CSS przez ewelina.r Nowicjusz (210 p.)
0 głosów
1 odpowiedź 160 wizyt
pytanie zadane 17 lutego 2019 w PHP przez veryape Użytkownik (580 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...