In this tutorial I will take a look at how to float an image as well as multiple images. Floating is mostly used to push an image to one side or the other while having the text of a paragraph wrap around it. Wrapping the text around an image is easy after you have applied to float attribute. You can float the image to either the left or right side. Below is an example.
CSS Code:
Img.floatleft{
float: left;
margin: 4px; }
-note it can be whatever value you need. Depending on the location
- Also same code but instead of left put right and image will float to the right of the page
You can do this same things using HTML code
HTML Code:
<body>
<img src=”name.jpg” class=”floatrightclear”>
<p> The images are contained with…</P>
<img src=”name.jpg” class=”floatright”>
< p> this paragraph is…</p>
</body>
This is an example of what it should look like after you are finished. If you notice the image is floating to the left with this paragraph wrapped around it. This is very useful if you have a lot of imagery you need to place. Being able to float an image really helps with your design and makes it so you can do a wide variety of things. You will notice that this image is floating to the right but remember you can float the picture in the center as well as the right
With this same technique you can float multiple pictures one on top of the other. Here is a quick example how.
CSS Code:
Img.floatrightclear {
float.right
clear: right
margin: 4px;
}
-Note if you just floated all the images they would appear right on top of each other. If you want to next image to start below the end of the last one use thee CSS atribue “clear”
HTML Code:
<body>
<img src=”name.jpg” class=”floatrightclear”>
<img src=”name2.jpg” class=”floatrightclear”>
<p> the name of the paragraph…</p>
<p> if we told it which paragraph..</p>
<p> the number of paragraphs…</p>
</body>
This is an example of what it should look like after you are finished. If you notice the images are floating to the right with this paragraph wrapped around it. This is very useful if you have a lot of imagery you need to place. Being able to float an image really helps with your design and makes it so you can do a wide variety of things. You will notice that this image is floating to the left but remember you can float the picture in the center as well as the left. But there are many more things you can do with this feature. The more you play around with it the more possibilities there are .
No comments:
Post a Comment