Annuaire Vin

Mes Favoris

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
 
 

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 :


Château Maison Blanche
The MapsChâteau Maison Blanche - A New Way of Life
The World of Swiss Wineries





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)







One Day - One Label - One Wine


Find a Wine with Google CSE