Message des administrateurs

Ce blog est le prolongement, le complément du Groupe d'aide Blogger en français. Vous pourrez y trouver, au fur et à mesure qu'ils seront reproduits ici, les conseils donnés au fil des messages sur le Groupe. C'est une simplification pour vos recherches d'aide sur les blogs de Blogger. Vous êtes cordialement invités à participer à cette compilation. Pour ce faire, il vous suffit de m'adresser un mail à cette adresse et dans les meilleurs délais, nous nous efforcerons de changer votre inscription afin que vous puissiez intervenir. Comme il s'agit d'un blog, vous pourrez également laisser vos commentaires - toujours les bienvenus - pour améliorer tant le contenu que le contenant.


Groupe d'aide Blogger en français

Google Groupes
Abonnez-vous au groupe Aide Nouveau Blogger en français
E-mail :
Visiter le groupe

samedi 26 juillet 2008

Des cadres pour ses photos de vacances

Un cadre semi-transparent


En jouant sur l'opacité et la transparence, d'un bloc div, nous allons créer un cadre semi-transparent.

Un bloc extérieur va recevoir la photo comme image de fond et le bloc intérieur, sans contenu, servira à définir la bordure.


<div style="width: 320px; height: 210px;
margin: auto; padding: 0;
background-image: url(URL de l'image);
border: 1px solid #000;"><div style="width: 300px; height: 190px;
border: 10px solid #fff;
filter:alpha opacity=50);
-moz-opacity:.50;opacity:.50;
-khtml-opacity: 0.5;"> </div> </div>



Important

La saisie des 2 blocs doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure de 10.
Le bloc interne fait donc 320 - 2 * 10 = 300 par 210 - 2 * 10 = 190.

Chardonne - Mont-Pélerin : La carte



Un cadre doré


Un seul bloc div contenant l'image. Le cadre est réalisé par la propriété bordure. La couleur dorée, gold correspond au code couleur #ffd700.


<div style="margin: auto; width: 332px; height: 222px; border:1px solid #000; background: #ffd700;"><a href="URL du lien" target="_blank"
title="titre du lien"
style="background-color: transparent;
border: 0 none; text-decoration: none;"><img src="URL de l'image" style="width: 320px; height: 210px; border: 6px solid #ffd700;" title="titre de l'image" alt="texte alternatif image" /></a></div>



Important

La saisie du bloc doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure de 6.
Le bloc fait donc 320 + 2 * 6 = 332 par 210 + 2 * 6 = 222.
Pour certain template de Blogger, ajouter margin 0; et padding: 0; dans le style de l'image (*).

Château de Chardonne - le vin

Chardonne - Mont-Pélerin : La carte




Un cadre façon Polaroid


Un bloc div externe contenant la photo et un bloc div pour le bas, simulant la bande papier du polaroid.


<div style="width: 320px; margin: auto; padding: 15px;
background-color: #eeeecc; border: 1px solid black;
text-align: center; font-size: 0.75em;"><a href="URL lien sur l'image" title="titre du lien dur l'image" target="_blank"
style="border: 0 none; text-decoration: none; background-">
<img style="width: 320px; height: 210px; border: 1px solid black;"
src="URL image" title="titre image" alt="texte alternatif image" /></a><div style="margin: 10px auto 10px auto; ">
<a href="URL titre" target="_blank" title="titre"
style="border: 0 none ; text-decoration: none;">Titre</a></div></div>



Important

La saisie des 2 blocs doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure de 15. Pour certain template de Blogger, ajouter padding: 0; dans le style de l'image (*).




Un cadre double


Un seul bloc div contenant la photo.
C'est la bordure du bloc qui fait office de cadre.


<div style="border: medium double #558866; padding: 6px; background: #eeeecc;
width: 320px; margin: auto; text-align: center; font-size:11px; font-weight: bold; color: #a90707;">Titre de l'image<br/><br/><a href="URL lien sur l'image" title="titre du lien sur l'image" style="border: 0 none; text-decoration: none;" target="_blank"><img src="URL image" style="border: 1px solid #000; width: 320px; height: 210px; margin: 3px 0;" title="titre image" alt="texte alternatif image" /></a><br/><br/><a href="URL lien" title="titre du lien" target="_blank" style="border: 0 none ; text-decoration: none;">Lien</a></div>


Important

La saisie du bloc doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure latérale de 6. Pour certain template de Blogger, ajouter padding: 0; dans le style de l'image (*).





(*) : Les corrections spécifiques, selon le template de Blogger utilisé


Il s'agit de corriger le style du message qui spécifie le style par défaut d'une image, par exemple pour ce blog :


.post img
{
margin-top:0;
margin-right:0;
margin-bottom:5px;
margin-left:0;
padding:4px;
border:1px solid #bbbbbb;
}



Afficher ses photos sur Blogger

Le gadget (widget) Diaporama de Blogger et les Flux Media RSS

Une ligthbox (slimbox) pour afficher ses images

Encadrer ses textes

Un article du Blog d'Aide pour Blogger

En savoir plus

Utiliser box-shadow pour ombrer ses blocs

Crédit

Photos, Regis Colombo et Clos Domaines et Châteaux


Enregistrer un commentaire