<?xml version="1.0" encoding="ISO-8859-1" ?>
<rdf:RDF
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  xmlns:admin="http://webns.net/mvcb/"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns="http://purl.org/rss/1.0/">

<channel rdf:about="http://www.eniris.com/index.php/">
  <title>CSS, XHTML, Standards du web, Tutoriaux, Techniques Web, Astuces. Eniris : Post-it™ on line</title>
  <description><![CDATA[Eniris, le |web| selon |ben|]]></description>
  <link>http://www.eniris.com/index.php/</link>
  <dc:language>fr</dc:language>
  <dc:creator></dc:creator>
  <dc:rights></dc:rights>
  <dc:date>2007-12-19T09:12:57+00:00</dc:date>
  <admin:generatorAgent rdf:resource="http://www.dotclear.net/" />
  
  <sy:updatePeriod>daily</sy:updatePeriod>
  <sy:updateFrequency>1</sy:updateFrequency>
  <sy:updateBase>2007-12-19T09:12:57+00:00</sy:updateBase>
  
  <items>
  <rdf:Seq>
    <rdf:li rdf:resource="http://www.eniris.com/index.php/2007/12/19/82-l-ultimate-transparence-des-png-sous-ie6-avec-du-css" />
  <rdf:li rdf:resource="http://www.eniris.com/index.php/2007/07/18/81-masquer-les-bordures-en-pointille-des-liens-cliques-sous-firefox" />
  <rdf:li rdf:resource="http://www.eniris.com/index.php/2007/05/02/80-css-reset-reloaded" />
  <rdf:li rdf:resource="http://www.eniris.com/index.php/2006/10/07/78-color-in-motion" />
  <rdf:li rdf:resource="http://www.eniris.com/index.php/2006/08/09/77-theme-de-discution-personalise-pour-google-talk" />
  <rdf:li rdf:resource="http://www.eniris.com/index.php/2006/08/06/76-em-calculator" />
  <rdf:li rdf:resource="http://www.eniris.com/index.php/2006/05/21/75-spam-spam-on-disait-que-t-etais-mort" />
  <rdf:li rdf:resource="http://www.eniris.com/index.php/2006/05/07/74-un-concentre-de-lightbox" />
  <rdf:li rdf:resource="http://www.eniris.com/index.php/2006/04/20/73-transparences-des-png-sous-internet-explorer" />
  <rdf:li rdf:resource="http://www.eniris.com/index.php/2006/04/09/72-toutes-les-colonnes-d-une-page-a-la-meme-hauteur" />
  </rdf:Seq>
  </items>
</channel>

<item rdf:about="http://www.eniris.com/index.php/2007/12/19/82-l-ultimate-transparence-des-png-sous-ie6-avec-du-css">
  <title>l'Ultimate transparence des PNG sous IE6 avec du CSS</title>
  <link>http://www.eniris.com/index.php/2007/12/19/82-l-ultimate-transparence-des-png-sous-ie6-avec-du-css</link>
  <dc:date>2007-12-19T09:12:57+01:00</dc:date>
  <dc:language>fr</dc:language>
  <dc:creator>|ben|</dc:creator>
  <dc:subject>Web Développement</dc:subject>
  <description>un grand merci a Shemu pour sa trouvaille sur KomodoMedia!
En effet c'est le script le plus efficace qu'il m'a été donné de "trouver" pour résoudre le fichu problème de canal alpha des PNG sous IE6.
Le code a mettre dans votre css :

