WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Some help with styling a list in CSS (7 posts)

  1. MaddTechWF
    Member
    Posted 4 years ago #

    Okay,
    I have a set a style for my generic ul list to show an image for the bullet points. I'm needing to have a second one that will let me have a different image for each list item. Below I'm attaching my current CSS and HTML for the second list. Can someone please tell me what I'm doing wrong. My images won't show up for my second list.

    CSS

    .box {
    padding-top: 5px;
    }
    
    .services-offered ul.services {
    	margin: 0;
    	padding: 0;
    float: left;
    width: 900px;
    list-style-type: none!important;
    background-image:none!important;
    }
    
    .services-offered ul.services li
    {
    	/* width: 280px; */
    	width: 430px;
    	padding-left: 10px;
    	padding-right: 10px;
    	list-style-type: none!important;
            background-image:none!important;
    }
    
    .services-offered ul.services li.software
    {
            background-image: url('./images/Software.png')!important no-repeat;
            padding-left: 85px;
            padding-bottom: 35px;
    }

    HTML

    <div class="box services-offered">
    <ul class="services">
    	<li class="software"> <strong>Add/Remove Software</strong>
    Have a piece of software you needed installed or a pesky one that will not uninstall???</li>
    	<li class="software"> <strong>Add/Remove Software</strong>
    Have a piece of software you needed installed or a pesky one that will not uninstall???</li>
    	<li class="software"> <strong>Add/Remove Software</strong>
    Have a piece of software you needed installed or a pesky one that will not uninstall???</li>
    	<li class="software"> <strong>Add/Remove Software</strong>
    Have a piece of software you needed installed or a pesky one that will not uninstall???</li>
    </ul>
    </div>
  2. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    how does this code compare with the code for the first working image bullet list?

    could be the image path:
    background-image: url('./images/Software.png')!important no-repeat;

    if the image is in the images folder of the theme, the css would normally be:
    background-image: url('images/Software.png') no-repeat;

    imho, the !important would be positioned just before the ;

    (but this also depends on the location of the css file).

  3. MaddTechWF
    Member
    Posted 4 years ago #

    okay.... so after fiddling around with it some more I got it working for the most part. My only problem now is that some of my text is not showing correctly.... Part of my text is wrapping and covering up art of my image.

  4. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    when you post a link to your site, someone could have a look at it and might be able to give some advice.

  5. gazulos
    Member
    Posted 4 years ago #

    Try this css and html, its much cleaner and easier to manipulate.
    For your second list add a new class to your list, with new image.
    good luck!

    ul { list-style-type: none;}

    li { width:300px; height:20px; margin: 5px; padding:10px 15px;}

    li:hover { background: url(image.jpg) left no-repeat;}

    • Lorem dolor sit ame
    • Lorem ipsum dolor sit ame
    • Lorem ipsum sit ame
    • Lorem ipsum dolor sit ame
  6. MaddTechWF
    Member
    Posted 4 years ago #

    www [dot] qwertytech [dot] net / services

  7. MaddTechWF
    Member
    Posted 4 years ago #

    It works only in Firefox. IE, Safari, and Chrome show it weird.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.