Positioning Images and Text with CSS in Dreamweaver.
Correctly Positioning an image with CSS against a block of text can be quite challenging to the inexperience web designer. Fortunately it’s very easy to do it, and in this tutorial we will show you how.
1. First we need a DIV Tag
First let’s create a div (a div creates a container and allows attributes to be applied to control it’s properties).
To start with we need a container to hold the image and text, in CSS the div element lends it’s self perfectly for this purpose.
To insert our div tag Insert > Layout Objects > Div Tag
Dreamweaver will insert the div tag on the page.
Dreamweaver places some default text in the Div layer, remove this. Then place your cursor back in the div tag and click, this is the position that Dreamweaver is going to insert the image.
2. Insert the image
Next we insert our image: by clicking on Insert > Image
The image should now be inside the div layer, if you tried to add text next to the image you would notice that it wraps around the bottom of the placed image, not really the effect that we want.
To make things a little clearer we are going to switch from WYSIWYG mode to code view click on the code button top left
The image that you added will be inside an img tag, it should look something like this:-
<img src=”images/multi-user-cds.jpg” width=”268″ height=”229″>
We need to tell the img tag to move to the left, if anything is placed to it’s right, we do this by adding this to the image tag style=”float:left;”
Your image tag should now read ( notice the float parameter on the end ):-
<img src=”images/multi-user-cds.jpg” width=”268″ height=”229″ style=”float:left;”>
3. Add the text
We then create an other div tag just below the image tag, this makes positioning a lot easier and more predicable, the text has now positioned it’s self nicely to the left.
To make our job a little easier we are going to nest a div tag just after the image tag, this div is going to hold our text, and that’s it really.
Just a slight position change
So the text does not butt right up to the image, we just need to add a margin left parameter to the text div tag:
style=”margin-left:270px;
The finished code should look like this:-
<div>
<img src=”images/ImageName.jpg” width=”268″ height=”229″ style=”float:left;”/>
<div style=”margin-left:275px;”>Text that we what to display to the left of the image goes in here.
</div>
</div>
And that’s it, that’s how simple it really is.
English