Refreshing backdrop for navigating through lists - Sprite edition

I am facing some issues while trying to use a sprite image for my navigation icons. The background position offset is not working as expected, and the background image is stretching across the whole length of the navigation. It seems like I may need to specify the width and height of the image being displayed.

Here is the code I am using: http://jsfiddle.net/spadez/737YT/1/

.navigation {
}
.navigation li {
}
.navigation li a {
    background: url(http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg) no-repeat left center;
    display: block;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 5px;
    margin-top: 5px;
}
.navigation li a:hover {
    background-color: #495C6D;
}
.navigation li a.active {
    background-color: #495C6D
}
#rss span {
    background-position: -15px 0;
}
#photos span {
    background-position: -30px 0;
}
#links span {
    background-position: -45px 0;
}

Can someone help me figure out what I am doing wrong here?

htmlcss

Answer №1

Here are some suggestions:

  1. Remove the background image from .navigation li a
  2. Update the following CSS
#links span,
#photos span,
#rss span {
    display: inline-block;
    width: 26px;
    height: 26px;
    background: url(http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg) no-repeat left center;
}
#rss span {
    background-position: -50px -65px;
}
#photos span {
    background-position: -330px -125px;
}
#links span {
    background-position: -130px -5px ;
}

Check out the fiddle here

Answer №2

There is more to adjusting the dimensions than just setting width and height. When using span elements to display images, there are a few additional steps you need to take.

Firstly, you must apply styles to the span element. This involves moving the background image to the span, changing it to an inline-block element, defining its dimensions, and preventing overflow.

Then, position the background image correctly for each span as you had previously attempted.

Here are the modified styles below:

.navigation li span {
    display: inline-block;
    background: url(http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg) no-repeat left center;
    width: 20px;
    height: 20px;
    overflow: hidden;
}
#rss span {
    background-position: -52px -68px;
}
#photos span {
    background-position: -90px -66px;
}

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

Jekyll is detecting invalid XML entity references

My blog is powered by Jekyll and hosted on GitHub Pages. I've noticed that Jekyll sometimes incorrectly XML escapes a special character as &tt;. For example, in the RSS feed located at this link, the source XML: </p> <p> is transfo ...

htmlrubyxmljekylljekyll-bootstrap

Having difficulty implementing DragControls

My experience with three.js is at a beginner level, and I recently attempted to incorporate a feature allowing the dragging of a 3D model. During this process, I encountered DragControl but faced difficulty implementing it in my code. Upon using new DragCo ...

javascriptjqueryhtmlthree.jsdrag-and-drop

The desired outcome is not displayed following the Ajax post request

I have created an app that utilizes asynchronous AJAX requests to enable seamless chat functionality without refreshing the page. However, I'm facing an issue where the messages are not being displayed. When I inspect the network tab and navigate to t ...

phphtmlajax

Incorporate SCSS capabilities into a Vue project

The default content of my packages.json file includes the following: "postcss": { "plugins": { "autoprefixer": {} }} Whenever I try to compile using <style lang='scss'>, it doesn't work automatically like it does for Typescript. I ...

cssvue.jsnpmwebpacksass

Animated CSS sidemenu (utilized as a filtering panel for a table)

Hi there, I'm having some trouble with CSS Animation. I recently started developing websites and am using Bootstrap 4 along with Animate.css for animations. My goal is to have an icon button expand sideways to reveal a div containing select elements f ...

javascripthtmlcssanimation

Creating a visually engaging parallax effect in two columns with differing lengths that align perfectly at the conclusion

Recently, I came across an interesting layout technique on Apple's website that involves two columns with different lengths. As you scroll down the page, one column slows down to align with the other so that they both meet at the bottom. You can chec ...

jquerycsshtmltwitter-bootstrapparallax

The chosen Material UI tab stands out with its distinct color compared to the other tabs