* html img,
* html .png{
position:relative;
behavior:...</description>
  <content:encoded><![CDATA[ <p>un grand merci a <a href="http://www.babylon-design.com/" hreflang="fr">Shemu</a> pour sa trouvaille sur <a href="http://komodomedia.com/" hreflang="en">KomodoMedia</a>!</p>
<p>En effet c'est le script le plus efficace qu'il m'a été donné de "trouver" pour résoudre le fichu problème de canal alpha des PNG sous IE6.</p>
<p>Le code a mettre dans votre css :</p>
<pre>
* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}
</pre>
<p>Placez un gif transparent à coté de votre CSS nommé "transparent.gif" (si vous voulez le mettre dans le dossier "images" ou autre n'oubliez pas de changer le chemin dans le code si dessus)</p>
<p>il ne vous reste plus qu'a affecter la class "png" aux images .png de vos pages, idem pour les blocs et autres avec un .png en background CSS.</p>
<p>Pour des exemples, je vous invite à visiter le site de <a href="http://komodomedia.com/blog/index.php/2007/11/05/css-png-image-fix-for-ie/" hreflang="en">KomodoMedia</a>.</p>
<p>Sinon il y a toujours la solution de changer le gris par defaut qu'affiche IE6, via le logiciel <a href="http://entropymine.com/jason/tweakpng/" hreflang="en">TweakPNG</a> (un tuto est dispo ici <a href="http://phoenity.com/newtedge/png_degradability/" hreflang="en">phoenity.com</a>), pas top si vous n'avez pas un fond uni!</p>]]></content:encoded>
</item>
<item rdf:about="http://www.eniris.com/index.php/2007/07/18/81-masquer-les-bordures-en-pointille-des-liens-cliques-sous-firefox">
  <title>Masquer les contours en pointillé des liens cliqués sous FireFox</title>
  <link>http://www.eniris.com/index.php/2007/07/18/81-masquer-les-bordures-en-pointille-des-liens-cliques-sous-firefox</link>
  <dc:date>2007-07-18T16:53:21+02:00</dc:date>
  <dc:language>fr</dc:language>
  <dc:creator>|ben|</dc:creator>
  <dc:subject>Web Développement</dc:subject>
  <description>Lors d'un remplacement de texte par l'image (avec le CSS) et l'utilisation de text-indent:-999em; sur un lien, FireFox nous affiche un immonde cadre pointillé qui part du lien, et qui va jusqu'au bord gauche de la fenêtre (navigateur). Exemple :

Il s'agit d'une "propriété" de FF, qui matérialise...</description>
  <content:encoded><![CDATA[ <p>Lors d'un remplacement de texte par l'image (avec le CSS) et l'utilisation de <code>text-indent:-999em;</code> sur un lien, FireFox nous affiche un immonde cadre pointillé qui part du lien, et qui va jusqu'au bord gauche de la fenêtre (navigateur). Exemple :</p>
<p><img src="/images/78.png" alt="" /></p>
<p>Il s'agit d'une "propriété" de FF, qui matérialise la zone cliquée d'un lien.</p>
<p>Il est cependant possible de masquer ces bordures :<p>
<pre>/* hack FF pour masquer les contours pointillé sur les liens
-------------------------------------------------------*/
a{outline: none;}
:focus{-moz-outline-style: none;}</pre>
<p>Pour aller plus loin, la source : http://sonspring.com/journal/removing-dotted-links</p>]]></content:encoded>
</item>
<item rdf:about="http://www.eniris.com/index.php/2007/05/02/80-css-reset-reloaded">
  <title>CSS Reset Reloaded</title>
  <link>http://www.eniris.com/index.php/2007/05/02/80-css-reset-reloaded</link>
  <dc:date>2007-05-02T12:39:33+02:00</dc:date>
  <dc:language>fr</dc:language>
  <dc:creator>|ben|</dc:creator>
  <dc:subject>XHTML &amp;amp; CSS</dc:subject>
  <description>Pour réinitialiser les propriétés des tags html par defaut des différents navigateurs :


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike,...</description>
  <content:encoded><![CDATA[ <p>Pour réinitialiser les propriétés des tags html par defaut des différents navigateurs :</p>

<code>
<pre>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	background: transparent;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
</pre>
</code>

<p>source : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ via Digg</p>]]></content:encoded>
</item>
<item rdf:about="http://www.eniris.com/index.php/2006/10/07/78-color-in-motion">
  <title>Color in Motion</title>
  <link>http://www.eniris.com/index.php/2006/10/07/78-color-in-motion</link>
  <dc:date>2006-10-07T13:36:58+02:00</dc:date>
  <dc:language>fr</dc:language>
  <dc:creator>|ben|</dc:creator>
  <dc:subject>General</dc:subject>
  <description>Au hasard de mon surf, ce matin je suis arrivé sur le site Color in Motion
Ce site mets en scène les couleurs primaires afin de présenter leurs significations
 c'est en flash et c'est très bien fait ;)...</description>
  <content:encoded><![CDATA[ <p>Au hasard de mon surf, ce matin je suis arrivé sur le site <a href="http://www.mariaclaudiacortes.com" hreflang="en">Color in Motion</a></p>
<p>Ce site mets en scène les couleurs primaires afin de présenter leurs significations</p>
<p> c'est en flash et c'est très bien fait ;)</p>
<p><a href="http://www.mariaclaudiacortes.com" hreflang="en"><img src="/images/sp1.jpg" alt="http://www.mariaclaudiacortes.com" /></a></p>]]></content:encoded>
</item>
<item rdf:about="http://www.eniris.com/index.php/2006/08/09/77-theme-de-discution-personalise-pour-google-talk">
  <title>Theme de discution personnalisé, pour Google Talk</title>
  <link>http://www.eniris.com/index.php/2006/08/09/77-theme-de-discution-personalise-pour-google-talk</link>
  <dc:date>2006-08-09T19:14:33+02:00</dc:date>
  <dc:language>fr</dc:language>
  <dc:creator>|ben|</dc:creator>
  <dc:subject>General</dc:subject>
  <description>
Apres la découverte et la visite des sites suivants :

http://www.gogtalk.com/

http://www.customizetalk.com/

j'ai pu voir comment sont fait les themes visuels de discussion de talk™, et vu que c'est de l'html avec du CSS, trop facile! :D 
Voici donc le theme que j'ai fait avec quelques avatars personnalisés : chat talk eniris theme
Pour l'installation suivez le txt  ;) </description>
  <content:encoded><![CDATA[<img src="/images/avatar-gtalklogo.png" alt="" style="float:left;margin-right:10px;" />
<p>Apres la découverte et la visite des sites suivants :</p>
<p>
<a href="http://www.gogtalk.com/" hreflang="fr">http://www.gogtalk.com/</a>
<br />
<a href="http://www.customizetalk.com/" hreflang="en">http://www.customizetalk.com/</a>
</p>
<p>j'ai pu voir comment sont fait les themes visuels de discussion de talk&trade;, et vu que c'est de l'html avec du CSS, trop facile! :D </p>
<p>Voici donc le theme que j'ai fait avec quelques avatars personnalisés : <a href="http://www.eniris.com/files/chat-eniris-themes.zip" hreflang="fr">chat talk eniris theme</a><br />
<em>Pour l'installation suivez le txt  ;)</em> </p> <p style="text-align:center">
<img src="/images/talk-eniris.jpg" alt="" /> <img src="/images/talk-eniris_picture.jpg" alt="" /> <img src="/images/talk-enirisbothpictures.jpg" alt="" /> <img src="/images/talk-enirisbothpictures2.jpg" alt="" />
</p>]]></content:encoded>
</item>
<item rdf:about="http://www.eniris.com/index.php/2006/08/06/76-em-calculator">
  <title>Em Calculator</title>
  <link>http://www.eniris.com/index.php/2006/08/06/76-em-calculator</link>
  <dc:date>2006-08-06T20:34:08+02:00</dc:date>
  <dc:language>fr</dc:language>
  <dc:creator>|ben|</dc:creator>
  <dc:subject>XHTML &amp;amp; CSS</dc:subject>
  <description>Une petite calculette pour faire très simplement vos calculs d'héritage de taille de typo en fonction de votre DOM - Em Calculator.
Source : http://www.fairytells.net...</description>
  <content:encoded><![CDATA[ <p>Une petite calculette pour faire très simplement vos calculs d'héritage de taille de typo en fonction de votre DOM - <a href="http://riddle.pl/emcalc/" hreflang="en">Em Calculator</a>.</p>
<p>Source : http://www.fairytells.net</p>]]></content:encoded>
</item>
<item rdf:about="http://www.eniris.com/index.php/2006/05/21/75-spam-spam-on-disait-que-t-etais-mort">
  <title>Spam! spam! on disait que t'étais mort!</title>
  <link>http://www.eniris.com/index.php/2006/05/21/75-spam-spam-on-disait-que-t-etais-mort</link>
  <dc:date>2006-05-21T16:29:36+02:00</dc:date>
  <dc:language>fr</dc:language>
  <dc:creator>|ben|</dc:creator>
  <dc:subject>General</dc:subject>
  <description>Suite aux attaques spam de ces derniers jours, je coupe les commentaires. Ce site n'est pas un casino, ni une pharmacie grr 
Merci de votre compréhension.
En même temps, personne ne les utilise les commentaires  ^^ 
Je reste joignable a l'adresse : ben(chez)eniris(dot)com
Edit : je coupe aussi...</description>
  <content:encoded><![CDATA[ <p>Suite aux attaques spam de ces derniers jours, je coupe les commentaires. Ce site n'est pas un casino, ni une pharmacie grr </p>
<p>Merci de votre compréhension.</p>
<p>En même temps, personne ne les utilise les commentaires  ^^ </p>
<p>Je reste joignable a l'adresse : ben(chez)eniris(dot)com</p>
<p>Edit : je coupe aussi les trackbacks 8| </p>]]></content:encoded>
</item>
<item rdf:about="http://www.eniris.com/index.php/2006/05/07/74-un-concentre-de-lightbox">
  <title>Un concentré de LightBox</title>
  <link>http://www.eniris.com/index.php/2006/05/07/74-un-concentre-de-lightbox</link>
  <dc:date>2006-05-07T19:24:11+02:00</dc:date>
  <dc:language>fr</dc:language>
  <dc:creator>|ben|</dc:creator>
  <dc:subject>Web Développement</dc:subject>
  <description>Avec l'Ajax, est arrivée une alternative aux pop-up pour le zoom des images. Voici une selection (personnelle) de ceux qui me semblent intéressants :

 easyALBUM : Super clean markup without Ajax
 Lightbox JS v2.0
 ThickBox image
 GreyBox : A pop-up window that doesn't suck.

source :...</description>
  <content:encoded><![CDATA[ <p>Avec l'Ajax, est arrivée une alternative aux pop-up pour le zoom des images. Voici une selection (personnelle) de ceux qui me semblent intéressants :</p>
<ol>
 <li><a href="http://www.tjkdesign.com/articles/gallery/photo_gallery.asp" hreflang="en">easyALBUM</a> : Super clean markup without Ajax</li>
 <li><a href="http://www.huddletogether.com/projects/lightbox2/" hreflang="en">Lightbox JS v2.0</a></li>
 <li><a href="http://jquery.com/demo/thickbox/" hreflang="en">ThickBox image</a></li>
 <li><a href="http://amix.dk/greybox/demo.html" hreflang="en">GreyBox</a> : A pop-up window that doesn't suck.</li>
</ol>
<p>source : http://www.blinklist.com/tag/lightbox/</p>
<p>Et pour faire le "loader image" voici un lien funky : <br /><a href="http://www.ajaxload.info/" hreflang="en">http://www.ajaxload.info/</a></p>
<p><img src="http://www.napyfab.com/ajax-indicators/images/indicator_snake.gif" alt="" />
<img src="http://www.napyfab.com/ajax-indicators/images/indicator_arrows_circle.gif" alt="" /> <img src="http://www.napyfab.com/ajax-indicators/images/indicator_remembermilk_orange.gif" alt="" /> <img src="http://www.napyfab.com/ajax-indicators/images/indicator_tiny_red.gif" alt="" /> <img src="http://www.napyfab.com/ajax-indicators/images/indicator_mozilla_blu.gif" alt="" /></p>]]></content:encoded>
</item>
<item rdf:about="http://www.eniris.com/index.php/2006/04/20/73-transparences-des-png-sous-internet-explorer">
  <title>Transparences des PNG sous Internet Explorer</title>
  <link>http://www.eniris.com/index.php/2006/04/20/73-transparences-des-png-sous-internet-explorer</link>
  <dc:date>2006-04-20T22:06:52+02:00</dc:date>
  <dc:language>fr</dc:language>
  <dc:creator>|ben|</dc:creator>
  <dc:subject>Web Développement</dc:subject>
  <description>Sources : http://forum.myphphost.net/viewtopic.php?pid=393
Voici le rendu d'un PNG 24 en mode "normal" sous IE : 
http://docs.4feeling.com/exemple1.htm
Et voici le meme avec le script ajouté : 
http://docs.4feeling.com/exemple2.htm</description>
  <content:encoded><![CDATA[<p>Sources : http://forum.myphphost.net/viewtopic.php?pid=393</p>
<p>Voici le rendu d'un PNG 24 en mode "normal" sous IE : <br />
<a href="http://docs.4feeling.com/exemple1.htm">http://docs.4feeling.com/exemple1.htm</a></p>
<p>Et voici le meme avec le script ajouté : <br />
<a href="http://docs.4feeling.com/exemple2.htm">http://docs.4feeling.com/exemple2.htm</a></p> <p>code pour image normale :</p>
<pre><code>
/**********************************************************
Sleight
(c) 2001, Aaron Boodman
http://www.youngpup.net
**********************************************************/

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent)
{
	document.writeln('<style type="text/css">img { visibility:hidden; } </style>');
	window.attachEvent("onload", fnLoadPngs);
}

function fnLoadPngs()
{
	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);

	for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--)
	{
		if (itsAllGood && img.src.match(/\.png$/i) != null)
		{
			var src = img.src;
			var div = document.createElement("DIV");
			div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizing='scale')"
			div.style.width = img.width + "px";
			div.style.height = img.height + "px";
			img.replaceNode(div);
		}
		img.style.visibility = "visible";
	}
}</code>
</pre>

<p>code pour image en "background"</p>
<pre><code>
/**********************************************************
Sleight for Backgrounds
Original code (c) 2001 Aaron Boodman, http://www.youngpup.net
This version (c) 2003 Drew McLellan, http://www.allinthehead.com
**********************************************************/
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
	window.attachEvent("onload", alphaBackgrounds);
}

