Swap the contents of a list with a corresponding image

Having trouble replacing text (link) inside a list with an image. Can't seem to get it working

Here's my code:

HTML:

<div id = "headeranna"> 
    <ul>
        <li><a href="#" id="annaklein">Ask Anna</a></li>
        <li><a href="#">Ask Anna</a></li>
    </ul>
</div>

CSS:

#headeranna {
    position: absolute;
    margin-left:410px;
    margin-right: 10px;
    margin-top: -90px;
    float:right;
}

#annaklein{
    display:block;
    width: 26px;
    height: 26px;
    background: url(small_anna.gif);
    text-indent: -9999px
}

Seems like nothing is happening when I try this. Any idea what I'm missing?

htmlcss

Answer №1

There are a variety of issues that can arise:

  • incorrect URL for the image
  • image size too large with transparent or matching background in the top left corner
  • and so on...

I recommend using the background like this:

background: transparent url(small_anna.gif) top left no-repeat;

or at least try this:

background: red; /* start by checking if you can see the background */

It may also be helpful to showcase your code on JSFiddle, where others can assist with troubleshooting.

Answer №2

Using quotation marks is a recommended practice

  background: url("small_anna.gif");

On another note...

An absolutely positioned element will always have a computed float value of "none". Therefore, the declaration in #headeranna float:right; is unnecessary.

Ensure that the file path for your image is correct in relation to your document

You can view this background in action here fiddle (I adjusted some margin values for demonstration purposes)

Answer №3

Give this CSS code a go:

#annaklein{
list-style-type: none;
list-style-image:url("small_anna.gif");
width: 26px;
height: 26px;
text-indent: -9999px;}

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

Using a variable as an argument for a DOM function in JavaScript

I found this code snippet on a website and made some changes to it. However, the modified code below is not functioning as expected. My goal was to hide the div with the id "demo1", but for some reason, it's not working. What could be causing this is ...

javascripthtmldom

Why is it that in IE9, submitting a basic form using jQuery doesn't seem to work?

Take a look at the code snippet below: <html> <head> <style type="text/css"> #myform {display:none;} </style> </head> <body> <button type="button" id="uploadbutton">Upload Images</button> <form name="myf ...

javascriptjqueryhtmlforms

Is it possible for me to create a CSS class based on a condition using [ngCLASS]?

I am struggling with logic writing in my Angular2 project. On a HTML page, I have two buttons - YES and NO that I want to style with different colors. I have set up a condition in the div tag like this: ngClass="'result'?'yes':' ...

jquerycssangularangular2-templateangular2-forms

Mirror your html and css horizontally

Currently, I am working on a project that requires the implementation of a unique feature: two trees positioned next to each other, creating a mirror effect. Please refer to the visual representation: While I have managed to successfully flip the trees ho ...

htmlcssextjsflip

Is there a way to convert basic less code into CSS using VS2012 and Web Essentials?

I'm encountering an issue with the following less code: .aa { > { li { color: red;} } } After running this in Visual Studio 2012 with the latest web essentials, I am getting a compiler error on line 2. Is this really correct? As f ...

cssvisual-studio-2012less

Zooming in on the background with an animated effect

I'm experimenting with a zoom in animation on a background image for a brief moment. It seems to work initially but then resets itself. To see an example, I've created a jsfiddle link: https://jsfiddle.net/onlinesolution/tk6rcLdx/ Any idea what ...

csscss-transitionscss-animations

Display Content in a DIV When Form Field is Unfocused

After hours of searching, I still haven't found a solution! I am trying to create a form field (text) where users can type in text. I want the text they enter to appear in a div on the screen either as they type or after they finish typing. Maybe thi ...

javascriptjqueryhtml

Display additional text when hovering over an object

Is there a way to make my text expand and display all of its content when hovered over, especially for those sections that are longer than the div size? I currently have some code implemented, but it seems to reveal the text horizontally. I am looking fo ...

htmlcss

continuously repeating css text animation

How do I create an animation loop that slides infinitely, repeating non-stop in full screen without breaking at 'hello5'? I want to display 3 rows of the same item from my items array. Not sure which CSS is causing the issue. The result I am loo ...

htmlcssvue.js

The feature for automatically hiding other dropdowns when one is open is not functioning properly

Trying to finalize a mega menu that almost works. I need help with closing all other open mega menus when a user clicks on one. Check out the JavaScript code snippet I've written below. The mega menu currently toggles correctly, but it doesn't h ...

javascripthtml

Move the scss .map file to a separate directory within Intellij IDEA

I have a specific structure set up in my styles folder within the project directory. It includes three subfolders: css, scss, and css-maps. My goal is to automatically update a corresponding CSS file in the css folder and a .css.map file in the css-maps fo ...

cssintellij-ideasass

What is the best way to bring HTML files into the dist directory?

When working in my development environment, I utilize the following code: res.sendFile(path.resolve(__dirname,'../Views/setpwd.html'); It functions correctly within the development environment. However, when moving to production, the Views are ...

htmlnode.jsexpresswebpack

Make the Angular Modal scrollable except for when a specific div is being click dragged

I am working on an Ionic app that uses AngularJS. One issue I encountered is with a modal popup that can sometimes extend beyond the visible area. To address this, we applied overflow: hidden to its CSS class. However, there is a specific functionality i ...

cssangularjshtml

Align the text in the center of the image, which is depicted as a bullet point

I am currently using images as bullet points for my Github Pages (markdown files), following the instructions outlined here. My goal now is to vertically center the text next to the image. This is demonstrated here (cf. lower third of page), however, I am ...

htmlcssmarkdowngithub-pagesinline-styles

Display the element only when the input is in a selected state using CSS

Looking for a way to display an element when an input field is selected without using JavaScript? Preferably, the solution should not involve placing the element within the input field. Unfortunately, targeting the element in CSS with the :active selector ...

htmlcss

Position the menu directly below the MaterialUI appbar

Here is a method for positioning a Menu (popover) below its parent item using the anchorEl. However, I am curious if there is an easier way to adjust the menu placement to be directly under the appbar while still aligning horizontally with the parent butto ...

jquerycssreactjsmaterial-ui

Displaying an array value instead of a new value list in a React component

Situation - Initial number input in text field - 1 List of Items - 1 6 11 Upon removing 1 from the text field, the list becomes - New List Items - NaN NaN NaN Now, if you input 4 in the field. The updated List Items are - NaN NaN 4 9 14 Expected ...

javascripthtmlcssreactjsreact-usecallback

Applying CSS to select a different element style within a webpage

I was thinking about the possibility of linking one style to another using events like :focus or :hover in CSS alone, without the need for JavaScript. For instance, can the class "hitArea" change the background attribute of "changeArea" when it is in foc ...

javascriptcsshtmlweb-applicationsanimation

Problem encountered in Vue.js web application when running NPM, resulting in Error 126

When attempting to compile my Vue.js application using the command npm run prod, I encountered the following error: sh: /Users/antoinevandenheste/Downloads/magicfactory-1/node_modules/.bin/webpack: Permission denied npm ERR! code ELIFECYCLE npm ERR! errno ...

htmlvue.jsnpmnpm-install

What is preventing my div from occupying the entire window space?

Currently, I am attempting to create a div that will occupy the entire height of the window, which is set to 640px, regardless of the content within the <h3> tag. However, I seem to be missing something in my code. I am using an emulator to run the ...

javascriptjqueryhtmlcsscordova