html - 5th and 6th div tags not working -
this website designed last 2 tags don't go through tried everything, lost need help. in last 2 not performing well. not able understand problem exactly.
<html> <head> <title> ggwa </title> <style> div header { width: auto; height: 48px; } div img { display: block; width: 100%; } div li { height: 30px; background: #ff5000; } div ul { margin: 0; padding: 0; } div nav ul li { list-style: none; } div.nav ul li { text-decoration: none; float: left; display: block; padding: 10px 20px; color: black; } div.nav ul li a:hover { color: white; } </style> </head> <body> <div class="header"> <img src="../images/header1.png" alt="smiley face"> </div> <div class="nav"> <ul> <li><a href="#"> home</a> </li> <li><a href="#"> llps</a> </li> <li><a href="#"> ip?</a> </li> <li><a href="#"> blank</a> </li> <li><a href="#"> gaben</a> </li> </ul> </div> </body> </html>
it should
div.nav ul li a:hover { color: white; }
of simply
.nav ul li a:hover { color: white; }
https://jsfiddle.net/michaelyuen/bfa0u7gb/12/
to declare class on css, use .classname example div.header or .header
to declare id on css, use #idname example div#header or #header
so style sheet be
.header { width: auto; height: 48px; } .header img { display: block; width: 100%; } .nav ul { margin: 0; padding: 0; } .nav ul li { height: 30px; background: #ff5000; list-style: none; float: left; padding: 10px 20px; } .nav ul li { text-decoration: none; display: block; color: black; } .nav ul li a:hover { color: white; }
Comments
Post a Comment