En espérant que cela puisse vous aider.

1. Alignement vertical avec la propriété line-height

#bloc { line-height:24px;}

Quand vous avez un container avec une hauteur fixe, vous pouvez utiliser un line-height pour aligner verticalement le contenu.

2. Prévient le débordement entre les blocs

#bloc { overflow:hidden; }

Quand un container est trop grand par rapport aux autres blocs il peut ‘déborder” et ainsi casser votre structure de page. Pour éviter cela, utiliser l’overflow : hidden permet de cacher ce débordement.

3. Previens la coupure des liens sur 2 lignes

a{ white-space:nowrap; }

Avec de longs textes on peu se retrouver avec des liens couper sur 2 lignes, cette astuce évite cela.

4. Laisse afficher la scrollbar firefox

html{ overflow:-moz-scrollbars-vertical; }

Firefox cache par défault sa scrollbar verticale. Ce code laisse toujours affiché la scrollbar.

5. Centrer horizontalement les blocs

margin:0 auto;

Cette ligne CSS permet de centrer un élément simplement.

6. Supprime la scrollbar d’un textarea dans IE

textarea{ overflow:auto; }

Avec IE les scrollbar des textareas sont visibles par défault. Cette astuce CSS permet de les supprimer.

7. Forcer le saut de page quand vous imprimer vos documents

h2{ page-break-before:always; }

Avec cette ligne vous pouvez définir où vous voulez placer vos sauts de page.

8. Supprime les bords pointillés sur les liens actifs

a:active, a:focus{ outline:none; }

Il a beaucoup de les dispositifs d’Ajax et de Javascript qui vous permettent d’augmenter l’expérience d’utilisateur et le codage sémantique. Puisque ces cours d’instruction sont concentrés sur le jQuery, je ne vais pas entrer dans les détails du CSS.

Au menu des accordéons, des effets ajax, panneau coulissant, dropdown menu et autre galerie photo.

Donc à voir absolument par là http://www.webdesignerwall.com/demo/jquery/

Explications (anglais) par là : http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/ mais facile à comprendre.

Et les tutoriaux à télécharger : http://www.webdesignerwall.com/file/jquery-tutorials.zip

Voici le code html:

<form action=”#” method=”get”>
<fieldset>
<legend>Mon Formulaire</legend>
<p><label for=”nom”> Nom</label> <input type=”text” id=”nom” /></p>
<p><label for=”prenom”>Prénom</label> <input type=”text” id=”prenom” /></p>
<p><label for=”email”>E-mail</label> <input type=”text” id=”email” /><br /></p>
<p>
<label for=”comments”>Commentaires:</label>
<textarea id=”comments” rows=”5″ cols=”18″></textarea>
</p>
<p class=”submit”><input type=”submit” value=”Valider” /></p>
</fieldset>
</form>

et voici le Css:

label
{
width: 9em;
float: left;
text-align: left;
margin-right: 0.5em;
display: block;
color: #990000;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

.submit input{margin-left: 4.5em;}
input
{
color: #781351;
background: #CCCCCC;
border: 1px solid #781351;
}

.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9;
}
fieldset
{
border: 1px solid #781351;
width: 20em;
}

legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px;
}
.textarea{
width: 250px;
height: 150px;
}

Exemple:

Une solution largement utilisée est la mise en place de CAPTCHA. Pouvant poser des problèmes au niveau accéssibilité aux personnes souffrant d’un déficit visuel et même parfois à ceux qui n’en ont pas.
Il y aussi parfois la mise en place de question simple sur la géographie ou encore sur combien font 3+3.

Il existe une méthode qui est complètement invisible pour l’utilisateur mais pas aux robots spammeurs.
Elle consiste à placer un champ de plus dans le formulaire et de le cacher ensuite en CSS (hidden).
Les robots spammeurs ont pour habitude de remplir tous les champs d’un formulaire, ainsi il est facile de différencier un spammeur d’un humain.

ex:
<input name=”nom” class=”nom” type=”text” /> à rajouter dans votre page
.nom {visibility: hidden;} à rajouter dans votre CSS

il ne vous reste plus qu’à coder le fait que si le champ est rempli c’est que cela doit être un spam.

La méthode a apparemment prouvé son efficacité.
Simple à mettre en place voir l’explication en anglias.

Dont un carrousel 3d très sympa ainsi qu’une galerie photos, une galerie flv, lecteur flash et bien d’autres alors profitez-en vite on ne sait jamais si cela va rester très longtemps. Alors rendez-vous sur cette page http://www.afcomponents.com/components vous y trouverez toutes sortes de galeries flash images vidéos, carte Google flash…
Je penses que vous y trouverez votre bonheur.

Vous faites partie des adeptes du SMS ou avez un proche parti à l’étranger pour quelques temps avec lequel vous aimeriez bien garder contact sans dépenser une fortune ? Moyennant quelques clics de souris, un service en ligne baptisé MesTextos vous propose d’envoyer des SMS gratuitement dans le monde entier. Il serait dommage de ne pas en profiter, d’autant plus que le service est en français et très simple d’utilisation :

La marche à suivre pour envoyer un SMS gratuit :

* Sélectionner son pays via le menu déroulant, puis entrer son numéro mobile
* Sélectionner le pays du destinataire et renseigner le numéro mobile
* Saisir le message, dans la limite de 160 caractères
* Recopier le code sécurité à 5 caractères
* Cocher la case pour accepter les conditions d’utilisation et décocher éventuellement celle pour recevoir la publicité
* Cliquer sur la bannière publicitaire
* Effectuer un clic sur le site partenaire et fermer la fenêtre
* Cliquer enfin sur le bouton d’envoi

Envoyer des SMS gratuitement depuis le site MesTextos.com

