Antoine.Guiral.Info » CSS http://antoine.guiral.info Mon, 15 Feb 2010 16:24:16 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 [tuto microformat] utiliser le microformat hCalendar http://antoine.guiral.info/2010/01/06/tuto-microformat-utiliser-le-microformat-hcalendar/ http://antoine.guiral.info/2010/01/06/tuto-microformat-utiliser-le-microformat-hcalendar/#comments Tue, 05 Jan 2010 22:19:10 +0000 Antoine http://antoine.guiral.info/?p=631 Maintenant que vous avez vu à quoi peuvent servir les microformats nous allons commencer à les utiliser :)

Le microformat hCalendar

Nous avons vu que hCalendar servait à rendre compréhensible/utilisable/exportable les dates/évenements que nous pouvons parfois partager sur nos différents sites. Le compréhensible vous avez compris que c’est « compréhensible par les machines » ;)

Nous allons donc créer un petit événement : le 11 janvier ce sera l’anniversaire de ce blog (déjà deux ans :) ).

Créer l’événement

Dans un premier temps il va falloir créer notre événement, en utilisant la class vevent.

  1.  
  2. <div class="vevent">
  3. </div>
  4.  

Voilà notre événement est créé, nous allons le remplir.

Quoi, Quand, Où

Nous allons utiliser les classes suivantes : summary pour le quoi, location pour le où et dtstart/dtend pour le quand.

  1.  
  2. <div class="vevent">
  3.  
  4.  
  5. Oyé Oyé!,
  6. sur <span class="location">ce blog</span>
  7. nous allons fêter <span class="summary">le deuxième anniversaire de http://antoine.guiral.info</span>
  8. du <abbr class="dtstart" title="2010-01-11T00:00">11 janvier 2010 à 00h00</abbr>
  9. au <abbr class="dtend" title="2010-01-18T00:00">18 janvier 2010 à 00h00</abbr>
  10.  
  11. </div>
  12.  

Voilà un exemple complet :) Vous avez remarqué que pour les dates nous utilisons la balise abbr afin de proposer une date lisible par les humains et une date (dans le title) lisible par les machines.

Mais encore?

Si vous avez plusieurs événements, vous pouvez utiliser la class vcalendar.

On aurait aussi pu utiliser les classes url pour ajouter une url, duration pour la durée de l’événement, attendee pour les participants, etc etc… Je vous conseille d’aller voir la doc officiel du microformat hCalendar ;)

Vous l’aurez compris l’exemple utilisé n’a rien de fictif :p restez attentifs ^^

Ca y est vous avez utilisé le plugin magique pour sauvegarder cet événement dans votre google calendar?

]]> http://antoine.guiral.info/2010/01/06/tuto-microformat-utiliser-le-microformat-hcalendar/feed/ 3 [HTML CSS] hack ie6 : le meilleur de tous http://antoine.guiral.info/2009/05/27/html-css-hack-ie6-le-meilleur-de-tous/ http://antoine.guiral.info/2009/05/27/html-css-hack-ie6-le-meilleur-de-tous/#comments Wed, 27 May 2009 21:24:23 +0000 Antoine http://antoine.guiral.info/?p=212 Un billet court pour vous expliquer ce petit hack pour internet explorer 6 (oui ça existe encore…).

Petite remise en situation : j’étais en train de faire une application pour facebook. Je devais placer un boutton de formulaire avec image. Tout se passait bien avant que je teste sous ie6 (ie7/8, firefox, chrome, safari, opera : nickel au pixel près). Juste avant, internet explorer m’avait fait craquer par rapport à une méthode (encore en beta certe…) en FBJS (le javascript de Facebook) pour ajouter du texte. Juste pour les curieux cette méthode s’appelle setInnerXHTML().

Bref, IE me sortait par les yeux. J’ai donc employé les grands moyens!

Facebook rajoutant sa couche d’emmerdement, je ne pouvais pas utiliser les commentaires conditionnels en html. Donc vive la détection du user agent en php.

  1. $userAgent = $_SERVER['HTTP_USER_AGENT'];
  2. if(preg_match("/MSIE 6/i", $userAgent)) {
  3.  
  4. }
  5. else {
  6.  
  7. }