function alphaBackgrounds(){
	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
	for (i=0; i < document.all.length; i++){
		var bg = document.all[i].currentStyle.backgroundImage;
		if (itsAllGood && bg){
			if (bg.match(/\.png/i) != null){
				var mypng = bg.substring(5,bg.length-2);
				document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
				document.all[i].style.backgroundImage = "url('/assets/images/x.gif')";
			}
		}
	}
}</code>
</pre>]]></content:encoded>
</item>
<item rdf:about="http://www.eniris.com/index.php/2006/04/09/72-toutes-les-colonnes-d-une-page-a-la-meme-hauteur">
  <title>Toutes les colonnes d'une page à la même hauteur</title>
  <link>http://www.eniris.com/index.php/2006/04/09/72-toutes-les-colonnes-d-une-page-a-la-meme-hauteur</link>
  <dc:date>2006-04-09T18:15:18+02:00</dc:date>
  <dc:language>fr</dc:language>
  <dc:creator>|ben|</dc:creator>
  <dc:subject>Web Développement</dc:subject>
  <description>Grace au petit javascript disponible sur le site www.projectseven.com, votre site a plussieurs colonnes, ne fera plus l'escalier.
En effet, ce script mets toutes les colonnes de votre site à égale hauteur : demo

PVII Equal Height CSS Columns...</description>
  <content:encoded><![CDATA[ <p>Grace au petit javascript disponible sur le site www.projectseven.com, votre site a plussieurs colonnes, ne fera plus l'escalier.<br />
En effet, ce script mets toutes les colonnes de votre site à égale hauteur : <a href="http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm" hreflang="en">demo</a></p>

<p><a href="http://www.projectseven.com/tutorials/css/pvii_columns/index.htm" hreflang="en">PVII Equal Height CSS Columns</a></p>]]></content:encoded>
</item>

</rdf:RDF>