Il n’y a pas non plus besoin de technologie Flash, Quicktime ou Java. Le visiteur n’est pas contraint d’installer un logiciel pour voir la visite virtuelle.

- Démonstration : virtual Tour

Présentation

La particularité de ce module de visite virtuelle, c’est qu’il est accessible et utilisable, même sans javascript, puisque la navigation s’appuie sur la balise

Il n’y a pas non plus besoin de technologie Flash, Quicktime ou Java. Le visiteur n’est pas contraint d’installer un logiciel pour voir la visite virtuelle.

Utilisation

dans la partie <head> de votre page, insérez les appels aux css et fichiers javascript :

<link rel=”stylesheet” type=”text/css” href=”css/thickbox.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”css/jquery.panorama.css” media=”screen” />
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.panorama.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(”img.advancedpanorama”).panorama({
auto_start: 0,
start_position: 0
/*ajoutez ici éventuellement d’autres
paramètres d’exécution */
});
});
</script>
<script type=”text/javascript” src=”js/cvi_text_lib.js”></script>
<script type=”text/javascript” src=”js/jquery.advanced-panorama.js”></script>
<script type=”text/javascript” src=”js/jquery.flipv.js”></script>
<script type=”text/javascript” src=”js/thickbox.js”></script>

voir la liste des paramètres disponibles sur la documentation du viewer simple de panoramas.

puis dans la section <body>, ajoutez l’appel à l’image panoramique, ainsi qu’un objet <map> contenant les coordonnées des zones réactives (nous ne gérons pour l’instant que les zones de type ’rect’).

Si le lien pointé par l’objet <area> est une photo, vous pouvez ajouter la classe ’thickbox’ pour un effet visuel sympa avec le plugin Thickbox pour jQuery.

<img src=”img/sculpteur.jpg” class=”advancedpanorama” width=”2448″ height=”375″ usemap=”testmap” alt=”Atelier du sculpteur” />
<map id=”testmap” name=”testmap”>
<area shape=”rect” coords=”1653,72,1839,255″ href=”index.html” alt=”vers la salle de formation” />
<area shape=”rect” coords=”2013,114,2091,210″ href=”img/statue1.jpg” alt=”statues” class=”thickbox” />
<area shape=”rect” coords=”1920,276,2070,351″ href=”img/gouges.jpg” alt=”gouges” class=”thickbox” />
</map>

Vous pouvez vous inspirer de l’exemple fourni dans le zip.
Téléchargement

jquery-virtual-tour.zip

Comme Antivir Personal Edition, AVG est un anti-virus gratuit, proposant malgré tout un certain nombre d’outils indispensables pour un bon antivirus, à savoir une protection résidente en mémoire, protection au niveau des Email, scan sur demande avec planification, mises à jour gratuites de la base et du moteur d’analyse, ou encore mise en quarantaine.

AVG AntiVirus Free Edition peut être téléchargé depuis le site de l’éditeur : grisoft

La documentation se trouve ici.
Un exemple à voir ici.
Codes à télécharger ici.
En espérant que vous trouverez votre bonheur…

Tout d’abord, on va simplement attribuer une classe “rounded” aux éléments que l’on désire styler. Par exemple le cadre ci-dessous :

<div id="contenu_avec_jquery" class="rounded">

 <p>Ce cadre tout simple utilise jQuery et a de jolis coins arrondis...</p>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae diam egestas felis

 pellentesque bibendum. Proin posuere felis id tellus. Phasellus eu felis. Nullam lacus ante,

 pellentesque vitae, tristique eu, commodo nec, mauris.</p>

</div>

Maintenant, on ajoute un peu de javascript (pensez bien à inclure la librairie jQuery avant dans votre page !). Ce code nous permettra de générer dynamiquement les balises nécessaires pour styler nos cadres de chaque élément utilisant la classe “rounded” dans la page :

$(document).ready(function(){

 $('div.rounded').wrap('<div class="cadre"></div>');

 $('div.cadre').prepend('<div class="cadre_hd"></div><div class="cadre_hg"></div>');

 $('div.cadre').append('<div class="cadre_bd"></div><div class="cadre_bg"></div>');

});

Je vous laisse utiliser votre éditeur d’images favori pour créer l’arrondi que vous désirez, pour ma part j’ai créer l’image de 22px/22px suivante :

Le fait de n’utiliser qu’une seule image va nous permettre de réduire considérablement le “poids” du cadre. À titre indicatif, l’image que j’utilise pèse 387 octets et la même découpée en 4 pour chaque coin amène un poids total de 953 octets.

Voilà, plus qu’à rajouter une pincée de CSS pour donner corps à nos cadres. Vous noterez que j’ai donné une dimension de 11px à chacun des coins du cadre et qu’ensuite je me suis contenté de décaler horizontalement et verticalement l’image de fond pour donner l’illusion d’un cadre arrondi.

.cadre{

 background-color: #bdb194;

 width: 30%;

}.cadre_hg, .cadre_hd,

.cadre_bg, .cadre_bd{

 width: 11px;

 height: 11px;

 background-repeat: no-repeat;

 font-size: 1px;

}

.cadre_hg{

 background: url(’cadre_rounded.png’) 0 0;

}

.cadre_hd{

 background: url(’cadre_rounded.png’) 11px 0;

 float: right;

}

.cadre_bg{

 background: url(’cadre_rounded.png’) 0 11px;

}

.cadre_bd{

 background: url(’cadre_rounded.png’) 11px 11px;

 float: right;

}

Testé sur :

• Firefox 2 sous Windows XP, Linux et Mac
• Safari sous Windows et Mac
• IE 7

Télécharger le tuto_coins_arrondis_jquery.zip (17.5Ko) contenant les fichiers de démo.