Ensuite dehors l’image sur le boutton. Les utilisateurs de ie6 auront un boutton dégueulasse. Tandis que les autres utilisateurs auront un beau boutton (je vous épargne le CSS du boutton pour les utilisateurs CENSES).

  1. $userAgent = $_SERVER['HTTP_USER_AGENT'];
  2. if(preg_match("/MSIE 6/i", $userAgent)) {
  3.      echo'
  4. <input id="actionIEEnvoiTop5" type="submit" value="Ayé" />';
  5. }
  6. else {
  7.      echo'
  8. <input id="actionEnvoiTop5" type="submit" />';
  9. }

Maintenant que nous avons créé nos bouttons nous devons les positionner. Grossierement je voulais les centrer dans un div.
Première étape, descendre le boutton :

  1. $userAgent = $_SERVER['HTTP_USER_AGENT'];
  2. if(preg_match("/MSIE 6/i", $userAgent)) {
  3.      echo'
  4. <input id="actionIEEnvoiTop5" type="submit" value="Ayé" />';
  5. }
  6. else {
  7.      echo'
  8. <input id="actionEnvoiTop5" type="submit" />';
  9. }

J’ai utilisé la balise
. Oui le truc hyper déprécié et en dehors de toutes normes :D (majuscule, balise non fermante…bref tout pour ie6).
Ensuite, et c’est là où réside la plus grande astuce, je devais décaller mon boutton vers la droite (vers le centre).

  1. $userAgent = $_SERVER['HTTP_USER_AGENT'];
  2. if(preg_match("/MSIE 6/i", $userAgent)) {
  3.      echo'
  4.  
  5. <span style="color:#fff">fuckie6</span>
  6. <input id="actionIEEnvoiTop5" type="submit" value="Ayé" />';
  7. }
  8. else {
  9.      echo'
  10. <input id="actionEnvoiTop5" type="submit" />';
  11. }

Donc ici, nous avons rajouté un texte blanc pour décaller le boutton. Surtout il est important de choisir un texte adapté au décallage souhaité (fuckie,fuckie6, voir f*ckie6 en ajustant le nombre d’étoile :) ). N’oubliez pas non plus de faire correspondre la couleur du texte avec votre couleur de background!

Voilà!!! Notre boutton est placé pile au bon endroit!!

Bon j’espère que vous avez compris que c’est une immense farce qui nous a bien fait marré au bureau (oui du coup on a vraiment utilisé ce « hack » :p). Plus sérieusement on pourrais imaginer de mettre un lien vers le téléchargement de chrome/ff/(ie7/8??)/opera … mais c’est moins drôle :D

A bientôt pour un nouveau VRAI tuto sur un sujet qui portera soit sur les sprites CSS ou les plugins jquery ou un concept de POO PHP ou les applications facebook. Que préfereriez vous?

Random Posts

]]> http://antoine.guiral.info/2009/05/27/html-css-hack-ie6-le-meilleur-de-tous/feed/ 8 [css] bien comprendre les « floats » http://antoine.guiral.info/2008/11/17/css-bien-comprendre-les-floats/ http://antoine.guiral.info/2008/11/17/css-bien-comprendre-les-floats/#comments Mon, 17 Nov 2008 18:20:41 +0000 Antoine http://antoine.guiral.info/?p=152 Css-tricks nous met à disposition un excellent screen cast pour bien comprendre et maitriser le positionnement en float de nos éléments html. Ca se passe ici.

]]> http://antoine.guiral.info/2008/11/17/css-bien-comprendre-les-floats/feed/ 0 De la bonne utilisation des tableaux http://antoine.guiral.info/2008/01/31/de-la-bonne-utilisation-des-tableaux/ http://antoine.guiral.info/2008/01/31/de-la-bonne-utilisation-des-tableaux/#comments Thu, 31 Jan 2008 18:59:27 +0000 Antoine http://guiralantoine.wordpress.com/?p=39 C’est un débat qui revient souvent sur les différents forums : tableau vs div. Pour ma part ce débat n’a pas lieu d’être… Nous allons voir pourquoi.

Je viens d’avoir une surprise en rédigeant ce billet…Les divs existent depuis HTML 3.2 (1995) et CSS 1 depuis 1996. Et oui je ne le savais pas…faut dire que je n’avais que 10 ans pour la sortie de CSS1! Je vous laisse calculer mon âge pour la sortie d’ HTML 3.2 :p.

