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

Could you provide me with some information regarding the relationship between screen resolution and screen size?

When checking my website on different screen resolutions, I rely on a tool called Screenfly from quirktools.com. While using this tool, I came across an interesting feature - the display icon in the top left corner with a dropdown menu showing resolution ...

htmlcss

Troubleshooting issue with AngularJS ng-repeat not functioning properly when using Object key value filter with ng-model

Is there a way to have an object with an ID as a key value pair? For example: friends = { 1:{name:'John', age:25, gender:'boy'}, 2:{name:'Jessie', age:30, gender:'girl'}, 3:{name:'Johanna', ag ...

javascripthtmlangularjs

Using WebDriver to select and interact with a hyperlink on a website

I am currently attempting to select a specific link on a webpage, which happens to be a Home button consistently located in the same position no matter where I navigate. I have been using the driver.findElement(By.xpath("//span/ul/li/a")).click(); command ...

javaxpathseleniumwebdriverhtml

Error encountered in Flatpickr NextJS+TS application: Uncaught DOMException - accessing CSSStyleSheet.cssRules getter is not permitted for cross-origin stylesheet

After successfully integrating Flatpickr into my project, I encountered an issue when testing in mobile view. When trying to open the calendar by clicking on the input field, I received the following error: Uncaught DOMException: CSSStyleSheet.cssRules get ...

cssnext.jsflatpickrdomexception

What is the best way to transfer a table with multiple rows in a single column to an Excel spreadsheet while maintaining the headers on a horizontal plane

Currently, I am in the process of gathering data. The data is being sent to me in a word format and organized in a vertical columned table with different headers and alternating data. I am looking for a way to export this data from Word into an Excel spre ...

htmlcssexcelvbams-word

Unable to change background-image as intended

Here is an example of my HTML code with an initial background image: <div id="ffff" style="width: 200px; height: 200px; background-image: url('/uploads/backroundDefault.jpg')">sddsadsdsa<br>dffdsdfs</div> Everything seems to b ...

javascriptjqueryhtmlcss

Changing the href of an image when the slide changes: Tips and tricks

Currently, I am utilizing the slick slider slideshow and facing an issue with updating the href of a logo image as the slides progress. Despite trying out two different scripts, none of them have proven to be effective. <main class="Site-content"> & ...

javascriptjqueryhtmlhref

Creating an Array in jQuery to Store Selected and Unselected Items

Looking for a way to collect all selected items from a form and save them in an array, as well as gather the non-selected elements and store them in a separate array. <select multiple id="conditionBad" name="conditionBad"> <option class=" ...

jqueryhtmljquery-selectors

Can the ::before selector be used in HTML emails?

Hey there, I have a question that might sound silly but I'm having trouble finding an answer online. My issue is with styling the bullet point before a list item in an HTML email. All I want to do is change the bullet point to a square and give it a ...

htmlcssemail

The validation of the form does not seem to be functioning properly when the 'required' rule is used

I have implemented the Required form validation in my input fields to prevent submission with empty data. However, it seems like my required validation is not functioning as expected. function AddCar() { const [chasis, setChasis] = useState("" ...

htmlreactjsreact-hooks

Web page containing information from IPv6 and IPv4 sources exclusively

Is it possible to have an HTML5 page accessible through both IPv4 and IPv6, while only allowing CSS style and JavaScript from other domains via IPv4? Unfortunately, it seems that this setup does not function properly for pure IPv6 connections. Will th ...

javascriptcsshtmlipv6

Is it possible for me to add some PHP code to the action of a form?

Within a foreach loop, I have the following code that lists unique codes as links: <a href="" class="charcoal_link" style="line-height: 20px;" onclick="showMessageArea(this); return false;" > <?php echo $uniqueCode1?><span class="pink_tex ...

phphtml

Issue with toggling in react js on mobile devices

Currently, I am working on making my design responsive. My approach involves displaying a basket when the div style is set to "block", and hiding it when the user browses on a mobile device by setting the display to "none". The user can then click on a but ...

javascriptcssreactjstypescripttoggle

Struggling to make align-content function properly in a CSS flexbox layout grid

Utilizing CSS flexbox for designing a grid of items that wrap on resizing the page. Wanting to achieve a horizontally centered grid, successfully done with justify-content: center;. However, facing an issue where the last box in some cases is centered inst ...

htmlcssflexbox

Two variations of identical descriptions within a single div container

Is there a way for me to use an item, specifically an img, within the same div class but with different definitions? For example: section .row img { margin: 0 0 30px; width: 100%; border: 4px solid #18a00e; } section .row img { margin: 0 ...

htmlcss

Discovering the mean value from a data set in a spreadsheet

I have been tasked with creating an HTML page for a car dealership using JQuery and Bootstrap 5. The goal is to utilize Bootstrap 5 to accomplish the following: Set up a table with appropriate form input elements that allow users to input four (4) quarter ...

javascripthtmljqueryaveragebootstrap-5

Automatically generating table through CSV file upload utilizing MySQL and PHP

My attempt to create a table by defining a table name first seems to be causing an issue in my code. I am encountering the following error message: An SQL syntax error has occurred; please refer to the MySQL server version manual for the correct syntax ...

phphtmlmysqlcsv

Refresh the dropdown menu selection to the default option

My HTML dropdown menu includes a default option along with dynamically generated options using ng-options. The variable dropdown is bound to the dynamic options, not the default one. <td> <select ng-model="dropdown" ng-options="item as item.n ...

javascripthtmlangularjshtml-select

The collapsible navbar vanished, where did it go?

While experimenting with the carousel template page, I noticed that the NavBar collapses when the screen width is reduced below a certain pixel size. Initially, everything was working fine as intended. However, after making some modifications to the carou ...

htmlcsstwitter-bootstrap

Using Dynamic Jinja HTML to Select Elements Dynamically

I have a unique system where forms are dynamically created based on values from a dictionary. Each form is assigned an ID corresponding to the key value and initially hidden. <div id="subforms" style="display: none" > {%for k, v in options.items() ...

javascriptpythonhtmljinja2