13'sportif

Aller au contenu | Aller au menu | Aller à la recherche

nov. 7

Concours de thème « Favori de l'hiver » sur dotaddict

Si vous suivez l'actualité de Dotclear, vous n'avez pas pu passer à coté de la création du site Dotaddict, avec la création de la section thèmes dans un premier temps :

themes.dotaddict.org, est la section consacrée aux thèmes du projet dotaddict.org regroupant les contributions à Dotclear. Accros à Dotclear, dotaddict.org sera notre point de rendez-vous.

Dotaddict

Pour fêter le lancement de ce site, l'équipe de Dotaddict organise un concours de thèmes pour Dotclear intitulé « Favori de l'hiver ».

L'alléchante grille de prix[1] a fini de me convaincre de participer avec mon thème 13zoli ;-)

PS: Je fait maintenant parti des inscrits.

Notes

[1] L'auteur du thème gagnant gagne une version gratuite de Dotclear

nov. 6

Thème 13zoli pour Dotclear2

Voici le thème 13zoli pour Dotclear2 :

13zoli

Il s'agit de la version épurée du thème que j'ai fait pour ce blog ;-)

Vous voulez tester !

Le mieux pour tester ce que ça donne, c'est de se rendre sur le blog de démonstration de dotaddict.org.

Merci à l'équipe de dotaddict pour cette belle initiative qui est une superbe vitrine pour Dotclear.

Édit du 26-05-2008 : Le thème en version 0.3 est maintenant compatible avec Dotclear2-RC1 ;-)

juil. 23

Petite astuce pour n'afficher un petit logo "Get Firefox" qu'aux utilisateurs d'IE

Comme l'explique Samuel Le Morvan dans son billet Le Hack CSS !important, le non respect de la directive !important par IE peut être exploité facilement en CSS pour, par exemple, n'afficher des infos que pour IE, explications :

Dans la partie gauche, j'ai ajouté le code HTML suivant :

   
<div id="ie-user">
  <h2>Promotions</h2>
  <a href="http://www.mozilla.org/products/firefox/" title="Get Firefox - The Browser, Reloaded">
    <img src="http://www.mozilla.org/products/firefox/buttons/getfirefox_large2.png" alt="Get Firefox" height="60" width="178">
  </a>
</div>

Et dans la CSS, ceci :

#sidebar #ie-user {
   display: none !important;
   display: inline;   
}    

Si vous utilisez un navigateur qui respecte cette directive, vous ne voyez pas l'image, sinon vous voyez ça :

Promotions

Get Firefox
juil. 7

Encore un exemple criant de la médiocrité d'IE en terme de respect des standards.

Comme le rappel fort justement Raphaël Goetter via Alsacreations, ce qui est vraiment plus que pénible lorsque l'on développe des sites en respectant les standards (XHTML / CSS) c'est le temps passé à essayer de les rendre utilisable sous cette daube ancêtre d'IE.

Alors pour illustrer ça, voici un exemple criant. Le code suivant :

<style type="text/css" media="screen">
body {
 font: 70% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
 background: #F9F9F9;
 color: black;
}
.box {
 width: 170px;
 color: white;
 padding: 3px;
 margin: 1em;
 background-color: #79A7E2;
}
.box p { font-weight: bold; padding: 0px 5px; border-bottom: 1px solid #8CB3EF;}
.box a { color: white; text-decoration: none;}
.content_item a { display: block;}
ul.content_item {
 margin: 0;
 padding: 0;
 list-style-type: none;
}
.content_item li {
 margin: 0;  
 padding: 0;
 line-height: normal;
}
.content_item a {
 padding: 5px;
}
.content_item a:hover { color: white; background-color: #8CB3EF;}
   </style>

   <div class="box">
     <p class="header_box">Une petite liste</p>
       <ul class="content_item">
         <li><a href="#" title="">Bienvenue</a></li>
         <li><a href="#" title="">xml</a></li>
         <li><a href="#" title="">azerty</a></li>
         <li><a href="#" title="">20200</a></li>
         <li><a href="#" title="">logo</a></li>
         <li><a href="#" title="">Fiches complémentaires de détournement</a></li>
       </ul>    
  </div>

Donne ça sur un navigateur respectueux des standards :

La liste sur un navigateur respecteux des standards

Mais voilà, sous IE ça donne ça :

La même liste sous IE

Super !! Donc ici on a deux problèmes :

  1. Le {display: block;} sur la balise a n'est pas pris en compte. Il faut vraiment survoler le lien pour que celui-ci soit actif !
  2. Il y a un espacement (qui sort de nul part) entre chaque éléments de la liste (alors que tous les margin et padding sont positionnés à zéro).

Eh bien j'ai du lutter pour enfin trouver un hack pour IE :

/* This semi-commented section exists to fix bugs in IE/Windows (the 'Holly Hack'). \*/
* html .content_item li { float: left; height: 1%;}
* html .content_item a { height: 1%;}
/*** End Hack */

Le résultat grâce au sympatique Holly Hack :