Donc pour ceux qui ne le savaient pas (comme moi…) l’origine du « battle » n’est pas due à un oubli du w3c dans les spécifs d’HTML et de CSS. Bon si ce n’est pas le langage il nous reste…les développeurs (vous et moi quoi même si il y a dix ans le web était un peu moins ouvert…) et les navigateurs. A qui la faute? Eh bien sûrement un peu aux deux. Mais pas forcement en même temps.

Tableau Vs DIV

  • La guerre des navigateur

              1) Le commencement…

En cette fin de millénaire un guerre faisait rage sur la planète w3dot…Le seigneur netscape menait la rébellion face au tyran puissant internet explorer. Les batailles avaient lieux aux quatre coins du monde. Netscape en gagna beaucoup mais ne fût jamais en mesure de faire plier IE (aka internet explorer). Comment netscape arrivait il à s’infiltrer sur les terre de son rival? En respectant au maximum les règles du dieu W3C. Ce dieu étant jeune, les deux seigneurs de guerre se proclamèrent dieux vivant et reprirent à leurs compte ses lois. Netscape était plutôt fidèle au W3C tandis que IE n’en faisait qu’à sa tête…Comme un surfeur sachant surfer doit savoir surfer sans son surf, ils devaient s’adapter aux deux navigateurs qui régissaient les eaux de w3dot, et devaient trouver un outils leurs permettant de faire ce qu’ils voulaient aussi bien sur les eaux de netscape que sur celle du terrible puissant tyran ?????? (mettez ce que vous voulez ici) IE. La solution qu’ils trouvèrent fût : les tableaux.

              2) Le roi est mort, vive le roi

Cette guerre était faite pour durer. Les timestamps défilaient, jusqu’au jour où netscape fit une alliance avec le seigneur AOL. Ce dernier ne pensait qu’à s’enrichir. Les eaux de W3dot connurent une période plus calme au dépend des avancées technologique. En effet IE ne craignait plus grand chose d’un netscape moribond. Sauf que le village mozilla et ses irréductibles surfeurs ne pouvaient se satisfaire de cela. Et leur chef du nom de FireFox mena une nouvelle rébellion!Son cheval de bataille fut celui de nescape à la grande époque : être meilleur prophète du W3C que ne l’était IE. Les créateurs de surf se convertirent massivement. IE n’avait qu’à bien se tenir et devait réagir très rapidement. Il renouvela son armée pour la 7ème et 8ème fois très rapidement. Nous vivions l’aube d’une nouvelle ère.

IE vs FF

  • Et dieu créa l’accessibilité

              1) C’est la lutte…

Les surfeurs subissaient la guerre depuis ses débuts. ils devaient s’adapter, évoluer, apprendre constamment. Et ce, uniquement pour répondre aux exigence de leurs dieux vivants. Mais ils étaient de plus en plus nombreux. Et les différences entre eux se multipliaient au même rythme que W3dot se polluait. Cela nécessitait des efforts supplémentaire mais indispensable pour que la cohabitation entre surfeurs soit conservé. Les accords de Sémantique et d’Accessibilité étaient signés. W3dot allait elle être sauvée?

              2) Tous pour un, chacun ma gueule

C’était sans compter sur les surfeurs conservateurs. Ceux qui quelques années auparavant avaient construit leur réputations grâce aux tableaux. Les tableaux étaient la base de leur activité…Or les accords de S&A étaient clair : les tableaux ne doivent être utilisés QUE pour les données tabulaires. Toutes autre utilisations est à proscrire, il ne fallait plus compter décorer sa planche avec un tableau : les divs étaient la pour nous simplifier la vie. Une guerre civile éclata…D’un coté les conservateurs et leurs tableaux non conforme avec les accords S&A et de l’autre les « Amis de W3dot » qui prônaient les nouvelles règles.

Accessibilité

FIN

