Lists and images

HTML & CSS
1

Hi

wondering if anyone can help

I’m struggling to know why I can’t position the tick in this list

http://www.muslimahwebdesign.co.uk/wordpresstutorials/make-money-with-no-money-wealthy-affiliate/
password: wealthyaffiliates

any help much appreciated

2

Forgive the quick, but obtuse reply.

Please take a look at the example in this post and see if it helps.

In short, the check mark could be positioned to the left of the text in the default <ul> padding.

If this doesn’t do it for you, I’ll be more specific.

3

sorry I’m a little confused, I’ve tried putting padding on the left and - padding but nothing seems to be working.

What is the :before for? Do I need to be using that?
also for some reason there seems to be styles for widget li and I’ve classed it as .styled_list so I’m not sure what styling is working

Can you shed any light for me?

4

OK, this basic example is based on your code and looks like it should work:


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>positioning list markers</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1209179-lists-and-images
2014.05.18 15:06
hantaah
-->
    <style type="text/css">
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
ul {
    list-style:none;
    padding:0;
    margin:0;
}
li {
    outline:1px solid lime;   /* TEST Outline. To be deleted */
    border-bottom:1px dotted #efefef;
    background-image:url("http://muslimahwebdesign.co.uk/wp-content/themes/maestro/assets/img/icons/red-check.png");
    background-repeat:no-repeat;
    background-position:0 1em;   /* adjust vertical position as needed */
    font-size:14px;
    padding:8px 0 8px 30px;    /* adjust left padding as desired */
}
h3 {
    font-size:18px;
    line-height:1.35em;
    font-family:'Raleway','Open Sans',sans-serif;
    margin:0;
}

    </style>
</head>
<body>

<ul>
    <li>testing text</li>
    <li><h3>testing text</h3></li>
    <li><h3><span>testing text</span></h3></li>
    <li><h3><span><span>testing text</span></span></h3></li>
</ul>

</body>
</html>

This is a standalone working example that demonstrates how to pad the left edge of the text and put the background-image with the red-check in the top left corner of the list item box.

5

OK, that was too much.

Try this then:

http://www.muslimahwebdesign.co.uk/wordpresstutorials/wp-content/plugins/wplms-customizer/css/custom.css?ver=3.9.1
(line 93)


.widget ul li {
    border-bottom: medium none !important;
    [color=blue]padding: 0 0 10px 30px !important;    /* change this style */[/color]
    [color=blue]background-position:0 1em;   /* ADD this style  */[/color]
}

[color=blue]h3 {margin:0.5em 0;}  /* ADD this style  */[/color]
6

Thanks @ronpat; I tries the last one. The list is much better allow the arrows need to be down a little more but it’s also changed the appearence of the box the stars are in above.

I’m a little confused, list always stump me

7

thanks Thanks @ronpat ; for helping me with my list issues. I think I finally may be getting them.

I was wondering if you knew how to make it so there is not so much spacing between them?

http://www.muslimahwebdesign.co.uk/wordpresstutorials/wealthy-affiliate-university-reviews/

8

There are several factors to be considered and adjusted. These are three of them.

style.css (line 1734)


.widget ul li {
    border-bottom: 1px dotted #EFEFEF;
    display: inline-block;
    font-size: 14px;
    padding: [color=red]8px[/color] 0;  /* override this padding on your local stylesheet. */
    width: 100%;
}

To do that, add this to your local stylesheet to override the 8px vertical padding shown above.


[color=blue].widget ul li {padding:0;}[/color]

Change bootstrap’s margin-top for the <h3> element:

bootstrap.css (line 417)


h1, h2, h3 {
    margin-bottom: 10px;
    margin-top: [color=red]20px[/color];    /* change to 10px or thereabouts on your local stylesheet */
}

On your local stylesheet, override the value of the top margin applied by bootstrap to something less:


[color=blue]#styled_list h3 {margin-top:10px}[/color]  /* just a suggestion */

Adjust the position of the red-check by reducing 34px to something like 17px. The actual value will depend on the h3 {margin-top: value ;} that was changed in the previous step.

custom.css (line 59)


ul#styled_list li {
    background-image: url("http://muslimahwebdesign.co.uk/wp-content/themes/maestro/assets/img/icons/red-check.png");
    background-position: 0 [color=red]34px[/color];    /* change to 17px or thereabouts */
    background-repeat: no-repeat;
    border: medium none;
    padding-left: 40px;
}

There should not be any interactions, but always test carefully after each step. :slight_smile:
The overrides may have to be more specific to avoid affecting other pages.

9

that’s looking much better now. Do you think?

btw does it make a negative effect on a site when you use css to overide?

10

When using a theme, it is best to NOT make changes on the original theme files. Should the supplier send updates to a theme, your changes would be lost. If your changes are made to a local stylesheet, then your changes are preserved. Overrides are very common practice when working with themes. Where a theme style may apply to all selectors, such as the vertical padding applied to the list items, it can be overridden on a local stylesheet to target the list items on a specific page or in specific object (container, selector,…).

11