Issues arising with the styling of list items using custom images

I've run into an issue with my bullet list while trying to use an image instead of regular bullets for a class project. The image is not aligning properly with the list and seems to be embedded within the text.

Here's the HTML code I have for this section:

     li {
       background: url('http://s30.postimg.org/52wxo16t9/bullet_Image.png') 2px 4px no-repeat;
       display: list-item;
       padding: 3px 3px 3px 20px;
       overflow: visible;
       list-style: none;
     }
<ol>
  <li class="planet">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li class="planet">Aliquam tincidunt mauris eu risus.</li>
</ol>

htmlcss

Answer №1

To easily add a custom image to your ordered list, simply use the list-style-image property within your CSS.

ol {
    list-style-image: url('your_image_url');
}

See an example here

Answer №2

Here is a different version:

li{
        background:url('http://s30.postimg.org/52wxo16t9/bullet_Image.png') no-repeat;
        background-size: 10px 10px;
        display: list-item;
         background-position:0px 7px;
        padding: 3px 3px 3px 20px;
        overflow: visible;
        list-style: none;
    }

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

Incorporate an Ajax request onto an existing link within a div element

Here is what I have: <div id="div-for-ajax-onclick"> <a href="http://www.google.com">Link to google</a> </div> $("#div-for-ajax-onclick").click(function() { // update database }); I am looking for a solution where if someone c ...

javascripthtmlajaxhyperlink

developing a sleek visual transition using CSS animation

Have you seen the awesome animation on Discord's website? Check it out here! The way those coins move up and down so smoothly is really impressive. How can I recreate that effect for my own images? I decided to start with this code snippet img { ...

cssanimation

Display a partial view dynamically without having to go back to the MVC controller

My div contains a partial view that is loaded dynamically based on data from the database. It can be students, employees, or any other type. I am utilizing MVC in the front end and web API in the back end. Instead of returning an MVC controller to view th ...

jqueryasp.net-mvchtmlasp.net-web-api2

Embed a variable into an HTML element without affecting the inner HTML content

I am trying to inject a specific string into an HTML tag <td anyElement="{{myString}}" >some random text here </td> My desired interpretation is as follows: <td anyElement='Some string'>some random text here </td> Howe ...

javascripthtmlangularjs

Click on the canvas to fill a specific area with JavaScript

My goal is to implement a JavaScript function that will shade specific areas of canvas drawings when clicked. Below is the code I have that draws a square inside a circle. <!DOCTYPE HTML> <html> <head> </head> <body&g ...

javascripthtmlcanvashtml5-canvas

How can I modify the orientation of the arrow and switch sides in a dropdown submenu?

I am working on creating a menu with dropdown-submenu functionality using CSS. .dropdown-menu { float:left; } .left-submenu { float: none; } .left-submenu > .dropdown-menu { border-radius: 6px 0px 6px 6px; left: auto; margin-lef ...

csshtmldrop-down-menubootstrap-modal

height-full card-header style in bootstrap

https://i.sstatic.net/lT8kk.png Is there a way to align cards in a group without breaking the layout when using height-full in card-header? <div class="pb-5 row justify-content-center"> {% for movie in movie_list %} <div ...

htmlflaskbootstrap-4

Attempting to decipher the @media queries CSS code responsible for the slider on this particular website

I'm having trouble with the cover not fully expanding when the browser size is less than 750. I am new to using bootstrap. For reference, I am looking at this website: CSS .slide-wrapper { position: relative; } /* Not using now .carousel-caption ...

cssruby-on-railstwitter-bootstrap-3

Calculating the width of div elements within a horizontal gallery that includes a scrollbar

My website, vladimirvojtela.com, features a gallery with a horizontal scrollbar that leaves whitespace at the end due to the width parameter in the code. Can anyone suggest a script that can automatically adjust the DIV width after all images have been ren ...

htmlcssscrollbargallery

How to use Jquery to fetch the value of a td element nested inside another

After consulting the manual, I am trying to find a way to extract the value in the second column of a table when a specific span is clicked. However, the challenge is that the click event is currently being triggered by the first span cell. Here is the jQu ...

javascriptjqueryhtmljquery-ui

Make sure that the iframe loads the next page with enough force to break out

My dilemma involves an iframe that loads the new tab page. When a user clicks on the thumbnail, it opens within the iframe. My goal is to have any subsequent load in the iframe redirected to window.top. Is there a way to achieve this without manually setti ...

javascripthtmliframefirefox-addon

Creating a Shadow Effect on CSS Triangles

I have created a unique design that resembles a large arrow pointing to the right. <div style=" font-size: 0px; line-height: 0%; width: 100px; border-bottom: 80px solid #8cb622; border-right: 62px solid #dadbdf; "></div> <div style=" font ...

css

Adjust the navigation menu to display or hide as the page is being scrolled

Implementing an offset to display/hide the navigation menu when the page is scrolled 100px. Attempted to modify from lastScroll = 0 to lastScroll = 100 but it did not work as expected. Jquery: Fiddle // Script lastScroll = 0; $(window).on('scroll&ap ...

javascriptjqueryhtmlscrolloffset

Mastering the utilization of React props within a Tailwind component

Looking to implement a straightforward button component in a Next App using Tailwind CSS, where I can pass values such as background color, text color, etc. through props and use them to render different types of buttons within my application. Take a look ...

cssreactjsnext.jstailwind-csstailwind-in-js

Apply CSS using JQuery at the start of an event and then revert it back at the end

Is there a way to notify users that the site is loading while a function with noticeable execution time is running? I have an associated change function which is connected to a drop down filter used for sorting through data on the page. $("#job_group").ch ...

javascriptjquerycss

My webpage lacks responsiveness

I've recently put together an HTML page, but unfortunately, it's not responsive. My Code <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> ...

htmlcss

How can I extract a substring from a URL and then save it to the clipboard?

Hi there! I'm working on a project for my school and could really use your expertise. I need help extracting a substring from a URL, like this one: URL = https://www.example.com/blah/blah&code=12432 The substring is: 12432 I also want to display ...

javascripthtmljquerycssweb

The flexbox container refuses to expand, causing the content to spill over the edges of

I am facing an issue with my flexbox container in React and Bootstrap. Despite following the correct grid system of container, row, and column, my container is stuck at a fixed height causing the content to run off the page when there are too many elements ...

htmlcss

When using React Router, make sure to set the navigation tab's style class to "active" if you are

I'm currently working on a React and react-router application that uses 2 nested routes to create a total of 3 routes: /, /about, /contact. When I click on the Links to navigate to each route, the tab on my navigation bar - which is located in the par ...

javascriptcsstwitter-bootstrapreactjsreact-router

Creating a clickable background image for the entire page

While working on a friend's website, I came across an advertisement that covers the entire background of the site. The current background image is set using CSS: body { background-attachment:scroll; background-color:#000000; background-image:url("htt ...

jquerycss