Archive pour la catégorie 'CSS'
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 
Nouveaux liens !
Jeudi 4 juin 2009Une semaine déjà sans faire un billet c'est long je sais...
Voilà donc des nouveaux liens sur la gauche (l'autre gauche ? la droite ! 
) qui vous permettrons de découvrir pas mal de sites en jQuery ou d'autres technologies.
- Function est un site Anglais plutôt bien fait avec pas mal de design de boutons (avec certains à vendre) et quelques articles qui m'intéressent.
- Nettuts+ est un blog avec pas mal d'articles et de tutoriaux (certains payant également) mais pas mal de contenu est gratuit c'est également un très bon site. N'hésitez pas a voir les sites de la même famille (PSDtuts, Audiotuts etc...).
- Six Revisions je le connais beaucoup moins mais il y a des bons articles également.
Création d'un nouveau projet web.
Lundi 25 mai 2009ProjectDeploy.org est un site web qui permet de créer une structure de base pour votre projet web.
Par exemple on peut choisir si on fait nos page en html 4.01 ou xhtml 1.0, si on veut faire du transitional ou du strict, si on utilise du css, si on veut inclure du jquery, des plugins etc...
Bref vous définissez vos options et lorsque vous avez fini cliquez sur "deploy!". A ce moment la vous pourez télécharger un fichier zip avec une "structure" de base pour votre projet.
Animons nos page avec jQuery
Dimanche 24 mai 2009Aujourd'hui un exemple pour animer vos pages web grâce à jQuery.
Nous allons utiliser la fonction .animate() celle-ci permet de modifier le css d'un ou plusieurs élément(s) de votre page.
Dans cet exemple nous allons travailler avec cinq liens qui vont nous permettre de faire bouger une balise html <p>.
Dans la balise body placez :
<a href="javascript:void(0)" onclick="anim1();">anim1();</a> <a href="javascript:void(0)" onclick="anim2();">anim2();</a> <a href="javascript:void(0)" onclick="anim3();">anim3();</a> <a href="javascript:void(0)" onclick="anim4();">anim4();</a> <a href="javascript:void(0)" onclick="anim5();">anim5();</a> <p id="p1">Paragraph with some text</p>
Puis dans le head ajouter la bibliotheque jQuery ainsi que nos différentes fonctions :
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function anim1(){
$("#p1").animate(
{
paddingLeft:"100px",
paddingTop:"0px"
},
1000
);
}
function anim2(){
$("#p1").animate(
{
paddingLeft: "200px",
paddingTop:"0px"
},
1000
);
}
function anim3(){
$("#p1").animate(
{
paddingLeft:"200px",
paddingTop:"100px"
},
1000
);
}
function anim4(){
$("#p1").animate(
{
paddingLeft:"100px",
paddingTop:"100px"
},
1000
);
}
function anim5(){
$("#p1").animate(
{
paddingLeft: "200px",
paddingTop:"0px"
},
1000
);
}
</script>
La premiere ligne inclus la librairie jQuery : "jquery-1.3.2.min.js". Ensuite j'ai créer 5 fonctions qui modifieront #p1 comme en CSS la balise avec l'id qui sera égale à p1 soit une balise avec id="p1".
Avec la fonction animate je modifie une ou plusieurs valeurs de CSS pour pouvoir déplacer mon élément sur ma page.
N'hésitez pas à ajouter des commentaires si vous avez besoin de plus d'explications.
Une seconde démonstration. Dans celle-ci j'ai ajouté la fonction fadeTo() qui permet de modifier l'opacité du texte.
Voir la démonstration 2
jQuery : On commence...
Samedi 23 mai 2009Voilà le premier article sur jQuery. Mais qu'est-ce que jQuery ?
jQuery est un "framework" javascript qui permet d'utiliser le DOM, et d'agrémenter vos pages par des animations, ou différentes fonctionnalités AJAX.
Pour utiliser jQuery nous allons dans un premier temps télécharger la librairie sur le site officiel.
Ensuite ajouter la dans votre page html entre les balises <head> et </head> grâce à
<script type="text/javascript" src="jquery.js"></script>
Maintenant nous pouvons utiliser jQuery grâce à : $(...)
Ceci $() va nous permettre d'utiliser les différentes fonctions de jQuery.
Par exemple si dans notre page nous avons <div id="mondiv">contenu de mon div</div> je vais pouvoir selectionner cet element avec jQuery.
$("#mondiv") va nous permettre de selectionner notre element comme en CSS #mondiv selectionnera la balise avec l'id correspondant.
Exemple de page html avec l'utilisation de jQuery qui permet de cacher l'élément.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="mondiv">contenu de mon div</div>
<script>$("#mondiv").hide(slow)</script>
</body>
</html>
