Currently in the process of learning web development and constructing a practice website, I have encountered some challenges. Specifically, I am attempting to add a background/banner behind the section containing links to other websites. I believe that I have correctly linked the image and followed the necessary steps.
The HTML code is as follows:
<header role="banner" id="site_header">
<h1 role="heading"><a href="index.php" title="Tasty Treats Express">Tasty Treats Express</a></h1>
<nav role="navigation">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="Menu.html">Menu</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="event.html">Event Catering</a></li>
</ul>
</nav>
CSS Code:
/* header */
#site_header {
height: 188px;
background: url(photos/headerbg.png) top repeat-x;
}
#site_header h1 {
padding: 8px 0 0 21px;
float: left;
}
#site_header h1 a {
display: block;
text-indent: -9999px;
height: 173px;
width: 176px;
background: url(photos/logo.png);
text-decoration: none;
}
#site_header nav {
display: block;
float: left;
}
#site_header nav ul {
margin: 0;
padding: 113px 0 0 6px;
list-style: none;
list-style-image: none;
}
#site_header nav ul li {
font-family: "Century Gothic", "Gudea", sans-serif;
font-size: 15px;
line-height: 17px;
font-weight: bold;
text-transform: uppercase;
display: inline;
padding: 0 10px;
}
#site_header nav ul li a {
color: #000;
text-decoration: none;
transition: all .3s ease;
-o-transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
text-decoration: none;
}
#site_header nav ul li a:hover, #site_header nav ul li .active {
color: #900028
}
Your assistance would be greatly appreciated, and I am hopeful that the CSS and html codes are correct.