Archive pour mars 2010
Quelques tips en CSS
Mardi 23 mars 2010Bonjour, aujourd'hui je vous ai préparé un article sur le CSS (Cascading Style Sheet).
3 méthodes pour ajouter le CSS dans vos pages :
En inline qui consiste a ajouter le CSS directement dans vos balises HTML (pas propre mais utile pour faire des tests rapides)
<a href="http://www.point2zero.net" style="font-size:1.2em;">Point2Zero</a>
Avec le CSS entre les balises <head> et du type :
<html> <head> <title>Ma Page Web</title> <style type="text/css"> /* Votre css ici */ </style> </head> ...
Ou en utilisant une feuille de style externe par exemple : style.css que l'on inclus dans notre <head> soit avec :
<html> <head> <title>Ma Page Web</title> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> </head> ...
Ou avec ce code :
<html> <head> <title>Ma Page Web</title> <style type="text/css" media="all"> @import "style.css"; </style> </head> ...
Comment centrer un élément dans une page web en CSS ?
Nous avons une page web avec une balise <div> qui se trouve dans la balise <body>. Le but étant de centrer la balise <div> quoi qu'il se passe.
Dans un premier temps nous allons ajouter des "background" a nos balises <body> et <div> pour les différencier.
Mettre la balise <body> avec un fond gris #AAA et la balise <div> avec un fond blanc #FFF.
body{
background-color:#AAA;
}
div{
background-color:#FFF;
}
Jusque là rien de trés difficile. Maintenant ajoutons une taille à notre <div> pour pouvoir le centrer en fonction de sa taille.
body{
background-color:#AAA;
}
div{
background-color:#FFF;
width:960px;
}
Et ajoutons une marge sur notre <div>
body{
background-color:#AAA;
}
div{
background-color:#FFF;
margin:0 auto;
width:960px;
}
Petite explication : j'utilise un racourcis pour la marge. Normalement j'aurai du faire :
margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;
Le racourci permet d'écrire beaucoup moins de texte (chargement plus rapide, css moins lourd etc...).
J'ai une margin en haut et en bas à 0 donc pas de marge et a gauche et a droite en auto. Donc en fonction de la place disponible à droite et a gauche de l'élément il centrera le contenu.
Autres choses :
- Triez les propriétés dans l'ordre alphabétique.
- N'indiquez pas l'unité quand la valeur est 0. 0px = 0% = 0 
Avant :
body{
border:0px;
margin:0%;
padding:0;
background:#FFF;
outline:0;
}
Apres :
body{
background:#FFF;
border:0;
margin:0;
padding:0;
outline:0;
}
Facile non ?
Voici quelques liens de Framework CSS pour construire vos pages facilement :
- 960grid.
- Elasticss.
IE6 meurt petit a petit...
Lundi 15 mars 2010Depuis Janvier 2010 j'avais annoncé que je ne faisait plus de developpement pour IE6.
Car il y a 2 nouvelles versions du navigateur :
- la 7 sortie depuis maintenant 3 ans et 6 mois.
- la 8 sortie depuis bientôt 9 mois.
Pourquoi de plus en plus de sites apparaissent contre la version 6 du navigateur de Microsoft ? Le navigateur ne supporte pas les PNG avec de la transparence, les feuilles de styles CSS doivent contenir des hacks ou etre completement réécrite pour ce navigateur. La tâche n'est pas si simple pour un developpeur web. Une solution existe en jQuery pour proposer la mise à jour du navigateur a vos visiteurs : ie6update. Ce site propose d'ajouter un code jQuery sur votre site qui affichera (comme l'affichage d'un direct x ou autre) une barre en haut du navigateur disant que celui-ci n'est pas à jour.
D'autres sites tel que ie6nomore ou ripie6 l'ajoute au coté du défunt Nescape.
Microsoft aretera le support de son navigateur le 13 juillet prochain vous pouvez suivre le décompte sur isie6dead.
En attendant j'ajoute souvent le script proposé par ie6update.com 
Le Fieldset peut être utile en jQuery
Samedi 13 mars 2010Pendant mes cours de xHTML, CSS, Javascript cette semaine j'ai expliqué l'utilisation de la balise html fieldset.
J'utilise un plugin jQuery qui permet grâce à l'utilisation des balises fieldset d'avoir un formulaire qu'on remplis pas à pas.
Prenons un exemple de code tel que :
<!-- N'oubliez pas d'ajouter ici le doctype et les balises html, head etc... -->
<body>
<div id="page">
<form action="submit.php" method="post">
<fieldset>
<legend>Informations Personnelles :</legend>
<label for="nom">Nom :</label>
<input id="nom" name="nom" type="text" />
<label for="prenom">Prénom :</label>
<input id="prenom" name="prenom" type="text" />
<label for="sexe">Sexe :</label>
<input id="sexem" name="sexe" type="radio" value="m" />M
<input id="sexef" name="sexe" type="radio" value="f" />F
</fieldset>
<fieldset>
<legend>Domicile :</legend><label for="adresse">Adresse :</label>
<textarea id="adresse" cols="50" rows="3" name="adresse"></textarea>
<label for="cp">Code Postal :</label>
<input id="cp" name="cp" type="text" />
<label for="ville">Ville :</label>
<input id="ville" name="ville" type="text" />
</fieldset>
<fieldset>
<legend>Compte :</legend>
<label for="identifiant">Identifiant :</label>
<input id="identifiant" name="identifiant" type="text" />
<label for="mdp">Mot de passe :</label>
<input id="mdp" name="mdp" type="password" />
<label for="confirm">Confirmation :</label>
<input id="confirm" name="confirm" type="password" />
</fieldset>
<p>
<input id="submit" name="submit" type="submit" value="Envoyer" />
</p>
</form>
</div>
</body>
</html>
Les trois parties du formulaire : Informations Personnelles, Domicile et Compte seront découpé en 3 étapes sur 3 pages avec une navigation "etape précédente" et "étape suivante".
L'utilisateur peut donc voir qu'il y a 3 étapes pour valider le formulaire, je trouve que le formulaire est plus clair quand il est fait étape par étape.
Voir la démo. Télécharger le plugin.
Pour en savoir plus rendez vous sur la page FormToWizard plugin
