• Registered: 2009-10-21
  • Posts: 1

Topic: Issue with text/image allignment?

Hello there,

This forum was suggested to me by a friend, hopefully someone may be able to assist me...

I'm having great difficulty with my site, visibly so on this page:

http://www.mikemonaghan.co.uk/mmblog/20 … -week.html

The post is mainly images with some text in between the images. The problem here is that the text seems to be floating to the the right of the images where there is room. I want the text to sit BETWEEN the images (NOT to the side).

To overcome this I'm having to use lots and lots of <BR> (as you can probably see). However this has messed up the formatting - for example the sentence "...then on Thursday etc" doesn't sit logically aligned on the left as one might expect.

The issue is potentially something to do with the float. I have tried changing the FLOAT property to : none; in the mt-image-left class but to no avail.

Perhaps I need to use a CLEAR or TEXT-ALIGN command, but under which class?

Let me know if any further details are required. Any help is really appreciated - this issue causing me an unhealthy level of stress?!?!?!

Thanks :-)

- thunderbirdm

  • Gender: Male
  • From: Salisbury UK
  • Registered: 2008-12-20
  • Posts: 1,231

Re: Issue with text/image allignment?

I've edited just a few sections, images where I've put in a top margin in px (the order is top right bottom left), deleted all the <br /> tags, then put the following text in a p tag with clear: both; to clear the float of the image above and stop it going into any available space beside an image (you should make a class and put clear: both; in a stylesheet preferably):-

<img alt="Soph London.JPG" 
src="http://www.mikemonaghan.co.uk/mmblog/http:/www.mikemonagh
an.co.uk/mmblog/images/2009-09/P010909_21.33%5B01%5D.JPG" 
class="mt-image-left" style="margin: 30px 20px 20px 0pt; float: left;" 
height="486" width="648" /></span><!--was margin: 0pt 20px 20px 0pt;-->

<!--
<br /> <div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/>-->

<span class="mt-enclosure mt-enclosure-image" style="display: 
inline;">

<img alt="Mike in London.JPG" 
src="http://www.mikemonaghan.co.uk/mmblog/http:/www.mikemonagh
an.co.uk/mmblog/images/2009-09/P010909_21.34%5B02%5D.JPG" 
class="mt-image-left" style="margin: 30px 20px 20px 0pt; float: left;" 
height="648" width="486" /></span>

<!--
<br /></div><div><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br />-->

<p style="clear: both;">
...then on Thursday a journey to Cardiff to hang out with <a 
href="http://mattrobertsblog.tumblr.com/">Beautiful Matt </a>and <a 
href="http://crazyorgan.blogspot.com/">Jon</a>.&nbsp; We went to 
see <a href="http://www.myspace.com/manwithoutcountry">Man 
Without Country...</a>
</p>

<!--<br /><br />-->

<span class="mt-enclosure mt-enclosure-image" style="display: 
inline;">

<img alt="Cardiff with Matt and Jon.JPG" 
src="http://www.mikemonaghan.co.uk/mmblog/http:/www.mikemonagh
an.co.uk/mmblog/images/2009-09/P040909_18.17.JPG" 
class="mt-image-left" style="margin: 30px 20px 20px 0pt; float: left;" 
height="480" width="640" /></span>

<!--
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />-->

<span class="mt-enclosure mt-enclosure-image" style="display: 
inline;">

<img alt="Cardiff with Matt and Jon from behind.JPG" 
src="http://www.mikemonaghan.co.uk/mmblog/http:/www.mikemonagh
an.co.uk/mmblog/images/2009-09/P040909_18.14.JPG" 
class="mt-image-left" style="margin: 30px 20px 20px 0pt; float: left;" 
height="480" width="640" /></span>

<!--
<br /><br /></div><div><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br />-->

<span class="mt-enclosure mt-enclosure-image" style="display: 
inline;">

<img alt="The man without the country.JPG" 
src="http://www.mikemonaghan.co.uk/mmblog/http:/www.mikemonagh
an.co.uk/mmblog/images/2009-09/P040909_20.39.JPG" 
class="mt-image-left" style="margin: 30px 20px 20px 0pt; float: left;" 
height="640" width="480" /></span>

<!--
<br /></div><div><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/>-->

<p style="clear: both;">
... on Saturday we headed to Nottingham to celebrate my mothers' 
60th Birthday!
</p>

<!--
<br /><br />-->

Tested in IE7 and Firefox OK.

Last edited by Wickham (2009-10-21 11:18:42)

  • Gender: Female
  • From: San Antonio, TX
  • Registered: 2008-12-19
  • Posts: 3,640

Re: Issue with text/image allignment?

You should also double-check the links to your images - I'm surprised they are even working:

http://www.mikemonaghan.co.uk/mmblog/http:/www.mikemonaghan.co.uk/mmblog/images/2009-09/P010909_21.33%5B01%5D.JPG

Note how there are two https in there - and it's not a good idea to put spaces in file names.

And the <br> should never be used as a formatting tool - it's for semantic line breaks.