Just dipping my toes into the world of Material UI, so bear with me if this question sounds a bit amateur. I've been playing around with Material UI Tabs and successfully tweaked the CSS to fit my needs. Take a look below: https://i.stack.imgur.com/B ...

cssreactjsmaterial-uitabs

Switching off toggle does not switch back to primary theme when clicking again for the second time

When I click the button for the first time, it changes the theme. However, when I click it a second time, nothing happens; it seems like it's stuck on the second theme forever. It should change themes with every click. Can someone please help me with ...

javascripthtml

Utilizing JavaScript to enable HTML checkbox to be checked automatically

I am currently working on a constructor that generates checkboxes within a loop. My issue lies in attempting to set these checkboxes as checked, however, it doesn't seem to be functioning correctly. Below is the code snippet: funct ...

javascripthtmlcheckbox

Is it possible to use HTML alone in Bootstrap 5 to link a button to display a toast notification?

I'm working on a Bootstrap page that includes a button and a toast element sourced from the Bootstrap documentation. The documentation states that I need to initialize the toast in JavaScript during page load. My goal is to have the toast appear when ...

javascripthtmldombootstrap-5toast

How can you create a jQuery fade in effect for a single <li> element

I'm in the process of developing a task management app that generates a new li element every time a user adds an item. However, I am facing an issue where fadeIn() is activating for every li on the page whenever a new item is added. Does anyone have s ...

javascriptjqueryhtmlcss

Take the attention away from the canvas

Is there a way to shift focus away from the canvas and onto input fields in my HTML code? Right now, the canvas is holding onto focus even when I'm clicking on text inputs. This prevents me from typing anything into them. Ideally, I'd like for t ...

javascripthtmlcanvasfocushtml-input

Sections overlap, extending the content beyond their designated boundaries

I am facing an issue where the header in the first section remains fixed as an attachment, but when I resize the browser window, the background only covers a small portion of the section. The rest of the content either goes under another section or complet ...

htmlcssviewpositioningclearfix

New to JavaScript and Bootstrap - eager to learn by using Bootstrap 4 Chart Template, just need help with a small issue in the code

I am eager to dive into Bootstrap 4 and data visualization charts. I want to replicate the visualizations found in the link below. However, after copying and pasting the code into Atom, it's not functioning as expected. I ensured that I copied the HT ...

javascripthtmlcssbootstrap-4

Grow your website horizontally rather than vertically for a unique user experience

When I align divs to the right, they start stacking up and crowding on top of each other. When there are more than 4 divs, the fifth one jumps below the rest as the page expands downward. I want to prevent this from happening. Instead, I would like the h ...

csscss-float

"Can the form and action occur on the same page, or should they be

When it comes to form actions, what is more effective: having the action on the same page or a different page? See the sample code below: <form action="act.php"> html code </form> <form action=""> html code </form> < ...

phphtml

Modifying dynamic input fields based on the selected input field type

Seeking advice on a challenge I'm facing while testing a website. My task is to mask input fields in screenshots after executing tests because we share data with other teams. I've tried using JS before the script by changing the input type to &ap ...

javascripthtmlseleniumselenium-webdriver

Unexpected Output: Checkbox returning incorrect value using jQuery and PHP

I'm currently facing an issue where I'm trying to retrieve the value (true or false) of a checkbox and update the database for each row within a while loop. The problem is that the checkboxes only seem to respond to changes based on the first row ...

phpjqueryhtmlmysql

I'm noticing that the top border for my span is smaller than the bottom one. What could

I am struggling to create an arrangement of three triangles in a line, with the first and third pointing up and the middle one pointing down. The upper triangle seems to be too small - any ideas on how to adjust this? Is there another way to achieve this ...

htmlcss

The HTML.LabelFor function is failing to display correctly

I am facing an issue with Html.LabelFor where it doesn't render properly. Instead of displaying the value of ProviderName like "AT&T," it just shows the text ProviderName instead of the actual value. <div id="ServiceProvider" class="main_filter" n ...

htmlasp.net-mvc-4labelhtml.labelfor