Bon je vais résumer mon point de vue : au début il n’était pas possible de coder pour tout les navigateurs avec des divs. Les tableaux étaient donc indispensables. Cependant avec les dernières générations il est possible de coder propre et sémantiques. Parfois en rusant un peu pour faire correspondre certain détails entre IE et FF mais C’EST POSSIBLE. Or on voit trop souvent des codes utilisant des tableaux pour autres choses que des données tabulaires (traditionnellement du design). La limite entre données tabulaires ou non peut varier un peu à mon avis. Mais on ne construit pas un design avec des tableaux. Cela ne signifie rien sémantiquement parlant et ce n’est pas accessible. Pensez à un lecteur d’écran qui va devoir lire vos 15 tableaux imbriqués… Et si ces deux arguments ne vous conviennent pas pensez à la maintenabilité de votre code…Bref, même si cela peut vous demander un petit effort au début vous gagnerez en productivité (il paraît qu’il n’y a plus que ça qui compte aujourd’hui) mais aussi en accessibilité.

Pour en parler j’ai créé un groupe facebook : « les tableaux pour les données tabulaires ». Rejoignez nous!

Si vous voyez des phottes fautes, ou si (et surtout) si vous souhaitez réagir surtout n’hésitez pas! Un blog c’est avant tout un endroit pour partager et réagir.

PS : cette histoire n’a aucune connotation religieuse dans la vraie vie!! Bref pas de sujet polémique la dessus quoi lol

]]> http://antoine.guiral.info/2008/01/31/de-la-bonne-utilisation-des-tableaux/feed/ 0 [tuto web] cadre avec bordures extensibles valide xhtml/css http://antoine.guiral.info/2008/01/13/tuto-cadre-avec-bordures-extensibles-valide-xhtml-css/ http://antoine.guiral.info/2008/01/13/tuto-cadre-avec-bordures-extensibles-valide-xhtml-css/#comments Sun, 13 Jan 2008 00:32:25 +0000 Antoine http://guiralantoine.wordpress.com/2008/01/13/tuto-cadre-avec-bordures-extensibles-valide-xhtmlcss/ Bonjour à tous!

Comme promis un petit tutoriel pour la création de cadres avec bordures extensibles valide XHTML 1.1 et CSS. C’est cette méthode que j’utilise pour le design de mon cv en ligne.

  • Les images

Pour vous faciliter la tâche je vous mets les images utilisées pour ce tutoriel. Cependant rien ne vous empeche d’utiliser les votres! Donc clic droi -> enregistrer l’image sous puis renommez les.

  • B_vert.png B_vert.png
  • BL_vert.png BL_vert.png
  • BR_vert.png BR_vert.png
  • L_vert.png L_vert.png
  • R_vert.png R_vert.png
  • T_vert.png T_vert.png
  • TL_vert.png TL_vert.png
  • TR_vert.png TR_vert.png
  • Le XHTML

Le premier point est assez simple à comprendre : on veut que notre cadre soit extensible en hauteur et en largeur. Nous souhaitons en plus pouvoir mettre une image de bordure différente pour chaque cotés de notre cadre.

Nous allons imbriquer nos « div » les uns dans les autres. De cette manière les « div » les plus à l’exterieur s’ajusteront automatiquement à la taille du « div » le plus imbriqué.

  1.  
  2. <div id="L">
  3. <div id="R">
  4. <div id="T">
  5. <div id="B">
  6. Mon texte</div>
  7.  
  8. <!--**** Fermeture #B **** --></div>
  9.  
  10. <!--**** Fermeture #T **** --></div>
  11.  
  12. <!--**** Fermeture #R **** --></div>
  13.  
  14. <!--**** Fermeture #L **** -->

Vous pouvez voir que j’ai déjà placé des « id » dans mes « div » de manière a pouvoir appliquer des styles à chacun d’eux. « L » correspondant à « left » pour la bordure de gauche, « R » à « right » pour celle de droite, « T » à « top » pour celle du haut et enfin « B » à « bottom » pour celle du bas.

Attention : pensez à utiliser des « class » plutot que des « id » si vous utilisez plusieurs cadres du même type sur votre page.

A ce moment là nous avons une structure extensible pour laquelle nous pouvons mettre grace au CSS des bordures. Cependant il nous manque la possibilité de placer nos angles. En effet, le CSS nous permet de ne placer qu’une seule image grace à la propriété background-image:url(path/to/mon-image.png). Donc ici 4 « div » nous donne 4 bordures : il nous manque les 4 « div » correspondant aux 4 angles de notre cadre.

