Video Training – Tutorials

Postioning an image with CSS in Dreamweaver

Correctly Positioning an image with CSS against a block of text can be quite challanging to the novice web designer. Fortunetly it’s very easy to accomplish, and in this Dreamweaver tutorial we will show you how.

View Dreamweaver basics in video format: Beginners Dreamweaver Tutorial Videos.

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. 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

If you would like to view other simpliefied topics in Dreamweaver:-
Dreamweaver Tutorials the basics