HTML - header banner with missing links

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.

Answer №1

It's important to note that when specifying paths in CSS, they are relative to the CSS file location, not the HTML file. For example, if your CSS is housed in a folder called /stylesheets, and your images are stored in a folder named /images relative to the HTML file, make sure to begin your paths in the CSS with ../images.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the power of CSS id selectors to customize the appearance of a Grid

In my current CSS file, I have defined two id selectors: #TableHead { font-family: Arial, Helvetica, sans-serif; font-size:11px; font-weight: bold; color: #000000; border-top-width: thin; border-top-style: solid; border-top-color: #A9AAAA; border-bottom-w ...

Executing a YUI function via HTMLJSGlobal called is feasible

Recently, I stumbled upon the Dial example on the official YUI website and was thoroughly impressed. I managed to get the function working perfectly in a JS file, but now I am facing issues trying to call it within the HTML page with specific parameters su ...

Having trouble with a jQuery.validationEngine reference error?

Despite everything being correctly referenced, I am facing difficulties in getting it to function properly. It's strange because it worked once, but the validation message took 10 seconds to appear. After that, without making any changes, I tried agai ...

Clicking on the title link will open the content in an iframe, but the image

Having trouble with a previous post but I've created a codepen to illustrate the issue. Hoping someone can help me out! Check out the codepen here: "https://codepen.io/Lossmann/pen/GRrXyQY" ...

The function view() is not displaying the CSS and JS files properly

Having trouble with loading the css and js on my view: This is how I set up the controller: return view('home.news') ->with("news", $news); And here's how the route is defined: Route::get('/news/{id}&apos ...

Updating CSS class within a div tag utilizing ASP.NET (C#)

How can I dynamically update the properties of a CSS class using C#? I need to change the background image, font size, font style, and font based on user input through an interface. Once the changes are saved, I store them in a database. However, when the ...

What is the proper way to retrieve the JSON data?

How can I retrieve data from another table to use in a detail view if the value returned by the getData method is null? <th data-field="id" data-detail-formatter="DetailFormatter">ID</th> <th data-field="prefix&quo ...

What is the best way to redirect to a specific page when logging out of a website?

To begin, let me outline the situation at hand. We have two distinct websites - website-A and website-B. Each of these websites is hosted on separate domains. A user has the ability to log in to website-B's homepage through the login page of webs ...

Is there a way to transmit a div using Node.js?

Scenario: I am developing a web application that allows users to draw on a canvas, save the drawing as an image, and share it with others using Node.js. Current Progress: Drawing functionality (real-time updates on both clients). Saving the canvas as a ...

Having trouble with the unresponsive sticky top-bar feature in Zurb Foundation 5?

According to the information provided on this website, it is recommended to enclose the top-bar navigation within a div element that has both the class "contain-to-grid" and "sticky". However, I have noticed that while the "contain-to-grid" class exists in ...

Embedding an Iframe in the Main URL

I have a specific request where I've inserted an anchor tag within an IFRAME. Currently, when the anchor link is clicked, the page redirects within the IFRAME. However, I need the functionality to redirect to the main URL instead of staying within the ...

Utilizing Multiple Checkboxes for Precision Search Refinement

Big thanks to Khalid Ali for the support provided up until now. I am currently working with an array of songs that each have descriptions, keywords, etc. I have a set of checkboxes that I want to use to refine a search. Essentially, if someone selects the ...

HTML makes column text wrapping automatic

Is it feasible to implement text wrapping into two columns or more in HTML using solely CSS? I have a series of continuous text enclosed within p tags only, structured as follows: <div id="needtowrap"> <p>Lorem ipsum dolor sit amet, ...&l ...

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

Building adaptable divs using bootstrap technology

I'm playing around with bootstrap and here is the code I came up with: <!doctype html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet ...

Show the HTML page returned by the server on the client side

Hey there! I've come across a PHP code snippet that sends back an HTML file as a response. This PHP code makes use of the include method to send the file. When I'm on the client side, I'm employing AJAX. Upon typing console.log(data) (with ...

Using Javascript to retrieve form data from a separate file

I am struggling with my HTML and JavaScript files to collect data. Despite my efforts, the function is not executing properly. Below is the code I have been working on: HTML File : <form class="form-newsletter"> <div class="form-group"> ...

Transferring a Variable from Arduino to JavaScript

Is there a simple way to pass an Arduino variable as a JS variable? Let's say we have an integer Arduino variable called sensorData: int sensorData = analogRead(sensorPin); How can we transfer this value to a JavaScript variable? client.println(&quo ...

What is the best way to manage the back button functionality on pages that use templates?

I am currently developing a website using angularjs. The layout consists of two main sections: the menu and the content area. For instance This is an example page: /mainpage <div> <div id="menu"> <div ng-click="setTemplate('fi ...

MAMP: The Header(Location: ) function has suddenly stopped functioning

I'm currently working on implementing a login system for my PHP website. To simplify things, I have a login.php page and a loginProcessor.php page. The processor is responsible for verifying the email and password entered by the user. If any user-ente ...