Looking for recommendations for adding indents

I am looking for recommendations for adding a variety of 5-20 space line indents between image and text within my html blocks. So far all I have is inserting bullets and coloring them the same as background. Looks horrible in editor. Research tells me this can be done with CSS but not too sure where and how to do this with dolphin html blocks.

create css

create file with what you want in block

include the file into block

like we always say... can you provide screen shot then we can help you better.

Deano will know better ...

create css file you want and just include it ?

I have attached a small screen shot, hope it helps. Just not sure what to write for CSS, where, how, etc. Just wondering if anyone else has done this and can give me an idea. Thanks.

you can do it with firebug in FF.

then you select the div that holds the content info and check in wich CSS file where the css info for that class it located.

Then you can you add margin-left: 30px; or margin-right:30px;

i hope that helps you a bit.

if you have website url for me i can check it for you. Or PM me with the url info

this is probably a long winded way of doing it for most people but this is what i put in a html block as i'm not good enough to mess around with css files, 

in my example: 800px=total width / 200=width of image / 100=space between image and text / 500=width of text area

<table border="0" cellspacing="0" cellpadding="0" style="width: 800px; margin-left: auto; margin-right: auto;">

<tbody>

<tr>

<td width="200" valign="top">

<div id="1"></div>

<p><img src="URL TO IMAGE GOES HERE" /></p>

</td>

<td width="100" valign="top"> </td>

<td width="500" valign="top">

<div id="2"></div>

<p>YOUR TEXT GOES HERE</p>

</td>

</tr>

</tbody>

</table>

Something like this.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine voluptatem vocant. Sed mehercule pergrata mihi oratio tua. Conferam avum tuum Drusum cum C. Neque solum ea communia, verum etiam paria esse dixerunt. Duo Reges: constructio interrete. Non modo carum sibi quemque, verum etiam vehementer carum esse? Aliter enim explicari, quod quaeritur, non potest. Quae cum dixisset paulumque institisset, Quid est?

Compensabatur, inquit, cum summis doloribus laetitia. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur. Cur deinde Metrodori liberos commendas? Miserum hominem! Si dolor summum malum est, dici aliter non potest. Pauca mutat vel plura sane; Quid est enim aliud esse versutum? Et non ex maxima parte de tota iudicabis?

Ad eas enim res ab Epicuro praecepta dantur. Erat enim Polemonis. Minime vero istorum quidem, inquit. Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum. Sit hoc ultimum bonorum, quod nunc a me defenditur; Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri potest. Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum. Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat.

Nescio quo modo praetervolavit oratio. Non dolere, inquam, istud quam vim habeat postea videro; Cur igitur, inquam, res tam dissimiles eodem nomine appellas? Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Ita ceterorum sententiis semotis relinquitur non mihi cum Torquato, sed virtuti cum voluptate certatio. Eaedem enim utilitates poterunt eas labefactare atque pervertere. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur.

Egone non intellego, quid sit don Graece, Latine voluptas? Nulla erit controversia. Equidem etiam Epicurum, in physicis quidem, Democriteum puto. Si id dicis, vicimus. Haec dicuntur inconstantissime.


The code for that is this.


<div> <img style="float: left; padding-right: 20px; padding-bottom: 20px;" src="http://antenna.animeblogger.net/images/icons/series/fullsize/vampire_knight_guilty.png" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine voluptatem vocant. Sed mehercule pergrata mihi oratio tua. Conferam avum tuum Drusum cum C. Neque solum ea communia, verum etiam paria esse dixerunt. Duo Reges: constructio interrete. Non modo carum sibi quemque, verum etiam vehementer carum esse? Aliter enim explicari, quod quaeritur, non potest. Quae cum dixisset paulumque institisset, Quid est? </p>
  <p>Compensabatur, inquit, cum summis doloribus laetitia. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur. Cur deinde Metrodori liberos commendas? Miserum hominem! Si dolor summum malum est, dici aliter non potest. Pauca mutat vel plura sane; Quid est enim aliud esse versutum? Et non ex maxima parte de tota iudicabis? </p>
  <p>Ad eas enim res ab Epicuro praecepta dantur. Erat enim Polemonis. Minime vero istorum quidem, inquit. Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum. Sit hoc ultimum bonorum, quod nunc a me defenditur; Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri potest. Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum. Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. </p>
  <p>Nescio quo modo praetervolavit oratio. Non dolere, inquam, istud quam vim habeat postea videro; Cur igitur, inquam, res tam dissimiles eodem nomine appellas? Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Ita ceterorum sententiis semotis relinquitur non mihi cum Torquato, sed virtuti cum voluptate certatio. Eaedem enim utilitates poterunt eas labefactare atque pervertere. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. </p>
  <p>Egone non intellego, quid sit don Graece, Latine voluptas? Nulla erit controversia. Equidem etiam Epicurum, in physicis quidem, Democriteum puto. Si id dicis, vicimus. Haec dicuntur inconstantissime. </p>
