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

Problem z linkami HTML/CSS

VPS Starter Arubacloud
+1 głos
416 wizyt
pytanie zadane 26 sierpnia 2020 w HTML i CSS przez _Kuba_ Początkujący (250 p.)

Mam taki mały problem z linkami w HTMLu. Zaraz po włączeniu kolor linku jest fioletowy, a chwilę później już biały. W CSS wszystkie kolory linków ustawione są na białe :/ Poniżej screeny i kod CSS

#nav a:link
{
	text-decoration:none;
	font-size:17px;
	transition-duration:1s;
	color:white;
}

#nav a:hover {
	text-shadow: 3px 0 0 #00DDDD;
	transition: all 1s;
	padding: 10px;
	color:gray;
	}
	
#nav a:visited
	{
		color:white;
		text-decoration:none;
	}
	
#nav a:active
{
		color:white;
}

 

1
komentarz 26 sierpnia 2020 przez JakSky Stary wyjadacz (14,770 p.)
Wygląda to tak jakby CSS był ładowany po wczytaniu HTML
komentarz 26 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

@_Kuba_, Pokaż kod HTML.

2 odpowiedzi

+1 głos
odpowiedź 26 sierpnia 2020 przez VBService Ekspert (251,210 p.)
edycja 27 sierpnia 2020 przez VBService

Masz niejawnie ustawione transition: all 1s 0s linear; gdy masz taki zapis, transition-duration:1s; w tej części:

#nav a:link
{
    text-decoration:none;
    font-size:17px;
    transition-duration:1s; <-- ten wpis
    color:white;
}

 transition-duration:1s  - automatycznie resztę przeglądarka ustawia z domyślnych (default).

transition-property: all; // default
transition-duration: 1s; // Twoje ustawienie
transition-delay: 0s; // default
transition-timing-function: linear; // default

Pseudo klasa :link działa w css  w dużym uproszczeniu jak w html wywołanie coś na wzór beforeonload, czyli zaraz po uruchomieniu (ładowaniu, załadowaniu) strony i sparsowaniu jej, w trakcie ustawiania css-a na elementach strony, wykonuje się ten kod na elementach <a>.

W pewnym sensie oba te zapisy są równoznaczne:
#nav a { ... } i #nav a:link { ... }

zrób taki zapis a zobaczysz różnicę wink

#nav a:link
{
    text-decoration:none;
    font-size:17px;
    /* transition-duration:1s; */
    color:white;
}

albo

#nav a:link
{
    text-decoration:none;
    font-size:17px;   
    color:white;
}

albo

#nav a:link
{
    text-decoration:none;
    font-size:17px;
    transition-duration:5s;
    color:white;
}

[ css - transition ]

komentarz 26 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Masz nie jawnie ustawione transition: all 1s linear; gdy masz taki zapis, transition-duration:1s

Ciekawy pomysł. :) Można prosić źródło tej informacji? Styl transition: all 1s; jest ustawiany dopiero na :hover, więc jestem ciekaw, czy to mimo wszystko ma jakiś związek.

komentarz 26 sierpnia 2020 przez VBService Ekspert (251,210 p.)
edycja 26 sierpnia 2020 przez VBService

Wejdź tu: https://codepen.io/vbservice/pen/GRZmJeb

i usuń znaki komentarza.

:hover w tym zapisie, w dużym uproszczeniu, działa jak toggle()  po najechaniu myszą na <a> i zjechaniu myszy z <a> (czyli transition w hover zachodzi tylko dla tego zdarzenia)

mysz nad <a>
#nav a:hover {
    text-shadow: 3px 0 0 #00DDDD;
    transition: all 1s;
    padding: 10px;
    color:gray;
    }

mysz poza <a>
#nav a:link
{
    text-decoration:none;
    font-size:17px;
    transition-duration:1s;
    color:white;
}

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

1
komentarz 26 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Hmm, faktycznie: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property#Formal_definition

Initial value   all

Szukałem nie tam gdzie trzeba. 

0 głosów
odpowiedź 26 sierpnia 2020 przez Artek Stary wyjadacz (11,800 p.)
Sprawdź czy jest dobrze podlinkowany plik i zrób twardy reset zazwyczaj ctrl + f5 --> zazwyczaj przeglądarka nie zaciąga za każdym razem pliku css tylko korzysta z zaciągniętego wcześniej i dlatego czasami zmiany nie są widoczne. Poza tym użyj narzędzi developerskich w narzędziach przeglądarki. Prawy klik gdziekolwiek i zbadaj element.
komentarz 26 sierpnia 2020 przez _Kuba_ Początkujący (250 p.)
<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>TOP 5 SERIALI - Subiektywne top 5</title>
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="słowa, kluczowe, wypisane, po, przecinku" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	
</head>

