552 posts
  • Bought between 100 and 499 items
  • Canada
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 100 and 199 users
OurWebMedia says

Hi,

I’m trying to align text beside some pictures. First I had just used the BR code to move the text down beside the photos. But I soon discovered after signing on to my laptop (which uses a lower resolution) the text would move all over the page instead of where it was on the other computer with higher resolution.

How do I get the text to align perfectly centered beside the photo?

An example of my problem: http://www.babynatali.ca/home/?page_id=53

Click “Natali’s Left Fingertips” and you will see some photos that I have aligned left and right and would love to be able to put text beside them. How is this possible?

Sorry to bug you with such a simple question, but its very hard for me.

Thanks.

Bryce

2529 posts
  • Attended a Community Meetup
  • Author had a Free File of the Month
  • Blog Editor
  • Bought between 50 and 99 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 5-6 years
+6 more
JeffreyWay says

Hmm.. I’d use a definition list. For a really quick, untested example…

HTML Sample

<dl>
    <dt class="left"><img src="image.jpg" alt="my image" /></dt>
    <dd>Some info about the picture goes here.</dd>

    <dt><img src="image.jpg" alt="my image" /></dt>
    <dd>Some info about the picture goes here.</dd>

    <dt class="left"><img src="image.jpg" alt="my image" /></dt>
    <dd>Some info about the picture goes here.</dd>                                    
</dl>

CSS

dt.left {
 float: left;
 clear: both;
}

dt{
 float: right;
 clear: both;

}

dd {
 float: left;
 line-height: 170px;
}
2529 posts
  • Attended a Community Meetup
  • Author had a Free File of the Month
  • Blog Editor
  • Bought between 50 and 99 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 5-6 years
+6 more
JeffreyWay says

Renders something like:

Sample

2529 posts
  • Attended a Community Meetup
  • Author had a Free File of the Month
  • Blog Editor
  • Bought between 50 and 99 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 5-6 years
+6 more
JeffreyWay says

You’d also need to clear that definition list as well.

552 posts
  • Bought between 100 and 499 items
  • Canada
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 100 and 199 users
OurWebMedia says

Neato! I wish I had neat programs like that :P

Thank you so much!! This was much more help than I thought I’d get. :)

I am going to try this out right away. Just need to change the baby first lol

552 posts
  • Bought between 100 and 499 items
  • Canada
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 100 and 199 users
OurWebMedia says

Hello Jeffrey,

Thank you so much for your fast immediate help. What you explained to me worked fantastic.

I hate to ask, but I was curious how I could maybe move the text a little bit away from the image when the image is aligned to the left?

Again, THANK YOU !

Bryce

552 posts
  • Bought between 100 and 499 items
  • Canada
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 100 and 199 users
OurWebMedia says

Oh geez, I hate to ask one more question…

I typed in a good paragraphs worth of information and when I viewed the photo, the text was all messed up and under the photo rather than beside it.

Is there anyway to make it so I could write a paragraph rather than a short sentence?

Thank you! I hope not to abuse the help. Thanks!!

by
by
by
by
by
by