Images in lists

  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6801
  • Loc: Martinsburg, WV

Post 3+ Months Ago

I know I have done this before but for the life of me cannot remember how I did it and it is driving me crazy. Basically it is an ordered list with images placed after some text so it will look something like this:

1. This is some text
image1
2. More text
image2
3. Even more text
image3

Any ideas?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9086
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Numerous ways you could do this. First you could make the text a block level element by putting the text in a div tag within the list. You could also use the break (br) tag. Or you could use a span tag and explicitly set the display as block. Probably other ways you could do this as well.

HTML Code: [ Select ]
<ol>
   <li><div>This is some text</div><img src="image1.jpg"></li>
   <li>More text<br><img src="image2.jpg"></li>
   <li><span style="display:block">Even more text</span><img src="image3.jpg"></li>
</ol>
  1. <ol>
  2.    <li><div>This is some text</div><img src="image1.jpg"></li>
  3.    <li>More text<br><img src="image2.jpg"></li>
  4.    <li><span style="display:block">Even more text</span><img src="image3.jpg"></li>
  5. </ol>
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6801
  • Loc: Martinsburg, WV

Post 3+ Months Ago

I ended up doing this
Code: [ Select ]
<ol>
   <li>Text<br />
   <img src="image1"></li>
   <li>More text<br />
   <img src="image2"></li>
   <li>Even more text<br />
   <img src="image3"></li>
</ol>
  1. <ol>
  2.    <li>Text<br />
  3.    <img src="image1"></li>
  4.    <li>More text<br />
  5.    <img src="image2"></li>
  6.    <li>Even more text<br />
  7.    <img src="image3"></li>
  8. </ol>


The first time I did this, it did not work properly but I may have fat fingered some code. I rewrote it in notepad and then copy/pasted it into the WYSIWYG and it worked as intended. I may look into using the span or div idea though as it might be a little cleaner.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 69 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.