SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Could someone help me figure out how to do?

    Hello everyone. I am trying to use an image for a bullet point on my site, but I also want to move the image, depending on the amount of text. As it is now, it is set up so that a small image sits imediatedly to the left of the top line of text. I want to make it so I can use a larger image, and that image will be to the left of the entire text of the list item, say for example if there is three lines of text, the image would sit to the left of those three lines.

    On the page itself I have this code:

    <li style="list-style-image: url('http://address of the image.jpeg'); text-align: left; font-size: 16px; line-height: 1.5; margin: 10px 100px 10px 0;">text is placed here.</li>

    I have not been able to find the corresponding styling in my style.css file. I will past the section of the stye.css for the lists here:

    ul {
    list-style: square;
    margin: 0 0 18px 1.5em;
    }
    ol {
    list-style: decimal;
    margin: 0 0 18px 1.5em;
    }
    ol ol {
    list-style: upper-alpha;
    }
    ol ol ol {
    list-style: lower-roman;
    }
    ol ol ol ol {
    list-style: lower-alpha;
    }
    ul ul,
    ol ol,
    ul ol,
    ol ul {
    margin-bottom: 0;
    }
    dl {
    margin: 0 0 24px 0;
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Use a background image instead of the list-image because the list-image is awkward and unreliable cross browser. With a background image you have complete control over the positioning. Just use padding left on the list for the space for the background image and the text will stay clear.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    ul#nav {
    	width:50%;
    	margin:0 auto;
    	padding:0;
    	list-style:none;
    }
    #nav li {
    	padding:0 0 0 50px;/* space for bullet image*/
    	background:url(bullet.png) no-repeat 0 0;/* adjust positiion to suit*/
    }
    </style>
    </head>
    
    <body>
    <ul id="nav">
    		<li>Lorem ipsum dolor sit amet lorem ispum dolor ipsum dolor sit amet lorem ispum dolor ipsum dolor sit amet lorem ispum dolor ipsum dolor sit amet lorem ispum dolor ipsum dolor sit amet lorem ispum dolor ipsum dolor sit amet lorem ispum dolor </li>
    </ul>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Use a background image instead of the list-image because the list-image is awkward and unreliable cross browser. With a background image you have complete control over the positioning. Just use padding left on the list for the space for the background image and the text will stay clear.
    ...
    [/code]
    Thank you for your help. Unfortunately I don't know how to integrate the solution into my css file, or on the page itself. The code you shared is an html file, as far as I understand. On my site I have css right in the page where the text is, and also I have a css file. Can I use your code on either of those pages?
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi fifthhouse. Paul's code isn't designed specifically for your site, because we don't know what it looks like. If you could post a link to the relevant page, that would make it easier.

    Otherwise, please post the relevant HTML for your list if you want a more specific answer. Paul's example assumes that your <ul> has an ID of "nav". Of course, that may not be the case, so we'd need to know what class/ID it actually has to be able to target it. If it doesn't have one at all, you could either add an ID or class to it, or target it based on a parent element (like a <div>) that does have a class or ID.

    Edit:


    Assuming the site in question is the one in your signature, you'd need to add something like this to your CSS file:

    Code:
    .entry-content ul {
    list-style: none; 
    margin: 0;
    }
    
    .entry-content ul li {
    padding: 0 0 0 50px; 
    background: url('/wp-content/uploads/2013/01/tinycheck.jpeg') no-repeat 0 0;
    }
    Then remove the inline styles in your HTML. E.g. remove the code in red:

    Code:
    <li style="list-style-image: url('http://mindfulnessangermanagement.com/wp-content/uploads/2013/01/tinycheck.jpeg'); text-align: left; font-size: 16px; line-height: 1.5; margin: 10px 100px 10px 0;">Weekly readings to help you better understand the dynamics of anger and how to free yourself from its grip.</li>


    Once you've done this, you can change the image to suit, and to give it room you would just adjust the padding on the LIs from 50px to something else to suit.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph. That's correct, it's the home page of the url in my signature. Your solution works when I past the css code into my css file. However, I have a number of different images, a different one for each list item, so I am assuming I will have to have the background image code on the html page. I don't know how to go about that, but am trying to figure it out now...
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by fifthhouse View Post
    I have a number of different images, a different one for each list item, so I am assuming I will have to have the background image code on the html page. I don't know how to go about that, but am trying to figure it out now...
    The thing to do is give each <ul> its own class or ID and then target them separately in your style sheet. Here's an example:

    In your HTML, these would be your separate <ul>s:

    Code:
    <ul class="list1">
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
    
    <ul class="list2">
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
    Then, in your CSS, have separate styles for each <ul>:

    Code:
    .entry-content ul {
    list-style: none; 
    margin: 0;
    }
    
    .entry-content ul.list1 li {
    padding: 0 0 0 50px; 
    background: url('/wp-content/uploads/2013/01/tinycheck.jpeg') no-repeat 0 0;
    }
    
    .entry-content ul.list2 li {
    padding: 0 0 0 80px; 
    background: url('/wp-content/uploads/2013/01/bigcheck.jpeg') no-repeat 0 0;
    }
    Does that makes sense?


Bookmarks

Posting Permissions

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