Prior to learning the wonders of CSS, here is an example of how a series of pictures might have been displayed using TABLE tags. Use View Source to see how much presentational markup has been used (and I could have added even more!).
![]() Cloud One |
![]() Cloud Two |
![]() Cloud Three |
![]() Cloud Four |
![]() Cloud Five |
![]() Cloud Six |
![]() Cloud Seven |
![]() Cloud Eight |
![]() Cloud Nine |
![]() Cloud Ten |
![]() Cloud Eleven | ![]() Cloud Twelve |
Now, let's try the same thing but this time, using CSS. Download these cloud pictures or use your own. If you do use your own, you will need to make adjustments for the size of your images.
Each grouping will contain 2 elements; the image and the caption. Set it up by enclosing both in a DIV tag and assign it the class pic. Each image/caption will be coded the same. Here's the code:
<div class="pic">
<img src="images/cloud1.jpg" width="100" height="75" alt="cloud 1 image" />
<p>Cloud One</p>
</div>