</div>

Thanks for the tip Deano, just wonder if there is any way to have all text line up as a margin to the left, nor wrapped around the image. I hope the attached screen capture helps my explanation.

place within table with 2 columns ....

1st column = your pic (align top)

2nd column = the info etc

As Detective08 pointed out. Table it.

Code Below.

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top" style="padding-right: 20px;"><img src="http://antenna.animeblogger.net/images/icons/series/fullsize/vampire_knight_guilty.png" /></td>
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine voluptatem vocant. Sed mehercule pergrata mihi oratio tua. Conferam avum tuum Drusum cum C. Neque solum ea communia, verum etiam paria esse dixerunt. Duo Reges: constructio interrete. Non modo carum sibi quemque, verum etiam vehementer carum esse? Aliter enim explicari, quod quaeritur, non potest. Quae cum dixisset paulumque institisset, Quid est? </p>
      <p>Compensabatur, inquit, cum summis doloribus laetitia. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur. Cur deinde Metrodori liberos commendas? Miserum hominem! Si dolor summum malum est, dici aliter non potest. Pauca mutat vel plura sane; Quid est enim aliud esse versutum? Et non ex maxima parte de tota iudicabis? </p>
      <p>Ad eas enim res ab Epicuro praecepta dantur. Erat enim Polemonis. Minime vero istorum quidem, inquit. Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum. Sit hoc ultimum bonorum, quod nunc a me defenditur; Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri potest. Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum. Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. </p>
      <p>Nescio quo modo praetervolavit oratio. Non dolere, inquam, istud quam vim habeat postea videro; Cur igitur, inquam, res tam dissimiles eodem nomine appellas? Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Ita ceterorum sententiis semotis relinquitur non mihi cum Torquato, sed virtuti cum voluptate certatio. Eaedem enim utilitates poterunt eas labefactare atque pervertere. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. </p>
      <p>Egone non intellego, quid sit don Graece, Latine voluptas? Nulla erit controversia. Equidem etiam Epicurum, in physicis quidem, Democriteum puto. Si id dicis, vicimus. Haec dicuntur inconstantissime. </p>
      &nbsp;</td>
  </tr>
</table>


Result is this.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine voluptatem vocant. Sed mehercule pergrata mihi oratio tua. Conferam avum tuum Drusum cum C. Neque solum ea communia, verum etiam paria esse dixerunt. Duo Reges: constructio interrete. Non modo carum sibi quemque, verum etiam vehementer carum esse? Aliter enim explicari, quod quaeritur, non potest. Quae cum dixisset paulumque institisset, Quid est? Compensabatur, inquit, cum summis doloribus laetitia. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur. Cur deinde Metrodori liberos commendas? Miserum hominem! Si dolor summum malum est, dici aliter non potest. Pauca mutat vel plura sane; Quid est enim aliud esse versutum? Et non ex maxima parte de tota iudicabis? Ad eas enim res ab Epicuro praecepta dantur. Erat enim Polemonis. Minime vero istorum quidem, inquit. Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum. Sit hoc ultimum bonorum, quod nunc a me defenditur; Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri potest. Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum. Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. Nescio quo modo praetervolavit oratio. Non dolere, inquam, istud quam vim habeat postea videro; Cur igitur, inquam, res tam dissimiles eodem nomine appellas? Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Ita ceterorum sententiis semotis relinquitur non mihi cum Torquato, sed virtuti cum voluptate certatio. Eaedem enim utilitates poterunt eas labefactare atque pervertere. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Egone non intellego, quid sit don Graece, Latine voluptas? Nulla erit controversia. Equidem etiam Epicurum, in physicis quidem, Democriteum puto. Si id dicis, vicimus. Haec dicuntur inconstantissime.

