Monday, February 1, 2010

Placing Text Near Image: Video Tutorial


Notes:
The first thing needed is to place the text inside an element,
in this case I placed it within a paragraph tag <p>
and gave the p an id, in this case 'move'.

The name here can be almost anything, just remember it, if code is longer.
The p tag needs to be closed and must encompass all the text you wish to move.

The positioning is then done within the style tags with CSS,
explained in an earlier tutorial on this blog.
As seen in the video positioning can be a bit of a hit or miss
and you may require changing it a couple of times.

Problems to watch out for:
In changing the paragraphs position, any further paragraphs will then appear out of place.
Work around this by giving paragraphs a class rather than an id.
Or place all paragraphs within a div tag.

The result of the tutorial is below.
#move
{
position:relative;
top:200px;
left:-60px;
}

Picture of a princess.
This is the text we wish to move closer to the image.

No comments:

Post a Comment