<body>
	
	<div id="container">
		
			<div id="logo">
				<h2>Najlepsze seriale - Top 5</h2>
			</div>
			
			<div id="nav">
				 <br/><br/><li><a href="index.html" >Dr House</a><br/><br/><br/></li>
				<li> <a href="breakingbad.html" >Breaking Bad</a><br/><br/><br/></li>
				<li> <a href="bigbang.html">Big Bang Theory</a><br/><br/><br/></li>
				 <li><a href="archx.html">Z Archiwum X</a><br/><br/><br/></li>
				 <li><a href="tdec.html">True Detective</a><br/><br/><br/></li>
			
			</div>
			
			<div id="content">
						<div class="tekst">
						<h2>Dr House</h2>
									Miał premierę na antenie 16 listopada 2004 roku. Fabuła serialu koncentruje się na osobie dr Gregory’ego House’a (Hugh Laurie), niekonwencjonalnego, szalonego, a zarazem genialnego lekarza, kierującego zespołem diagnostycznym w fikcyjnym Szpitalu Klinicznym Princeton-Plainsboro (PPTH) w New Jersey. W każdym odcinku dr House wraz ze swoim zespołem próbuje zdiagnozować i wyleczyć pacjentów przejawiających rozmaite objawy, niewyjaśnione wcześniej przez innych lekarzy. W pierwszych trzech seriach zespół dra House’a tworzyli: dr Allison Cameron (Jennifer Morrison), dr Robert Chase (Jesse Spencer) i dr Eric Foreman (Omar Epps), od czwartej serii dr Chris Taub (Peter Jacobson), dr Lawrence Kutner (Kal Penn) oraz dr Remy „Trzynastka” Hadley (Olivia Wilde), w siódmym sezonie w zespole pojawiła się Martha Masters (Amber Tamblyn), a w ósmym do zespołu dochodzą dr Chi Park (Charlyne Yi) oraz lekarka z więzienia dr Jessica Adams (Odette Annable). Ponadto serial ukazuje prywatne życie House’a i członków jego zespołu, najlepszego i jedynego przyjaciela dr Jamesa Wilsona (Robert Sean Leonard), ordynatora oddziału onkologii oraz dr Lisy Cuddy (Lisa Edelstein), dyrektor szpitala Princeton‑Plainsboro.
						<div class="film"><iframe width="880" height="520" src="https://www.youtube.com/embed/xja_n137T4k" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>									
						</div>
			</div>
			
			<div id="ad">
			</div>
			
			<div id="footer">
			Najlepsze seriale TOP 5! &copy - Wszelkie prawa zastrzeżone!
			</div>
	
	</div>
	
</body>
</html>

Tak to wygląda w HTMLu
Poza tym twardy reset nie pomógł :/

komentarz 26 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)
Czy masz jakieś wtyczki, które wpływają na ładowanie assetów na stronie? Czy w trybie incognito/prywatnym ten problem występuje? Czy możesz tę stronę upublicznić i dać linka?
komentarz 26 sierpnia 2020 przez _Kuba_ Początkujący (250 p.)

Ogólne to wszystko jest okej, kiedy usunę:
 

#nav a:link
{
    text-decoration:none;
    font-size:17px;
    transition-duration:1s; <--- TO
    color:white;
}

Ale kiedy 'zdejmę' kursor z linku to nie przechodzi on tak płynnie do swojej pozycji

komentarz 27 sierpnia 2020 przez Artek Stary wyjadacz (11,800 p.)

Koledzy już w sumie wyjaśnili w czym problem. Ponadto polecam skróconą formę. Czyli transition daj na stałe a nie tylko dla :hover.

Mniej więcej tak

#nav a{
 transition: color 1s;
}

 

Podobne pytania

0 głosów
0 odpowiedzi 122 wizyt
pytanie zadane 23 listopada 2019 w PHP przez okti00 Obywatel (1,300 p.)
0 głosów
1 odpowiedź 273 wizyt
pytanie zadane 19 września 2016 w PHP przez Grzdaczek Obywatel (1,070 p.)
0 głosów
2 odpowiedzi 262 wizyt
pytanie zadane 2 listopada 2019 w HTML i CSS przez tomekkyu Nowicjusz (140 p.)

92,453 zapytań

141,262 odpowiedzi

319,087 komentarzy

61,854 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!

...