Web & graphic design notes

Text floating and spacing around images

Well, these are the basics of HTML and CSS. We will remind you how to make a text float around the images and make margins around them. The first option is to use an HTML+CSS code to do this. It always looks nicer when you see a picture which is wrapped by text with some margins around it.

In order to do this, use the following code:

<img src=”images/your_image.jpg” 
   alt=”Image_description_in_case_you_the_image_is_not_loaded” 
   title=”Image_title” 
   align=”left”
   width=”300px”
   height=”200px”
   style=”margin: 4px 6px 4px 0” 
/>

In case you need to place a picture on the right side change the option align:

align=”right” <!-- instead !-->  of align=”left”

To indent the text from the edges of the picture in this case use the css-style:

style=”margin: 4px 6px 4px 0”

The offset parameter margin is specified in a clockwise direction, starting with the indent image above (4px), then the right margin (6px), the bottom margin (4px) and zero – left margin.

You also can specify the margins for all pictures on your page by using a CSS-style sheet. It could be done in several ways:

<div class=”intro”>
   <p> Some text goes here  
      <img src=”images/your_image.jpg” 
          alt=”Image_description_in_case_you_the_image_is_not_loaded” 
          title=”Image_title” 
          align=”left” 
          width=”300px” 
          height=”200px” 
      /> 
   Some text goes here </p>
   <p> Some text goes here 
      <img src=”images/your_image_2.jpg” 
         alt=”Image_description_in_case_you_the_image_is_not_loaded” 
         title=”Image_title” 
         align=”left” 
         width=”300px” 
         height=”200px” 
      /> 
    Some text goes here </p> 
</div>

In this example we use div layer intro for all images and text in the block. To make it work, use the following CSS style:

.intro img { margin: 4px 6px 4px 0;}

You also can specify the image-class:

<img class=”indent_1” 
   src=”images/your_image.jpg” 
   alt=”Image_description_in_case_you_the_image_is_not_loaded” 
   title=”Image_title” 
   align=”left” 
   width=”300px” 
   height=”200px” 
/>

and include the following CSS code to the CSS file:

.indent1 {margin: 4px 6px 4px 0;}

This option gives you an opportunity to control image margins specifically for all images which are in the same image class.