Incorporating a stationary sidebar onto your website

My goal is to create a fixed side menu similar to the one on this website:

Below is my HTML code:

    <!-- Scroll TEST -->
<ul id="followTab">
    <li>
        <a class="newsletter" href="newsletter/" title="Subscribe to ...">
          <span> Subscribe to ...</span>
        </a>
    </li>
    <li>
        <a class="twitter" href="newsletter/" title="Subscribe to ...">
          <span> Subscribe to ...</span>
        </a>
    </li>
    </ul>

This is the CSS style being used:

    /* Follow tab */

#followTab {
  list-style: none;
  position: fixed;
  z-index: 5;
  right: 0;
  top: 130px;
  width: 24px;
  padding: 8px 5px;
  border: 3px solid #fff;
  border-right: none;
  -moz-border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
  border-radius: 10px 0 0 10px;
  -moz-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
  box-shadow: 0 0 7px rgba(0, 0, 0, .6);
  background: rgba(239, 91, 10, .75);
  background: -moz-linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75));
  background: -webkit-gradient( linear, left top, left bottom, from( rgba(243, 52, 8, .75) ), to( rgba(239, 91, 10, .75) ) );
  background: linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75));
}

#followTab li {
  margin: 9px 0 0 0;
  line-height: 0;
}

#followTab li:first-child {
  margin-top: 0;
}

#followTab a {
  display: block;
  width: 24px;
  background-image: url("/css/images/follow-tab-buttons.png");
}

#followTab a span {
  position: absolute;
  top: -999em;
}

#followTab a.newsletter {
  height: 16px;
  background-position: 0 0;
}

#followTab a.newsletter:hover {
  background-position: 0 -16px;
}

#followTab a.rss {
  background-position: 0 -32px;
  height: 24px;
}

#followTab a.rss:hover {
  background-position: 0 -56px;
}

#followTab a.twitter {
  background-position: 0 -80px;
  height: 15px;
}

#followTab a.twitter:hover {
  background-position: 0 -95px;
}

#followTab a.facebook {
  background-position: 0 -110px;
  height: 24px;
}

#followTab a.facebook:hover {
  background-position: 0 -134px;
}

I am experiencing issues with getting the images to display. Any help or suggestions would be greatly appreciated. The live website can be accessed here

Answer №1

You seem to be experiencing an issue with the image paths on your website.

As it stands, your image path is set as:

/css/images/follow-tab-buttons.png
, which is an absolute reference starting from the root of your site.

However, your site is actually located at /NEW/

You have a couple options: either add /NEW before the image URL (

/NEW/css/images/follow-tab-buttons.png
) [Not Recommended]

Alternatively, you can remove the leading /css/ to make the URL relative (but remember, it should be relative to your CSS file) - resulting in images/follow-tab-buttons.png

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

The Signature Pad loses its focus

My HTML code is using JavaScript with Bootstrap and the Signature Pad. The issue I am facing is related to the Bootstrap Collapse feature. When I set the first panel as default, the Signature Pad does not allow me to sign. However, if I set the third panel ...

Error 403 with Firefox on Font Loading for CodeIgniter Website

