Using CSS sprites to style text links

I've been attempting to incorporate an image with various icons for text links in an unordered list, but I can't seem to display just one icon with some space next to it for the text. The code I have so far is:

http://jsfiddle.net/XyVtq/2/

This is my CSS:

#head_about {    background: url(http://i.imgur.com/IOA8l.png) no-repeat -2px -2px;    width: 9px;    height: 18px; display:block; margin-left:20px;  }​

And this is my HTML:

<ul>
        <li><a id="head_about" href="test.html" >About Us</a></li>
 </ul>​

If I try to add left padding, it ends up revealing more icons from the entire image. Is there a way to fix this issue?

htmlcss

Answer №1

My technique involves separating the sprite from the content by adding an icon tag in the html specifically for the sprite and then styling the link separately.

To see an example, click here: http://jsfiddle.net/XyVtq/1/

<ul id="header_pages">
  <li>
    <i id="icon"></i> <a id="head_about" href="<?php echo tep_href_link(FILENAME_ABOUT_US); ?>" >About Us</a>
  </li>
</ul>​

#icon {
  background: url(http://i.imgur.com/IOA8l.png) no-repeat -2px -2px;    
  width: 9px;    
  height: 18px; 
  display:inline-block
} 

li a {
   margin-left:18px;   
}

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

Setting the Height of a Fixed Element to Extend to the Bottom of the Browser Window

I currently have a webpage layout featuring a header at the top, a fixed sidebar on the left side, and main content displayed on the right. A demo version of this layout can be viewed at http://jsbin.com/iqibew/3. The challenge I'm facing is ensuring ...

javascriptjqueryhtmlcsscss-position

The background-size property fails to function properly on mobile devices

It's really puzzling why this issue is happening, perhaps it's due to my fatigue. The problem lies in the fact that the "background-size" property isn't functioning on my mobile devices; however, it works perfectly when I try to simulate it ...

htmlcssmobile

Container element refusing to grow in size while the footer remains fixed on the screen

Description: I recently encountered an issue with the layout of my website. I have a main content div (#main) and a container div (.display), which should expand automatically with content to push the footer down. Initially, I struggled to get this workin ...

htmlcsspositioning

Integrate Arduino's capabilities with Johnny-Five within an HTML JavaScript document

As a beginner in the world of JavaScript, I set out to embark on a project involving turning on a connected LED on an Arduino board by simply pressing a button on an HTML page. After doing some research, I came across a JavaScript library called "johnny- ...

javascripthtmlarduino

Text stretched to its fullest height and rotated using the transform property

check out the demo Here is a demonstration of HTML elements: <div class="controller"> <div><a href="#buttton-1">Special Offer</a></div> </div> And here is the styled CSS for the demo: .controller{ width: 55px; ...

htmlcsstransform

Mozilla Firefox does not support the use of an input text box

I have developed a stopwatch using JavaScript and customized it with a table using HTML and CSS. Upon testing in Chrome, the UI looked great. However, when I tested it in Mozilla Firefox, I noticed that the input text box appeared smaller than expected. ...

htmlcss

Utilizing AJAX to dynamically populate an HTML list from a database and then saving the user's newly selected value back to the database

I'm working on dynamically populating a list from a database using AJAX and then updating the selected value back to the database with a servlet. What's the best approach for achieving this? Typically, I use the following code for dynamic update ...

htmlajaxjspservletsgson

I am attempting to secure a webpage with a password using JavaScript

I've been working on adding password protection to my webpage at , with the goal of allowing users to enter the password once per session. However, I've encountered an issue: if a user cancels out of the initial prompt or enters the wrong passwor ...

javascripthtmlpassword-protection

Tips for incorporating a visible HTML comment in JSX code?

Currently implementing ReactJS and facing a requirement to insert visible HTML comments (visible in the html source) within JSX. Unsure of the correct approach to achieve this. A third party vendor necessitates this comment for processing purposes on the ...

htmlreactjscommentsjsx

Tips for concealing the currently playing track title on a media player

I'm looking for a way to conceal the track title displayed in the media player on Internet Explorer. Here's the code I currently have: <object id="mediaPlayer" width="320" height="240" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type ...

html

Is there a way to organize nested tabs in R markdown so they are displayed separately instead of all being shown side by side?

Hello, I have a question regarding separating sub tabs and not displaying them all side by side. I have tried multiple codes to create two subtabs, each containing a different graph, and then displaying the other two sub tabs below them with different type ...

htmlrr-markdown

Tips for deactivating all JavaScript events on a webpage that has been loaded within an iframe

My website is equipped with various JS click/mouseover/mouseout/scroll events and incorporates several JS libraries to operate features such as carousels, bootstrap modal pop-ups, and more. I am looking to halt all events on a specific element. Although I ...

javascriptjqueryhtmladdeventlistenerevent-listener

Experiencing a problem with inline JavaScript onclick

I recently came across a fantastic pure javascript code for a smooth scrolling function, but I'm struggling with integrating it into an inline onclick function. My understanding of javascript is quite limited and I could really use some help... <d ...

javascripthtmlonclick

CSS3 variables causing issues

I want to streamline my CSS file by setting up generic variables that can be used throughout to ensure consistency and organization. For example: @shadow: 6px 6px 10px rgba(0,0,0,0.2); .shadow { box-shadow: @shadow inset; } However, when I try to a ...

css

How can I replicate the functionality of a div mimicking a select element using javascript upon clicking away from the element?

My task was to design a pseudo-select element that showcases columns for each row within the select. Due to HTML's restriction on allowing the <option> tag to include HTML, I had to find an alternate solution. One issue I encountered was replic ...

javascripthtmljqueryselectclick

Incorporating a URL into an HTML marquee

As a beginner in coding, I'm currently exploring how to incorporate a link into my marquee. My goal is to eliminate any color change or underline animation as well. Do you have any recommendations? .Marquee { color: #da6fe2; background-color: t ...

htmlcss

What is the best way to ensure an SVG maintains a fluid width while keeping its height constant?

My goal is to achieve the following: The SVG should dynamically scale its width to occupy 100% of the container's width. The SVG should either stretch or compress when the container's width changes, specifically affecting the wave drawn wit ...

htmlcsssvg

Issue with Translate3d functionality in fullpage.js not functioning as expected

Currently, I am in the process of constructing a website using fullpage.js with WordPress. Everything is functioning well except for one issue - when attempting to disable the plugin by using destroy() or changing setAutoScrolling to false, the translate3d ...

javascriptjqueryhtmlwordpressfullpage.js

The Main page is being graced by a floating Twitter Bootstrap video

When trying to display a video next to a paragraph, I encountered an issue where the paragraph was taking up 100% of the screen and the video was floating over it, obstructing part of the text. Despite setting the row and cols, the layout wasn't behav ...

htmltwitter-bootstrapvideogridprogram-entry-point

The dropdown menu in the bootstrap is not being properly filled with content on the webpage

In my header file, I am attempting to add a bootstrap dropdown that will display the user id along with two other options in the dropdown menu. Within the header file, I have created a new div element for the dropdown and linked it to a php file where the ...

phpjqueryhtmlcsstwitter-bootstrap