My navigation bar is all images how do I get active and hover colours on the images p.s I'm trying to recreate the facebook homepage for practice in CSS Posted February 20, 2021 html <body> <!-- the HTML for the top bar --> <div class="navbar"> <img src="facebook.png"> <input type="search" placeholder="Search Facebook" style=" background-color: #464d4d;"> <ul> <div class="home"> <li><a href="Index.html"><img src="home.png" style="width: 650px; height:400px;"></a></li> </div> <div class="watchtop"> <li><a href="watch.html"><img src="watchtop.png" style="width: 650px; height: 400px;"></a></li> </div> <div class="marketplacetop"> <li><a href="marketplace"><img src="marketplacetop.png" style="width:650px; height:400px;"></a></li> </div> <div class="groupstop"> <li><a href="groups.html"><img src="groupstop.png" style="width: 650px; height: 400px;"></a></li> </div> <div class="gaming"> <li><a href="gaming.html"><img src="gaming.png" style="width: 650px; height: 400px;"></a></li> </div> </div> </ul> CSS /* the CSS for all the logos in the top bar */ .home { position: absolute; margin-top: 690px; margin-left: 1945px; } .watchtop { position: absolute; margin-left: 2075px; margin-top: 670px; font-size: 40px; } .marketplacetop{ position: absolute; margin-top: 670px; margin-left: 2215px; } .groupstop { position: absolute; margin-top: 670px; margin-left: 2350px; } .gaming { position: absolute; margin-top: 668px; margin-left: 2490px; }
My navigation bar is all images how do I get active and hover colours on the images p.s I'm trying to recreate the facebook homepage for practice
in CSS
Posted
html
<body>
<!-- the HTML for the top bar -->
<div class="navbar">
<img src="facebook.png">
<input type="search" placeholder="Search Facebook" style=" background-color: #464d4d;">
<ul>
<div class="home">
<li><a href="Index.html"><img src="home.png" style="width: 650px; height:400px;"></a></li>
</div>
<div class="watchtop">
<li><a href="watch.html"><img src="watchtop.png" style="width: 650px; height: 400px;"></a></li>
</div>
<div class="marketplacetop">
<li><a href="marketplace"><img src="marketplacetop.png" style="width:650px; height:400px;"></a></li>
</div>
<div class="groupstop">
<li><a href="groups.html"><img src="groupstop.png" style="width: 650px; height: 400px;"></a></li>
</div>
<div class="gaming">
<li><a href="gaming.html"><img src="gaming.png" style="width: 650px; height: 400px;"></a></li>
</div>
</div>
</ul>
CSS
/* the CSS for all the logos in the top bar */
.home {
position: absolute;
margin-top: 690px;
margin-left: 1945px;
}
.watchtop {
position: absolute;
margin-left: 2075px;
margin-top: 670px;
font-size: 40px;
}
.marketplacetop{
position: absolute;
margin-top: 670px;
margin-left: 2215px;
}
.groupstop {
position: absolute;
margin-top: 670px;
margin-left: 2350px;
}
.gaming {
position: absolute;
margin-top: 668px;
margin-left: 2490px;
}