Well, yes, a table will do the job.  However, HTML markup is not suppose to be used for presentation.  Tables are to be used for columnar data such as presenting data from a spreadsheet.

 Serious question ... Does it really matter if you are getting the result you require ?

I mean is this considered as 'bad coding' ?

If the paragraph has a <p>....</p> tag you will be able to single it out and apply a left margin.  Can you provide the url?

A table is perfect for what he wants to do.

Divs are more difficult in this case. This is due to the fact that the text in the right div will prevent floating from working as expected unless you give a width to both divs that fits within the block your using. The table is just way easier to do.

 
You can. <p style="margin-left: 20px;">;

I don't have a url. I did this here. On this site. I did not design a page on my site for it.

If your looking to indent just the start of a pargraph. Then you use style of text-indent like so.

<p style="text-indent: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece   donan, Latine voluptatem vocant. Sed mehercule pergrata mihi oratio tua.   Conferam avum tuum Drusum cum C. Neque solum ea communia, verum etiam   paria esse dixerunt. Duo Reges: constructio interrete. Non modo carum   sibi quemque, verum etiam vehementer carum esse? Aliter enim explicari,   quod quaeritur, non potest. Quae cum dixisset paulumque institisset,   Quid est?</p>
<p style="text-indent: 20px;">Compensabatur, inquit, cum summis doloribus laetitia. Mihi quidem   Antiochum, quem audis, satis belle videris attendere. Atque haec   coniunctio confusioque virtutum tamen a philosophis ratione quadam   distinguitur. Cur deinde Metrodori liberos commendas? Miserum hominem!   Si dolor summum malum est, dici aliter non potest. Pauca mutat vel plura   sane; Quid est enim aliud esse versutum? Et non ex maxima parte de tota   iudicabis?</p>

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine voluptatem vocant. Sed mehercule pergrata mihi oratio tua. Conferam avum tuum Drusum cum C. Neque solum ea communia, verum etiam paria esse dixerunt. Duo Reges: constructio interrete. Non modo carum sibi quemque, verum etiam vehementer carum esse? Aliter enim explicari, quod quaeritur, non potest. Quae cum dixisset paulumque institisset, Quid est?

Compensabatur, inquit, cum summis doloribus laetitia. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur. Cur deinde Metrodori liberos commendas? Miserum hominem! Si dolor summum malum est, dici aliter non potest. Pauca mutat vel plura sane; Quid est enim aliud esse versutum? Et non ex maxima parte de tota iudicabis?

Thanks all, the table was exactly what I was needing. Very easy to implement for this purpose and looks clean. Cheers

Yes, regardless of what anyone else may say, it is considered bad coding.  CSS is suppose to be used for presentation.  Using tables for presentation is wrong.  Tables are for columnar data; that is what they were introduced to do.  Years ago before CSS really became the way, tables were used to control layout, with tables nested within tables nested within tables.  It was a nightmare to follow and very easy for things to break.

Now, I have used tables for certain things in WYSIWYG editors mainly to keep things together because the editor would trash the layout; such as a caption under a photograph.  We push that dog all over the place on the CMS I help to maintain and there was just no way for it to work without a table.  Of course HTML5 is coming with a new image tag with caption and the TinyMCE folks are supporting it.

So, yes, using tables for that objective is bad coding; but if it works for OP, then run with it.  However, there are ways to do it with divisions and CSS; divisions to hold the content, CSS to make it display, presentation, the way you want.

Of course a clearing division is adding html markup to control presentation.  However, a clearing division is still often the best way to clear a float; there are other ways but they don't always work across browsers.