Voila ce que l’on obtient :

  1.  
  2. <div id="L">
  3. <div id="R">
  4. <div id="T">
  5. <div id="B">
  6. <div id="TL"></div>
  7. <div id="TR"></div>
  8. <div id="BL"></div>
  9. <div id="BR"></div>
  10.  
  11. Mon texte ici : Hello world</div>
  12.  
  13. <!--**** Fermeture #B **** --></div>
  14.  
  15. <!--**** Fermeture #T **** --></div>
  16.  
  17. <!--**** Fermeture #R **** --></div>
  18.  
  19. <!--**** Fermeture #L **** -->

Pas besoin de vous expliquer les « id« ? :-) Allez je vous fait le premier : « TL » pour « top-left » ce qui correspond au coin supérieur gauche,etc…

Remarque 1 : nous n’imbriquons pas les « div » qui servent aux angles. Nous les placerons grace au CSS.

Remarque 2 : nous n’utilisons pas la balise « img » pour les angles alors qu’il n’y à pas de répétitions. Pourquoi? Parce qu’il est important de séparer une image de contenu (une illustration pour votre texte par exemple, ou un logo) et une image de présentation ou de design (les images de nos bordures ou une image de fond).

  • Le CSS

Commençons par positionner les angles. On va les positionner en « absolute » dans le conteneur parent (ici : le div « id#B« ).

  1. div{position:relative}
  2.  
  3. #TL{
  4. position:absolute;
  5. background:url(images/TL_vert.jpg) left top;
  6. background-repeat:no-repeat;
  7. top:0px;
  8. left:0px;
  9. height:50px;
  10. width:50px
  11. }
  12. #TR{
  13. position:absolute;
  14. background:url(images/TR_vert.jpg) top right;
  15. background-repeat:no-repeat;
  16. top:0px;
  17. right:0px;
  18. height:50px;
  19. width:50px
  20. }
  21. #BL{
  22. position:absolute;
  23. background:url(images/BL_vert.jpg) bottom left;
  24. background-repeat:no-repeat;
  25. bottom:0px;
  26. left:0px;
  27. height:50px;
  28. width:50px
  29. }
  30. #BR{
  31. position:absolute;
  32. background:url(images/BR_vert.jpg) bottom right;
  33. background-repeat:no-repeat;
  34. bottom:0px;
  35. right:0px;
  36. height:50px;
  37. width:50px
  38. }

Commentaire 1 : les arguments après l’url de l’image servent à positionner le background dans le bloc pour assurer le positionnement si le div est plus grand que l’image de l’angle.

Commentaire 2 : les top, left, right, bottom à « 0px; » sont là pour placer les « div » pour les angles. Ne pas oublier qu’on les positionne en absolute!

Commentaire 3 :les height et width définissent la taille des « div » pour les angles. Vous devez ajuster ces valeurs en fonction de VOS images.

Plus que les bordures (ouf!). Comme d’habitude le source et on décortique après!

  1. .div{position:relative} // tout au début du css pour factoriser le code
  2.  
  3. #L{
  4. background:url(images/L_vert.jpg) repeat-y 0 0;
  5. background-position:center left
  6. }
  7. #R{
  8. background:url(images/R_vert.jpg) repeat-y 100% 0;
  9. background-position:center right
  10. }
  11. #T{
  12. background:url(images/T_vert.jpg) repeat-x 0 0
  13. }
  14. #B{
  15. background:url(images/B_vert.jpg) repeat-x 0 100%
  16. }

Commentaire 1 : attention au repeat-y et repeat-x suivant que l’on travaille sur une bordure horizontale ou verticale. A chaque fois on utilise une images de largeur très fine (par exemple 2px) à laquelle on appliquera un repeat. Cela nous donne la caractère extensible.

Commentaire 2 : le background-postion est une autre manière de positionner le fond dans le bloc (à comparer au commentaire 1 des angles).

Voila vous avez tout pour réussir vos cadres extensibles. Si vous avez des questions je reste bien sûr à votre entière disposition. Et n’hésitez pas à me laisser des commentaires, à me signaler des bugs, coquilles, etc etc…

]]> http://antoine.guiral.info/2008/01/13/tuto-cadre-avec-bordures-extensibles-valide-xhtml-css/feed/ 24