Annuaire du Vin
 
Rechercher dans ce site

Annuaire Vin


Pour découvrir les vins suisses et apprécier les vins du monde

Mes Favoris

 

Les Etiquettes du Vin


Wine's Links


Obrist Europe


Schenk Asia


Obrist Artisans du vin


Maurice Gay - la haute couture des vins du Valais


Maurice Gay les étiquettes


Bolle - Les spécialistes en vin de Domaines

Border for your picture - CSS with Google Sites


Google Sites doesn't allow us to use external Stylesheet. Anyway, we can use in-line CSS. Here is 4 examples using in-line CSS to define border for picture.




Golden Frame



We use a div block containing a picture. For gold color we use #ffd700.We encapsulate the picture within an anchor. The code (type it without blank and carriage return) :

 
 


<div
style="border: solid 1px #000;  width: 309px;">                                                         /* width of pic + 2 * border */

<a href="URL of link" target="_blank" title="title of link" >

<img src="URL of picture"
style="width: 297px; border: 6px solid #ffd700;"                                                        /* 297 + (2 * 6) = 309  */
title="title of picture"
alt="alt text" />

</a>

</div>


 

The Result :
 
 
Château de Chardonne
 
 

Semi-transparent Border


We play with opacity and transparency. We use an outer box, displaying the picture as a background. An inner box has a border, on which we apply opacity. Type the code without blank and carriage return :




<div
style= "width: 320px; height: 210px;                         /* size of picture */
margin: auto; padding: 0;
background-image: url(URL of picture);                 /* not valid within Google Sites page */
border: 1px solid #000;">

<div style="width: 300px; height: 190px;                  /* size of pic - 2 * border */
border: 10px solid #fff;                                                 /* border width */
filter: alpha (opacity=50); -moz-opacity: 0.50; opacity: 0.50; -khtml-opacity: 0.5;">

</div>

</div>



For Internet Explorer we use opacity between 0 and 100, for Firefox we use a rate between 0 and 1.

We cannot define a background image in Google Sites. We need to encapsulate the previous code within a Google Gadget. I use this gadget : 


transparent-border.xml
 
 
Add this gadget to Google
 

Enter this parameters : 



URLPic : URL of the picture
Title : Title of the picture (Tooltip)
PicWidth : Width (px) of the picture
PicHeight : Height (px) of the picture
BorderCol : Color of the border (#rrggbb)


The Result :


 
 


Double Border with Title and 3 Links



We have the following elements : A title, a subtitle with link (1), the picture encapsulated within an anchor (2) and a footer (3). We use this code



<div style="style of div block">Title of picture<br>

<a href="URL of link1"
title="title of link1"
target="_blank">link 1</a>

<a href="URL of link 2"
title="title of link 2"
target="_blank">

<img src="URL of picture"
style="style of picture"
title="title of picture"
alt="alt text for picture"></a><br>

<a href="URL of link 3"
title="title of link 3"
target="_blank" >link 3</a>

</div>


We use the following in-line style for the external div block :



border: medium double #f00;
padding: 6px;
background: #c3d9ff;
width: 300px;                                         /* width of picture + 20 pixels */
margin: auto;
text-align: center;
font-size:11px;
font-weight: bold;
color: #a90707;


We use this CSS for the picture :



border: 1px solid #000;
width: 280px;                                         /* width of picture */
margin: 3px 0;


The Result :






Picture like a Polaroïd



We display the picture, encapsulated within an anchor (1), a subtitle with a link (2), and a legend.

I use the following code :
 

 
 


<div style="width: 220px;                                                             /* width of pic + 2 * padding */
margin: auto; padding: 15px;                                                     /* padding */
background-color: #c3d9ff; border: 1px solid black;
text-align: center; font-size: 11px;">

<a href="URL of link 1" title="title of link 1"
target="_blank">
<img style="width: 190px; border: 1px solid black;"                /* width of pic */
src="URL of picture">
</a>

<div style="margin: 15px auto 0; font-weight: bold;                /* same value as padding */
color: #a90707;">

<a href="URL of link 2"
target="_blank" title="title of link 2">Link 2</a>
<br><br>

Legend

</div>

</div>
 

 
 

The Result :


Maurice Gay - The Maps

La Haute Couture des Vins du Valais


More informations





CSS Tutorial (W3schools)

Create borders for your pictures, using Blogger
 
Opacity and Transparency

Insert a Google Gadget (transparent Border) with an iframe or a script, like a Web Element.








Find a WIne