Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy Bullet images for a specific unordered list

    Hi there

    So I'm a bit of a newbie at html/css but I've managed to format my entire sales page page by myself: http://www.thelovevitamin.com/ultima...-acne-freedom/

    I'm on the very last task that I need to do for the page, and it's been kicking my *** for the last 3 to 4 hours. I've tried all sorts of things, but for the life of me, I cannot figure it out.

    What I want to do is this: I want to replace the bullet points on the last list on the page (the one that says "YES I want to clear my skin, YES i want to change my life, etc) with a different image than the other ones. I want it to be a checkmark.

    Here is the url of the checkmark I want to use: http://www.thelovevitamin.com/wp-con...mall-check.jpg

    The css code that I used for formatting the other bullet point images was this:

    body.pageid-1361 div#wrapper ul li {

    margin:0;
    padding: 15px;
    list-style:none;
    background-image:url(http://www.thelovevitamin.com/wp-con...favicon1.ico);
    background-repeat:no-repeat;
    background-position:left center;
    padding-left:50px;
    padding-right:50px;

    }


    I assume this is overriding something.

    Here is the html for the list I want to change the bullet points on:

    Code:
    <ul class="navlist">
    	<li style="text-align: left;">Yes, I want to learn the secrets of permanently clear skin</li>
    	<li style="text-align: left;">Yes, I want to change my life for the better</li>
    	<li style="text-align: left;">Yes, I want to improve my self esteem and happiness</li>
    	<li style="text-align: left;">Yes, I want to GET RID OF MY ACNE ONCE AND FOR ALL!</li>
    </ul>

    ...... please tell me what it is I do I need to do to make this work.

    I've tried so many things. Please let me know if you need more information about what I've already tried. I'm using headway theme if that makes any difference to you.

  • #2
    sac
    sac is offline
    New Coder
    Join Date
    Oct 2011
    Location
    London, UK
    Posts
    12
    Thanks
    2
    Thanked 2 Times in 2 Posts
    Hi,

    you have to create a different class for this new style of bullet/image.

    something like:

    css part:
    [code]

    .checkedbox {
    background:url(http://www.thelovevitamin.com/wp-content/uploads/2011/10/small-check.jpg);
    background-size:9%;
    background-repeat:no-repeat;
    padding:0 0 0 33px;
    line-height:33px;
    }

    [\code]

    html part:
    [code]
    <ul class="navlist">
    <li style="text-align: left;" class="checkedbox"> Yes, I want to learn the secrets of permanently clear skin</li>
    <li style="text-align: left;" class="checkedbox"> Yes, I want to change my life for the better</li>
    <li style="text-align: left;" class="checkedbox"> Yes, I want to improve my self esteem and happiness</li>
    <li style="text-align: left;" class="checkedbox"> Yes, I want to GET RID OF MY ACNE ONCE AND FOR ALL!</li>
    </ul>
    [\code]

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Oh you are awesome. That is definitely the closest I've gotten so far. But it still needs a little work.

    My code is now this:

    body.pageid-1361 .checkedbox {
    background:url(http://www.thelovevitamin.com/wp-con...ll-check.jpg);
    background-size:50%;
    background-repeat:no-repeat;
    padding:0 0 0 33px;
    line-height:33px;
    }


    html:

    Code:
    <ul class="checkedbox">
    	<li style="text-align: left;">Yes, I want to learn the secrets of permanently clear skin</li>
    	<li style="text-align: left;">Yes, I want to change my life for the better</li>
    	<li style="text-align: left;">Yes, I want to improve my self esteem and happiness</li>
    	<li style="text-align: left;">Yes, I want to GET RID OF MY ACNE ONCE AND FOR ALL!</li>
    </ul>
    and now it looks like this:

    http://www.thelovevitamin.com/ultima...-acne-freedom/

    Now... how do I get the checkmark on the other list items, and remove the little green heart things without messing up all my other list bullets?
    Last edited by thelovevitamin; 10-28-2011 at 01:28 PM.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You've set the checkmark to appear as the background on your ul element - it needs to be on the li element as sac suggests. As it stands, you are applying a background image to both the ul and li elements.

    If your html has the checkedbox class on the ul element, then your css needs to be:

    Code:
    body.pageid-1361 #wrapper .checkedbox li{
    background-image:url(http://www.thelovevitamin.com/wp-con...ll-check.jpg);
    }
    Now this css will replace your other background image on the li.

    I'd suggest leaving the class on the ul element as less markup is needed this way.

    You'll need to resize your checked box image as well.
    Last edited by SB65; 10-28-2011 at 01:45 PM.

  • Users who have thanked SB65 for this post:

    thelovevitamin (10-29-2011)

  • #5
    sac
    sac is offline
    New Coder
    Join Date
    Oct 2011
    Location
    London, UK
    Posts
    12
    Thanks
    2
    Thanked 2 Times in 2 Posts
    try to separate the 2 css rules:
    [code]

    body.pageid-1361 div#wrapper ul li {

    margin:0;
    padding: 15px;
    list-style:none;
    background-image:url(http://www.thelovevitamin.com/wp-con...favicon1.ico);
    background-repeat:no-repeat;
    background-position:left center;
    padding-left:50px;
    padding-right:50px;
    }

    .checkedbox {
    background:url(http://www.thelovevitamin.com/wp-content/uploads/2011/10/small-check.jpg);
    background-size:9%;
    background-repeat:no-repeat;
    padding:0 0 0 33px;
    line-height:33px;
    }
    [\code]

  • Users who have thanked sac for this post:

    thelovevitamin (10-29-2011)

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I personally wouldn't rely on background-size as it is not supported in IE8 or less, or FF3 or Safari4.

  • #7
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for your help!

    I did this:

    Code:
    body.pageid-1361 div#wrapper ul li {
    
       margin:0;
       padding: 15px;
       list-style:none;
       background-image:url(http://www.thelovevitamin.com/wp-content/uploads/2011/09/favicon1.ico);
       background-repeat:no-repeat;
       background-position:left center;
       padding-left:50px;
       padding-right:50px;
    
    }
    
    body.pageid-1361 .checkedbox li {
    background:url(http://www.thelovevitamin.com/wp-content/uploads/2011/10/small-check.jpg);
    background-size:50%;
    background-repeat:no-repeat;
    padding:0 0 0 33px;
    line-height:33px;
    }
    But it did this: http://www.thelovevitamin.com/ultima...-acne-freedom/

    Also... about resizing my image... I had already resized it so that the actual size was the size that I wanted, as seen here: http://www.thelovevitamin.com/wp-con...mall-check.jpg

    But when it inserted itself, it was warped to be huge... so I scaled it down to 50 percent and that's when it looked normal! So what should I do about that.... scaling it down with background-size isn't a good idea?

  • #8
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey guys.. sorry for being so daft - I went back and realized I had missed a bunch of stuff in your suggestions. So I corrected it and I managed to get it to work!

    Thank you SO MUCH for your help!!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •