Incorporating a non-clickable image into a list item

Here is the code snippet I am working with:

<footer id="footer">
    <ul id="labels">
        <li id="label1">About</li>
        <li id="label2"><a href="">blah</a></li>
        <li id="label3"><a href="">blah</a></li>
        <li id="label4"><a href="">blah</a></li>
        <li id="label5"><a href="">blah</a></li>
    </ul>
</footer>

I want to set a specific image for li items 2-5, but I'm unsure how to do it for label1.

The CSS code I have only works when label1 has an <a href=""> tag. Is there a different approach I should take?

#label1 a { 
    height:9px; 
    width:43px; 
    background: url(/Content/images/footer/about.png) no-repeat 0 0; 
    padding:0; 
}

As a beginner in CSS/HTML, any guidance would be appreciated.

htmlcss

Answer №1

#label1 { /* I've made changes to this rule */
    height: 9px;
    width: 43px;
    background: url(/Images/footer/about.png) no-repeat 0 0;
    padding: 0;
}

eliminate the a part. It targets the <a> element within #label1. Since you intend to style only #label1, removing the a selector is necessary.

Answer №2

To customize the appearance of each label, you can utilize CSS's list-style-image property.

li#labelA{ list-style-image:url('imageA.jpg'); }
li#labelB{ list-style-image:url('imageB.jpg'); }
li#labelC{ list-style-image:url('imageC.jpg'); }
li#labelD{ list-style-image:url('imageD.jpg'); }
li#labelE{ list-style-image:url('imageE.jpg'); }
li#labelF{ list-style-image:url('imageF.jpg'); }

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

Guide on how to print a particular DIV along with its corresponding CSS styling

Is there a way to print a specific DIV in JavaScript while including the styles within it? I have searched through several posts, but haven't found a solution that suits my needs. Is there a single function in JavaScript that can accomplish this? I h ...

javascripthtmlcssprinting

Issue with non-responsive clicks in scrollable/List view on Android device due to CSS styling

Currently, I am facing an issue with my WebApplication where I have a dynamically generated very Long List using JQuery Mobile. The problem I am encountering is that I am unable to click on any item within this scrollable view. Although I can hear the soun ...

androidcssclickoverflowscrollview

Invoke a method in a separate class

I am facing issues with passing variables to another file. I have checked my code multiple times but cannot find a solution. It keeps giving me an error in the function. onclick="limit();javascript:AyudaTipos(2)"/> The function is: function limit ( ...

javascriptphphtmlmysqlajax

What is the method to display HTML code using JavaScript within a span element in a JSP page?

While working on a jsp file, I came across a span tag with the following code: <span id="divBasicSearchResults" style="height:100%;"></span> Below is the Javascript function that generates HTML content for this span: function renderBasicSear ...

javascripthtmlcssjsp

PHP code isn't showing any posts

Context: I have implemented a PHP loop to generate a dynamic feed of my portfolio posts on my WordPress website. Issue: The first five posts are being displayed correctly, but the subsequent posts are not. I'm uncertain about the underlying cause and ...

phphtmlcsswordpressloops

Create an element that can be dragged without the need to specify its position as absolute

I am having an issue where elements I want to drag on a canvas are not appearing next to each other as expected. Instead, they are overlapping: To make these elements draggable, I am utilizing the dragElement(element) function from https://www.w3schools.c ...

javascripthtmlcsspositiondraggable

Using jQuery, prevent the user from entering text into an input box when a checkbox

In my project, there is a checkbox that determines whether an input box is disabled. The issue arises when I try to disable the input based on the database value. For example, when the value is 0, it should display as disabled false; however, the input rem ...

javascriptjqueryhtmlajax

Show off a font-awesome icon overlapping another image

My task involves fetching image source from a JSON file and then displaying it on an HTML page. https://i.sstatic.net/coOaU.png I also need to overlay a Font Awesome icon on top of the image as shown below: https://i.sstatic.net/nbrLk.png https://i.sst ...

javascriptjqueryhtmlcssjson

Adjust padding of elements based on scrolling movements

Currently, I am attempting to adjust the padding of a specific element based on how far down the page the user scrolls. Ideally, as the user scrolls further down the page, the padding will increase, and as they scroll back up, the padding will decrease. H ...

javascriptjqueryhtmlcss

Text overflowing from image on Bootstrap 4 card with image overlay

Having an issue with the text overlay on my image, especially on mobile (small/xs) screens where the play button and title are extending beyond the image due to long paragraph text. Which bootstrap class should I adjust to fix this issue? I was expecting t ...

htmltwitter-bootstrapcssbootstrap-4

What is the best way to incorporate a logo container and a horizontal divider into my top navigation bar using Bootstrap?

I'm currently working on designing a top navigation bar that features a logo with color #1 as the background on the left side. The logo is then separated by a grey horizontal divider, followed by color #2 representing the application name beside the d ...

javascripthtmlcss

Include a condition to check the value of each row (angular material)

I am facing an issue where I need to apply a condition based on the value of the current column, but I am unable to access the value of the current row. I am unsure which variable to use in order to check the condition. I tried using 'row' but it ...

htmlangulartypescriptangular-materialmat-table

Switching button class when hovering over another div

When you click on the "collapsible-header" div, I want the text "TE LAAT" in the button to change to "NU BETALEN". Currently, the CSS code changes the text on hover, but I want it to change on click when the collapsible-header also has the active class. T ...

javascriptjqueryhtmlcssonclick

Adjustable height for text input field

Is it possible to adjust the height of a textarea dynamically based on user input, rather than relying on scrollbars when content exceeds the width and height of the field? <textarea class="form-control"></textarea> For instance, if a user ty ...

javascripthtmlcsstwitter-bootstrap

What is the most effective way to reduce the length of user input in a textarea and set limits on both the maximum

Is it possible to adjust the length of input and textarea and show the remaining words left? My goal is to have a total length of 200 characters for both input and textarea fields. <input type="text" id="b" name="b" value="Hi world !" maxlength="50"&g ...

javascriptjqueryajaxhtml

What is the best way to incorporate a horizontal scroll bar at the top of a table?

<div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th> ...

csscodeigniterbootstrap-4

Typehead.js on Twitter is displaying the full query instead of just the value

The Problem This is the issue I am facing with my code. My goal is to retrieve only the value, but instead of that, the entire query value is being returned. var engine; engine = new Bloodhound({ local: [{value: 'red'}, {value: 'blue&apo ...

javascriptjquerycssnode.jstypeahead.js

Side menu and grid display using HTML and CSS

Looking to revamp the layout of my angularJS website, specifically one page. Currently, information is displayed in a table format but I would like to switch it up by adding a left sidebar featuring a list of names (tiles). When a user clicks on a name, th ...

htmlcssangularjs

Angular's ng-model is unable to access the value of an object array

When selecting the days, users should be able to input check-in and check-out time ranges dynamically. However, there seems to be an issue with retrieving the values and data format. The ng model is unable to capture the check-in and check-out values. The ...

htmlangulartypescript

JavaScript: selecting multiple elements with identical attributes

I'm struggling to target all a tags with the 'data-caption' attribute. I attempted to do this by: first selecting all the a tags let links = document.querySelectorAll('a'); and then trying to access their attributes links.get ...

javascripthtmlloopsgetattribute