Display a title for your picture using CSS. Tips and tricks for webmasters
Running ...

CSS to create floating box


  • Width of picture : 120 px, border 1 px (total width = 122)
  • Create a floating box and define the style for text and border :


.float_thumb_3_120 {
float: left;
width: 122px;
margin-left: 14px;
margin-right: 14px;
margin-bottom: 1px;
padding: 0px;
font-family: arial, sans-sherif;
font-size: 8pt;

border-style: solid;border-width: 1px;border-color: #d1dae3;

}


Width of container


  • Compute the width of the container :


n1 = 3 * ((width of pic + border) + margin-left + margin-right)
n2 = margin-left
n = n1 + n2

Here we get :

n1 = 3 *((120 + 2) + 14 + 14) = 450
n2 = 14
n = 464



The HTML


  • Use this html at the position of the pictures :



<div align="center">
<!-- container -->
<div style="width: 470px;">

<!-- titles -->

<p class="float_thumb_3_120" style="border-color: #7da7fc">
Some text for pic 1</p>

<p class="float_thumb_3_120" style="border-color: #7da7fc">
Some text for pic 2</p>

<p class="float_thumb_3_120" style="border-color: #7da7fc">
Some text for pic 3</p>
<!-- pictures -->
<p class="float_thumb_3_120"><img src="URL of picture 1"
style="width: 120px; height: 90px;"></p>

<p class="float_thumb_3_120"><img src="URL of picture 2"
style="width: 120px; height: 90px;"></p>
<p class="float_thumb_3_120"><img src="URL of picture 3"
style="width: 120px; height: 90px;"></p>

</div>
</div>


The Pictures with Titles



Schenk
Les Experts du Vin

Henri Badoux
La maison du lézard

Obrist
Les Artisans du Vin

Schenk Holding SA - The Wine Experts

Henri Badoux SA

Obrist Les Artisans du Vin

 


More Informations



Other Examples