CODEWITHSUNDEEP
htmlcsshyperlinkheaderbanner
regb
regb

Reputation: 1

HTML - header banner for links not appearing

I am learning web development and I am creating a practise website, however I am having some issues. I am trying give a background/banner to go behind the bit where the links to the other websites go. As far as I am aware I am correctly linking to the image and so on.

The code for the HTML:

<header role="banner" id="site_header">
<h1 role="heading"><a href="index.php" title="Sandwich Express">Sandwich 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>

Code for CSS: 

/* 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
}

Any help would be great, I hope the CSS and html is correct.

Upvotes: 0

Views: 334

Answers (1)

Alex
Alex

Reputation: 405

Be aware that paths specified in CSS are relative to the CSS file, not the HTML file. So if your CSS is in a subdirectory /css, and the pictures are in a subdirectory /photos relative to the HTML file, your paths in CSS should start with ../photos.

Upvotes: 2

Related Questions