Hiperłącze które powinno się aktywować na kafelku trzecim, aktywuje sie tez poza nim. Dlaczego ?

pytanie zadane 6 kwietnia 2019 w HTML i CSS przez Tomyslav Nowicjusz (220 p.)

<!docktype html>
<html lang="pl">
<head>
	<title>Powtórka z lecji 3</title>
	<meta name="description" content="Nazwa zakladki" />
	<meta name="keywords" content="div, lekcja, nauka" />
	<meta http-equiv="x-ua-Compatible" content="ie=edge,chrome=1" />
	
	<link rel="stylesheet" href="powt.css" type="text/css" />

</head>

<body>

	<div id="pojemnik">
		<div id="jeden">Kafelek pierwszy</div>
		
		<a href="http://youtube.com" target="_blank" title="skrót do YT" class="kolor">
			<div id="dwa">Kafelek drugi</div>
		</a>
		
		<div style="clear: both;"></div>
		
		<a href="http://youtube.com" target="_blank" class="kolor">
			<div id="trzy">Kafelek trzeci</div>
		</a>
		
		
	
	</div>

</body>	
</html>

PLIK CSS

body
{
   background-color: #505050;
   color: #ffffff;

}

#pojemnik
{
   width: 1000px;
   margin-left: auto;
   margin-right: auto;
}

#jeden
{
   width: 500px;
   height: 280px;
   margin: 0px;
   background-color: #404040;
   float: left
}

#dwa
{
   width:500px;
   height: 480px;
   margin: 0px;
   background-color: #303030;
   float: left

}

#dwa:hover
{
   width:500px;
   height: 480px;
   margin: 0px;
   background-color: #123456;
   float: left
}

#trzy
{
   width: 200px;
   height: 200px;
   background-color: #202020;
}

.kolor
{
color: #ffffff;
text-decoration: none;
}

3 odpowiedzi

odpowiedź 6 kwietnia 2019 przez kalczur Gaduła (4,320 p.)

Dodaj float:left; w css do #trzy z html "clear: both;" możesz usunać. Jak chcesz zmieniać jakąś wartość po najechaniu to nie musisz wpisywać wszystkiego od nowa, wystarczy

#dwa:hover
{
background-color: #123456;
}

komentarz 6 kwietnia 2019 przez Tomyslav Nowicjusz (220 p.)

Dziękuje za odpowiedz.

odpowiedź 6 kwietnia 2019 przez Tpk Nałogowiec (40,100 p.)

Wrzuć sobie ten kod najpierw w walidator, poznasz część błędów -> https://validator.w3.org (w direct output)

Podpowiem jedynie, że doctype jest niepoprawny, tak samo jako meta x-ua-compatible.

Możesz też lekko zoptymalizować ten css zamiast pisać:

#dwa 
{ 
    width:500px; 
    height: 480px; 
    margin: 0px; 
    background-color: #303030; 
    float: left 
     
} 
    

#dwa:hover 
{ 
    width:500px; 
    height: 480px; 
    margin: 0px; 
    background-color: #123456; 
    float: left 
}

Możesz to zrobić w ten sposób:

#dwa, #dwa:hover 
{ 
    width:500px; 
    height: 480px; 
    margin: 0px; 
    background-color: #303030; 
    float: left 
} 
    
#dwa:hover { background-color: #123456; }

komentarz 6 kwietnia 2019 przez Tomyslav Nowicjusz (220 p.)

Dziękuje za odpowiedz.

odpowiedź 6 kwietnia 2019 przez pablop76 VIP (123,120 p.)

Użyj inlin-block dla linków

inline-block : Wprowadzone w CSS2.1. Sprawia, że element generuje pudełko elementu blokowego, które będzie opływane otaczającą treścią, jakby było pojedynczym pudełkiem liniowym (zachowując się tak, jakby zachowywał się zamieniany element).