Utilizing font-face in CSS to integrate custom fonts onto a web application being developed with CodeIgniter. This is the CSS code: @font-face { font-family: 'UniversLT-UltraCondensed'; src: url('../Fonts/LTUnivers/universlt59ultrac ...

"Styling a cover image in CSS without the need for readjustments

I found a cool idea for creating a Facebook-like cover image on this community. Check out this jsfiddle that I stumbled upon. .cover { width: 100%; height: 180px; overflow: hidden; background-color: black; } .cover > img { position: relative; width: 10 ...

The fixed table header is misaligned with the body columns' width

I was looking for a way to add a vertical scrollbar to my table, and I ended up wrapping the entire table in a div. The result was that the table head was fixed in position. Is there a simpler method to include a scrollbar in a table without affecting the ...

Replicate the form to a new one while concealing the elements and then submit it

Initially, I was working with just one form. Now, I find myself in a situation where I need to utilize a different form which contains the same inputs. This is necessary because depending on the action taken upon submission, different processes will be tri ...

Iterate using jQuery through all child div elements

<div id="SelectedSection" class="selected"> <div class="sec_ch" name="7"> <div class="sec_ch" name="8"> <div class="sec_ch" name="9"> <div class="sec_ch" name="11"> <div class="clear"> </div> </di ...

Locating Substrings with CSS Selectors

Looking for a CSS Selector that can handle varying item numbers like span[label='./cakes/item1/./linkText']. I need one selector that works with any range of numbers. I checked out a tutorial on this but no success. The attempted solution was: ...

Disable or set input text to read-only in Internet Explorer 9 and earlier versions using JavaScript or jQuery

Can anyone offer any suggestions on how to accomplish this task? I attempted using JavaScript with the code below, but it did not yield the desired results. element.readOnly="true"; element.readonly="readonly"; element.disabled="disabled"; I also tried ...

"Resolving the duplication issue of a textbox in Phonegap app

I encountered a strange issue recently. While trying to focus on the textbox in my PhoneGap application using touch, I noticed that there are actually 2 textboxes appearing. Please refer to the attached image: ...

Top-align the background of the inline element

This particular inquiry pertains to a curious discrepancy in the computed height of an inline nonreplaced element across different web browsers. The question can be found here: Why the computed height of inline nonreplaced element differs between browsers? ...

Issues with Skrollr JS on mobile device causing scrolling problem

Currently facing an issue with Skrollr js. It is functioning perfectly in web browsers and mobile devices. However, there seems to be a problem when tapping on a menu or scrolling down arrow as it does not initiate scrolling. Assistance would be greatly ...

Question: How can I use the jQuery datepicker to ensure that the selected date remains in the

I recently created a webpage using a combination of HTML, PHP, and jQuery. The PHP script is designed to load all data where the date matches the one selected in the text input field generated by the jQuery datepicker. However, I encountered a problem whe ...

The middle alignment of a Bootstrap 4 row is off

I've been struggling to center the content within the <div class="col-md-2 col-lg-2">, but so far I haven't had any success. I understand that setting the columns to a size of 2 doesn't fill the 12-column grid system, but I really wan ...

Make the inner div within the td stretch to cover the entire height of the td

Inside the first tds, there is dynamic text content that automatically expands the trs and tds. However, the second tds have a div with a background image but no text inside. I want these divs with background images to expand or collapse along with the tab ...

Codepen fails to function properly after being uploaded to a server

I have encountered an issue with my code on CodePen. After exporting it as a .zip file and attempting to run it on a local server, it failed to work. I am unsure of the exact reason behind this. I made sure to include all the necessary dependencies in the ...

Explore interactive hover effects with jQuery and UI for a dynamic user experience!

Is it possible to initiate dragging on mouseover instead of click? Imagine a div that instantly starts dragging when hovered over. How can this be achieved? I would appreciate any guidance on how to make this happen. Thank you ...

Incorporating intricate HTML elements through a Chrome content script

Currently, I am utilizing Chrome extension's content script to generate a sophisticated display that is incorporated into web pages. Initially, I tested it by integrating it directly onto a website, but now I want to package it in an extension. The ...

Contenteditable feature dynamically styling text upon input

Is it possible to prevent CSS properties like text-transform from affecting text entered via contenteditable? On my webpage, "CERTIFICATE PROGRAM" is shown in uppercase due to text-transform settings. However, the original input was: Certificate Program. ...

Display images in Django using the src attribute pulled from a Python list

I am currently working on displaying a collection of images on my website. I have compiled a list of sources for each image and created a loop in the HTML file to iterate through them. Here is a snippet of the HTML body: <body> <div class="co ...

Users are directed to various pages based on their specific roles

I am currently working on implementing a simple authorization system using an array to simulate a database. Let's say I have an array with information about two individuals: const users = [{ info: 'First person', login: &apos ...