I'm a beginner in HTML and I have created a simple webpage with a div called "navbar" containing a list ('ul') of buttons. Each button should have a different background image, which I created in Photoshop. I tried giving each 'li' an id and manipulating them in CSS but it didn't work. Can anyone help me achieve this? If more information is needed, please let me know.
Thank you!
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<title>Resonance Recording & Rehearsals</title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="navbar">
<ul>
<li id="gallerybutton"> <a href="gallery.html"> Gallery </a> </li>
<li id="homebutton"> <a href="index.html"> Home </a> </li>
<li is="about_usbutton"> <a href="about_us.html"> About Us </a> </li>
</ul>
</div>
<div id="cgiform">
</div>
<div id="footer">
</div>
</div>
</body>
CSS:
body{
background-image:url("mainbg.png");
background-repeat:no-repeat;
background-color:#000000;
background-size: 100%;
height: 100%;
width: 100%;
}
#header{
background-image:url("mainheader.png");
height: 146px;
width: 1000px;
margin: 0px auto;
background-size: 100%;
}
#navbar{
background-image:url("mainnavbar.png");
height: 88px;
width: 1000px;
margin: 0px auto;
background-size: 100%;
}
ul{
list-style-type: none;
list-style-position: initial;
list-style-image: initial;
padding: 28px 0px 0px 40px; /* padding syntax = top right bottom left */
}
li{
color: #fff;
display:inline;
}
a:link {
text-decoration:none;
color: #fff;
}
a:visited {
text-decoration:none;
color: #fff;
}
a:hover {
text-decoration:underline;
color: #fff;
}
a:active {
text-decoration:underline;
color: #fff;
}
#navbar #gallerybutton{
background-image:url("gallery.png") no-repeat top center;
}