www.webdeveloper.com
Results 1 to 3 of 3

Thread: Help indenting paragraph so ALL text appears "next" to the image

  1. #1
    Join Date
    Mar 2014
    Posts
    1

    Help indenting paragraph so ALL text appears "next" to the image

    Hi All,

    I imagine what I'm trying to do is so simple yet for a novice developer I'm having trouble....

    The Summary: I simply need to know how to get text to show up next to a small image which acts sort of like a bullet point, but without the 3rd and 4th lines of text going UNDER the image. Think of an indent: in a book the first paragraph is indented. What I'm trying to accomplish is like having the entire paragraph indented with an image on the life.

    On an old site of ours developed fully from scratch, we had numbered images with text next to it like this:

    http://screencast.com/t/pgWOUFzA <-- that's what I'm trying to accomplish

    We're redeveloping the site now using the OptimizePress theme so it's easier to edit things without too much web skill, however I keep getting the following look for this section:

    http://screencast.com/t/XqA4c3kuu (notice how the text is BELOW the image number)

    And that is through using this code:

    <span style="float: left;"><img class="alignleft size-full wp-image-183" src="/uploads/2014/03/three.png" alt="one" width="31" height="31" /></p>
    <span style="float: right; padding-left: 10px;">Join the thousands of authors who've been taken advantage of through the hope they 'might' get a large publishing contract.</span>

    Alternatively, when I use a different version of the code I get the first lines of text appearing next to the image, with the rest of the lines of text appearing BELOW the image, as so:

    http://screencast.com/t/VJ9lBdc0MejP

    And that is using this version of the code:

    <p style="text-align: left;"><img class="alignleft size-full wp-image-183" src="http://www.verbii.com/v2/wp-content/uploads/2014/03/three.png" alt="one" width="31" height="31" />Join the thousands of authors who've been taken advantage of through the hope they 'might' get a large publishing contract.</p>

    Any ideas on how I can solve this?

    Thank you!

    E

  2. #2
    Join Date
    Oct 2013
    Posts
    517
    Here's one way:
    HTML Code:
    <div style="width: 50%" id="container">
    	<div style="width: 25%; float: left;"><img class="alignleft size-full wp-image-183" src="http://www.verbii.com/v2/wp-content/uploads/2014/03/three.png" alt="one" width="31" height="31" /></div>
    	<div style="width: 75%; float: left;">Join the thousands of authors who've been taken advantage of through the hope they 'might' get a large publishing contract.</div>
    </div>
    Make adjustments as necessary.

  3. #3
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    Wonder if OL list-style image might be of interest to you. See for example https://developer.mozilla.org/en-US/...st-style-image

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles