Simple Newbie Question

[zapazon]

Hey Everyone,

I have a fairly simple question.

In dreamweaver, I would like to accomplish inserting an image, and then writing text beside it (paragraph or bullets).

Problem:

When I insert an image, I can either write text at the very bottom of the image, or hit enter and write it above the image. But, I would like to align the text to the right of the image.

Here's a reference:

http://www.music.com/ - Right on the top it has "videos being watched today" with a picture of a video or whatever, and directly to the right of that it has text.

Can someone either explain step-by-step how to do this, or point me to somewhere where it does?

I have issues with apdiv tags and image placeholders because in my browser, you have to view them at full screen otherwise the images will just go whereever on the page!

THanks,
Ryan

[Wickham]

I haven't got Dreamweaver but the principle will be the same but the way it is inserted in DW is not known to me.

Images and text will normally flow side by side if both are inside a <p> tag, but the text will align with the bottom of the image unless you style the image as vertical-align: middle and set the line-height to suit the image.

See http://www.wickham43.supanet.com/tutorial/generaladvice.html#textalignvert

In the example you give the text is on two rows next to the image so the above method won't work. it's better in this case to create a containing div and put an image and p tag inside, both with float: left to be side by side and the p tag with the text (on as many rows as you want). This means that the image and text are kept separate and the heights relative to eachother can be adjusted with margin-top.

<div style="clear: both;"><!--containing div-->
<img style="float: left; margin: 10px;" src="100x100green1.jpg"
alt="image description 1">
<p style="float: left; margin-top: 15px;">Text first row<br>text
second row</p>
</div>

<div style="clear: both;"><!--containing div-->
<img style="float: left; margin: 10px;" src="100x100green2.jpg"
alt="image description 2">
<p style="float: left; margin-top: 15px;">Text first row<br>text
second row</p>
</div>

If the image and text row(s) are not centralised vertically, adjust the margin-top of the p tag with text to adjust the text. The float: left is to make the image and p tag show side by side. <p> tags in IE and Firefox have different default margins so the text will appear in different height positions unless you code a specific margin-top for the <p> tag which will make them the same.

The clear: both in the containing divs is to make them show one below the other because in this situation they seem to show side by side otherwise (probably inheriting the float: left from the nested image and p tags which has to be cleared). The image margin: 10px; is to keep the images apart vertically and away from the <p> tag horizontally.

I have tested the above. It's best to put styles in a class or id but I put them in the html markup above so that it's clear where they apply.
------------------------
I looked at the source code of the http://www.music.com/ site and saw that they used a list with ul and li tags. I didn't look at their stylesheet but I could make that solution work in a similar way by using the li tag instead of the containing div. The image and <p> tag both need float: left to sit side by side.

styles in head section:-

<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; }
li { margin: 0; padding: 0; clear: both; }
.image { float: left; margin: 10px; }
.text { float: left; margin-top: 15px; }
</style>

HTML markup:-

<ul>

<li>
<img class=" image" src="100x100green1.jpg" alt="image
description 1">
<p class="text">Text first row<br>text second row</p>
</li>

<li>
<img class=" image" src="100x100green2.jpg" alt="image
description 2">
<p class="text">Text first row<br>text second row</p>
</li>

</ul>