Some help with styling a list in CSS

  • Resolved MaddTechWF

    (@maddtechwf)


    14 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>

Viewing 6 replies - 1 through 6 (of 6 total)
  • Michael

    (@alchymyth)

    14 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).

    Thread Starter MaddTechWF

    (@maddtechwf)

    14 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.

    Michael

    (@alchymyth)

    14 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.

    gazulos

    (@gazulos)

    14 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
    Thread Starter MaddTechWF

    (@maddtechwf)

    14 years ago

    www [dot] qwertytech [dot] net / services

    Thread Starter MaddTechWF

    (@maddtechwf)

    14 years ago

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Some help with styling a list in CSS’ is closed to new replies.