Mais la solution me vint de l’ami Babozor dans son podcast LaGrotteDuBarbu, épisode Saison 03 Episode 07 – LegoPiedEcranVertical.

Mais oui bien sûr, les Lego ! Bon j’ai bien entendu comme tout le monde,j’ai eu un doute sur la solidité de l’ensemble mais poussé par la curiosité et par mon âme d’enfant je me suis dit que j’allais essayer.
J’ai profité de la visite d’amis et de la parfaite coincidence du fait que je venais de retrouver ma vielle boite de Lego (bon d’accord ma mère m’a dit « Tu les prends ou je les jette », donc forcément je les avaient ramenés chez moi sans trop savoir ce que j’allais en faire)
Le truc important, comme le remarque Babozor, c’est le système de répartition de masse (avec la forme en triangle). Et c’est vrai que cela marche vraiment bien.
Au départ tout le monde m’a dit que c’était n’importe quoi mais au final tout le monde est parti dans sa petite construction.

En conclusion, on est parti un peu en live et au final la structure est quelque peu noyée sous le reste. Mais bon on s’est bien éclaté à faire ça et maintenant mon bureau a trop la classe !

Tout le monde le sait. Même si des efforts ont pu être observés : compte Twitter @LALIGNEDEFREE, Angélique BERGE (Directrice de la Relation Abonnés) très présente et active, allant parfois jusqu’à intervenir pour débloquer des situations, des chiffres tentant de montrer que le S.A.V. de Free est au top…
Sur le terrain, ceux qui ont malheureusement dû faire appel à la hotline savent de quoi je parle. Les rares fois ou cela se déroule à peu près sans encombres, on reste étonnement surpris. Ce qui me semble tout de même assez illogique.

J’ai décidé de partager mon expérience avec l’opérateur Free au sujet d’une coupure de ligne ayant pour cause l’utilisation d’un numéro de téléphone qui ne m’appartenait pas.
Si on ne le sait pas et qu’on utilise le numéro de l’ancien locataire mais que celui n’a pas résilié son abonnement voilà ce qui peut arriver.

J’écris cet article, parce que :

• Je sais que beaucoup de personne on eu des problèmes avec leur abonnement.
• Peut-être aurai-je de bons conseils pour faire avancer mon dossier.
• Ça soulage (un peu) de l’écrire.

Résumé de l’incident

- 15/09/2009 : Déménagement dans le nouveau logement et demande d’ouverture de la ligne (via la procédure de déménagement sur internet car j’étais déjà abonné Free) avec le numéro de téléphone fourni par les anciens locataires. Ce numéro devait correspondre précisément au numéro de la ligne résiliée auprès de France Telecom précédemment et qui arrivait dans ce logement. Je m’aperçus plus tard que ce n’était malheureusement pas le cas.

- 21/09/2009 : Ouverture de la ligne. Jusqu’ici tout va bien

- 11/02/2010 : Coupure de la ligne. La Freebox ne se synchronise plus. J’appelle la hotline et apprends que le numéro a été réalloué à une autre ligne. J’apprends également que le numéro ne m’appartenait pas, que tout ça est donc normal car j’ai commis une erreur en faisant une demande d’inscription avec ce numéro. Il faut donc « reconstruire » la ligne avec un nouveau numéro.
Deux choix me sont proposés : immédiatement avec facturation (90€) ou bien dans un délai de 10 à 15 jours mais gratuitement.
La différence de prix correspond, me dit-on, au fait que si Free se charge de l’opération cela sera immédiat, sinon c’est France Télécom et aucune garantie sur le délai ne peut m’être fournie.
Je me dis, à tord, que 90€ c’est une somme et qu’un sevrage de 15 jours devra être supportable et choisis donc d’attendre un peu plus longtemps.

- 08/03/2010 : Presqu’un mois sans nouvelle. J’estime avoir été assez patient. Je rappelle. Je m’aperçois assez rapidement qu’il n’y a pas de suivi client et je me vois forcé de raconter la même histoire de nouveau. Apparemment j’ai bien fait d’appeler, dixit mon interlocuteur. Il se charge de relancer France Télécom. Je n’ai toujours rien a payer, mais on me propose tout de même de le faire pour aller plus vite. J’hésite mais je garde (naïvement) confiance en Free. Je recevrai un SMS pour dès que ma ligne sera activée, tout est merveilleux, cela devrai prendre à peine 15 jours (encore?!)

- 07/04/2010 : Un mois plus tard : RIEN ! Je regarde le chenillard tourner en rond indéfiniment et je rappelle la hotline. « Bonjour , je voudrai avoir des nouvelles quant à l’avancer des « travaux » sur ma ligne. » Bon bien sûr je rêve, il n’y a toujours pas de suivi client ou plutôt si, il y en a bien un, mais j’ai l’impression qu’il n’est disponible que si le client s’efforce de tout répéter avant car miraculeusement après avoir fini mon « histoire » l’opératrice me confirme tous mes dires. Je ne comprends pas vraiment mais je reste calme.
Elle contacte un responsable technique qui l’informe que ma ligne a été ouverte sur un numéro qui ne m’appartenait pas. C’est pas vrai ! Alors ça pour une info ! Il faut refaire une inscription… Je ne vous cache pas que là j’ai légèrement péter les plombs. Je me suis vu tel Bill Murray dans Un jour sans fin.
Mais le comble c’est que maintenant je n’ai plus le choix, je dois payer ! Le tarif est passé a 62€ (aucune explication). La gratuité a apparemment été refusée et mon dossier était donc en attente. En attente de rien, mais en attente.
Lorsque je demande pourquoi personne ne m’a contacté j’ai le droit à un magnifique « Il n’est pas indiqué dans votre dossier que vous avez demandé à être rappelé ».
Donc voilà, j’ai donné mon autorisation pour être facturé pour les « travaux » sur ma ligne et je dois attendre encore 15 jours.

En résumé ce qu’on entends un peu partout est vrai : Free tant que ça marche, c’est la meilleure offre, sinon, « Bonne chance ! »

Il s’agit du cas où les options d’une liste à choix multiples d’un formulaire, sont trop longues pour rentrer dans la taille de cet élément select lorsqu’on a fixé sa taille en CSS. Dans un navigateur moderne, quand on visualise les choix disponibles, la taille de la liste est adaptée (la taille de l’élément parent select n’est pas modifiée). Dans ce cher IE, la liste garde la même taille que le select et on ne voit donc pas la totalité des options, n’ayant que les n premiers caractères affichés.

Les images valant mieux qu’un long discours, en voici deux pour illustrent ce problème. Ici, j’ai fixé la largeur à 300px :

Avec Firefox, Safari, Chrome, Opéra… :

Avec Internet Explorer toutes versions confondues :

Comme on peut le voir, avec IE, si les contenus des options sont long, ils sont tronqués, ce qui n’est pas très pratique.
Pour corriger ce problème un petit javascript qui ne sera executé que sous Internet Explorer.
Le principe est le suivant : On recherche tous les champs select (on peut être plus précis sur le sélecteur si besoin). On passe la largeur en auto le temps de récupérer la largeur nécessaire pour un affichage correct. Lors de l’ouverture de la liste, on applique cette largeur.
Pour ne pas modifier la mise en page, j’ai choisi de passer la liste en positionnement absolu lorsque sa taille est modifiée. C’est un choix qui pourrait avoir des conséquence sur votre mise en page. A vous de modifier ou de proposer une meilleure solution.

P.S : C’est à base de Mootools, mais adaptable à d’autres frameworks si besoin.

if(Browser.Engine.trident){
function adjustWidth(el,m){
el.setStyle('width',m+'px');
el.setStyle('position','absolute');
}
function reinitWidth(el,s,p){
el.setStyle('width',s);
el.setStyle('position',p);
}
$$('form select').each(function(cb){
var initsize = cb.getStyle('width'),initposition = cb.getStyle('position'),maxsize = 0;
cb.setStyle('width','auto');
maxsize=cb.offsetWidth;
cb.setStyle('width',initsize);
if (maxsize > initsize.substring(0,initsize.length-2)) {
cb.addEvent('mousedown',function(e){adjustWidth(cb,maxsize);});
window.document.addEvent('click', function(e) {if(e.target != cb) reinitWidth(cb,initsize,initposition);});
cb.addEvent('change',function(e){reinitWidth(cb,initsize,initposition);});
}
});
}

Syntaxe

Deux méthodes existent, pour lier un label au champ correspondant, la relation peut être explicite ou implicite.

Relation explicite :

L’étiquette est définie par l’attribut for dans label et identifiée grâce à l’attribut id du champ de formulaire ciblé.

<label for="nom">Nom </label>
<input id="nom" name="firstname" type="text" />

Relation implicite :

Il s’agit d’imbriquer le champ dans la balise label, il n’est donc plus nécessaire de renseigner les attributs for de label et id du champ.

<label>
Nom
<input name="firstname" type="text" />
</label>

Ces deux méthodes sont détaillés dans la documentation du W3C

Accessibilité

Cependant la solution des labels implicites, bien qu’étant parfaitement valide, n’est plus admise car elle n’est pas reconnue par tous les dispositifs d’accessibilité, elle est d’ailleurs proscrite par les normes d’accessibilité WCAG2.0

Voilà, il n’y a donc en fait qu’une seule solution, la relation explicite, et l’autre, bien que fonctionnant, ne doit jamais être utilisée.

Ce problème vient de d’un bug lors de la génération des packs localisés et d’une variable manquante dans le fichier versions.php

La solution est assez simple, il suffit d’éditer ce fichier (wp-includes/version.php) et d’ajouter à la fin la ligne :
$wp_local_package = ‘fr_FR’;

J’ai donc cherché un script simple à mettre en place et très modulable et comme je n’ai pas trouvé quelque chose qui correspondait exactement à mes besoins, j’ai décidé de créer mon propre script.

Avant tout, je suis contient que le fait de devoir créer des éléments supplémentaires juste pour satisfaire un besoin de mise en page est une technique à proscrire car cela n’a aucun sens. Tout devrait pouvoir se faire directement dans le CSS. Oui mais voilà, le CSS 3 et sa gestion native des bords arrondis (-moz-border-radius et -webkit-border-radius pour Firefox et Safari) est loin d’être implanté sur tous les navigateurs et nous sommes, malheureusement, dans l’obligation de ruser.

Ce que je voulais :

• Les balises ne servant qu’à la mise en page et n’ayant aucune portée sémantique sont générées en javascript.
• Un javascript non obstrusif, une mise en page non dégadée si le javascipt n’est pas activé / installé. Dans ce cas là, les coins restent simplement droits.
• Utilisation des images pour les coins pour un meilleur rendu et une plus grande modularité.
• Un script léger, syntaxe de l’appel simple mais paramétrable.
• Entièrement personnalisable via CSS.
• Conserve le DOM et génère du XHTML et du CSS valide.
• Rapide !

Pour commencer, voici une démo du script en action et une deuxième avec un bouton pour lancer le script.

Le script s’appuie sur le framework Javascript Mootools.

Documentation

class corners

Arguments

element : L’élément sur lequel vous voulez les coins arrondis
options : un objet, voir ci-dessous

Options

elementType : Le type des élément générés (défaut: div)
className : préfixe des classes des élément générés (défaut: corner)

Utilisation

L’élément modifié va être entouré par huit éléments permettant d’appliquer des styles CSS spécifiques sur chacun d’entre eux et correspondent aux cotés et aux coins répartis comme ceci (avec le préfixe par défaut, « corner ») :

• cornerT : Le bord supérieur
• cornerB : Le bord inférieur
• cornerR : Le bord droit
• cornerL : Le bord gauche
• cornerBL : Le coin inférieur gauche
• cornerBR : Le coin inférieur droit
• cornerTL : Le coin supérieur gauche
• cornerTR : Le coin supérieur droit

Ainsi, il ne reste plus qu’à appliquer les règles CSS adéquates pour ajouter les éléments de décoration voulus (coins arrondis, ombres, etc…)

Deux versions du script :

• non compressé (4143 octets)
• compressé avec YUI Compressor (1615 octets)

Allez plus loin

Je suis conscient que ce script peut alourdir les pages et donc ralentir leur chargement alors que l’on pourrait directement écrire ces balises dans la page sans passer par javascript. Mais ce sont les limitations de CSS 2 et les multiples incompatibilités des navigateurs qui nous forcent à insérer des balises inutiles et n’ayant aucun sens sémantiquement parlant. Ce javascript, ne touche pas à la structure du document et offre un rendu quasi similaire lorsqu’il est non activé.

En résumé, je ne suis pas entièrement convaincu de la pertinence et de l’utilité de ce script en terme de performance et d’optimisation mais son utilisation simple et efficace me semble toutefois interessante. On pourrait même trouver des applications diverses autres que les coins arrondis comme par exemple les ombres, dégradés complexes etc…

Voici quelques exemples utiles à utiliser sur vos sites.
Attention toutefois, car la moindre erreur de syntaxe provoquera une erreur interne sur le serveur et rendra votre site indisponible. Pensez donc à toujours garder une copie de sauvegarde permettant de revenir en arrière.

Création du fichier :

Il suffit de créer un fichier avec n’importe quel éditeur de texte et de le nommer .htaccess, sans extension. Sous Windows, il est impossible de créer un fichier .htaccess. Si vous avez des difficultés, vous pouvez utiliser un autre explorateur de fichier comme, par exemple, un logiciel de transfert FTP du type Filezilla

Ensuite, il faudra mettre ce fichier à la racine d’un répertoire pour que les règles qu’il contient s’appliquent à tous les sous-répertoires.

Créer une page d’erreur personnalisée

Bien souvent, on néglige ces pages par manque de temps ou d’intérêt. Elles sont pourtant très importantes car elles permettent aux visiteurs de rester sur le site. On peut alors, par exemple, choisir de le réorienter par le biais d’un plan de site.

Dans le fichier .htaccess il suffit d’inscrire ces lignes

ErrorDocument 401 /error/401.php
ErrorDocument 403 /error/403.php
ErrorDocument 404 /error/404.php
ErrorDocument 500 /error/500.php

Comment faire pour configurer le fuseau horaire sur votre serveur

SetEnv TZ Europe/Paris

Bloquer des adresses IP

Permet d’empêcher certaines adresses IP d’accéder à la totalité de votre site ou un répertoire.

allow from all
deny from 145.186.14.122
deny from 124.15

Quand quelqu’un essaiera d’accéder à votre site à partir de l’IP interdite, il verra un message d’erreur 403 « accès interdit ».

Redirections permanentes

Très utilisées pour la SEO, les redirections permanentes 301 pour les mauvais ou anciens liens déplacés ou supprimés.

Redirect 301 /mapage.html http://www.monsite.com/manouvellepage.html

Redirections de domaine

Pour rediriger chacune des pages d’un domaine vers la même page sur un autre domaine.

RewriteCond %{HTTP_HOST} ^www\.mon-site\.com [NC]
RewriteRule ^(.*)$ http://www.mon-site.fr/$1 [QSA,R=301]

E-mail de l’administrateur du serveur

Utiliser ce code, pour spécifier l’adresse e-mail par défaut de l’administrateur du serveur.

ServerSignature EMail
SetEnv SERVER_ADMIN monadresse@monsite.com

Protéger ses images

Utile pour empêcher qu’une personne ne fasse un lien direct de son site pour afficher des images hébergées sur votre propre serveur. Bien souvent aucune autorisation n’est demandée et cela pose donc des problèmes de droits, sans compter qu’il utilise la bande passante de votre serveur.
Le code suivant peut empêcher cela.

Options +FollowSymlinks
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?monsite\.com/ [nc]
RewriteRule .*\.(gif|jpg|png)$ http://www.monsite.com/images/images-de-substitution.jpg [nc]

Rendre tout un site indisponible pour maintenance

Il est intéressant de pouvoir à tout moment basculer un site en maintenance et être le seul à pouvoir naviguer sur celui-ci.

RewriteEngine on
RewriteRule maintenance\.html - [L]
RewriteCond %{REMOTE_ADDR} !82.288.56.587
RewriteRule .* /maintenance.html [L]

Empêcher le listage des répertoires

Habituellement, si votre site ne dispose pas d’une page d’index par défaut tous les fichiers de ce répertoire sont accessibles aux visiteurs. Pour éviter cela utilisez le code suivant.

Options All -Indexes

Page par défaut

Vous pouvez définir la page par défaut d’un répertoire comme vous le souhaitez. Par exemple, dans ce code, la page par défaut est contact.html au lieu de index.html

DirectoryIndex contact.html

Protéger vos répertoires et fichiers

Vous pouvez créer une demande d’authentification pour l’accès à certains fichiers et répertoires. Voici deux exemples de protection par mot de passe, un pour un fichier et l’autre pour un répertoire. Le fichier .htpasswd est un fichier texte devant contenir sur chacune des ses lignes un nom d’utilisateur suivi de deux points (:), puis du mot de passe crypté (solution recommandée) ou en clair. Pour crypter le mot de passe, Apache fournit un outil, l’utilitaire htpasswd accessible dans le sous-répertoire bin d’Apache. Il est également recommandé de placer ce fichier en dehors de l’arborescence du site.

# Protéger un  fichier

AuthType Basic
AuthName "Accès restreint"
AuthUserFile /home/path/.htpasswd
Require valid-user

# Protéger un répertoire
AuthType basic
AuthName "Accès restreint"
AuthUserFile /home/path/.htpasswd
AuthGroupFile /dev/null
Require valid-user

Masquer ou afficher les erreurs php

Par défaut, le valeur du paramètre PHP « display_errors » est « on ». La plupart du temps ces messages d’erreurs contiennent des informations sensibles qu’il est préférable de masquer sur un site en production. Pour masquer les erreurs, ajouter simplement :

php_flag display_errors off

Pour Conclure

Ce petit fichier est extrêmement pratique et puissant. Le nombre d’applications possibles est important. Ainsi, j’éditerai ce billet régulièrement pour y ajouter des exemples utiles. N’hésitez donc pas à proposer les vôtres.

Très attendu, celle-ci permet en effet de téléphoner via le réseau Edge/3G, et surtout vous pourrez enfin téléphoner normalement sans être obligé d’utiliser le casque comme avec les versions précédentes.

Interface de Siphon

Le but est donc de pouvoir utiliser un compte SIP comme, par exemple, un compte Freephonie, (disponible pour tous les abonnés Free) pour téléphoner en illimités vers les fixes de 70 destinations et bénéficier de tarifs attractifs vers les autres destinations et les mobiles. Et ça, de n’importe où, de chez vous via le wifi ou dans la rue via Edge/3G.

A première vue, cette bêta semble beaucoup plus réactive et la qualité d’écoute a largement été améliorée.

Paramètres de Siphon

Vous devez avoir un Iphone jailbraké avec, au minimum, le firmware 2.1 d’Apple.

Vous pouvez télécharger gratuitement Siphon via Cydia, en ajoutant le repository de BigBoss (http://apt.bigboss.us.com/repofiles/cydia).

Attention cependant car certains opérateurs brident voire interdisent l’usage des services SIP
Il semble donc préférable de se renseigner avant de subir d’éventuels sanctions !

Garder un fichier lisible est, selon moi, indispensable pour maintenir son application à jour, la modifier, la corriger et cela d’autant plus lorsqu’on travaille en équipe.

Une des solutions est de garder une version non compressée mais cela sous-entend de jongler sans cesse entre plusieurs versions, ce qui n’est définitivement pas pratique.

Combine

La solution qui me semble la plus intéressante est la classe PHP Combine, simple à utiliser, fiable, gérant la combinaison, la compression, la mise en cache et les dates d’expiration.

Tout d’abord, Combine concatène tous vos fichiers javascript et/ou css et les sert comme un gros fichier. Cela dans le but de réduire le nombre de requêtes au serveur.

Il gère également la compression en détectant si votre navigateur supporte la compression gzip, si oui, il gzip les données et renvoie la version compressée. En général, ceci permet de réduire considérablement la taille du fichier.

Si vous avez créé un répertoire cache, il va stocker la version gzip générée de vos données. Ainsi pour les futures demandes, il récupére simplement la version mise en cache zippé au lieu de générer le contenu de l’archive gzip à la volée. Ceci permet de réduire la charge du serveur.

Enfin, il vérifie les changements effectués. En effet, la date, l’heure et la taille du fichier mis en cache est rapidement vérifiée et, si il y a un changement, il sera automatiquement régénéré. Il gère donc parfaitement les en-têtes ce qui permet de mettre ces fichiers à jour et d’être certain que chacun des visiteurs du site se verra servir la même version du fichier.

Mise en place

L’utilisation est très simple.

Vous devez d’abord télécharger et configurer le script combine.php.

Par défaut, ce script regarde dans les répertoires racines javascript et css de votre site Web, mais si vous utilisez des répertoires différents, vous pouvez changer ces valeurs en haut de combine.php.
Transférer le fichier combine.php à la racine de votre site Web.

Deuxièmement, vous devez créer un répertoire « cache » accessible en écriture. Encore une fois, par défaut, ce script va chercher dans le répertoire racine du site Web, mais vous pouvez modifier cette valeur dans combine.php.

Enfin, il vous faut créer ou modifier un fichier .htaccess. Si vous n’avez pas de .htaccess vous pouvez le créer à la racine de votre site Web et ajouter les lignes suivantes.
Si vous avez déjà un .htaccess vous pouvez simplement ajouter les lignes suivantes dans le fichier :

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^js/(.*\.js) /combine.php?type=javascript&files=$1

Pour finir, dans vos pages remplacez tous vos appels javascript de la forme :

<script src="js/mootools-1.2-core.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>

par :

<script src="js/mootools-1.2-core.js,mootools-1.2-more.js" type="text/javascript"></script>

Idem pour le css, remplacer :

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/layout.css" rel="stylesheet" type="text/css" media="screen" />

par :

<link href="css/reset.css,layout.css" rel="stylesheet" type="text/css" media="screen" />

Et voilà ! Plutôt simple et terriblement efficace.
Par contre, un petit désavantage, si vous avez l’habitude d’utiliser Firebug pour débugger, forcement, le numéro de ligne indiqué pour les propriétés css, par exemple, ne correspond à rien dans votre fichier local, puisque tous les fichiers css sont combinés.
Je pense que l’installation de cette solution doit donc intervenir en fin de production, juste avant livraison.

Autres solutions

Il existe une autre classe qui semble assez similaire, Minify!, elle permet en plus de la gestion du cache et de la compression, de supprimer les espaces blancs et les commentaires.

Si vous avez plus d’infos sur Minify ou sur d’autres solutions, n’hésitez pas !

La propriété raccourcie background est très utile. Elle permet de définir en une ligne toutes les propriétés d’arrière-plan d’un élément (background-color, background-image, background-repeat, background-attachment, et background-position)

Un peu d’ordre !

Est-ce que l’ordre dans lequel on place les valeurs de cette propriété a une importance ?
Normalement non. Mais, des navigateurs obsolètes ou pointilleux, peuvent mal interpréter ces valeurs si elles ne respectent pas l’ordre indiqué par le W3C, soit :

background:color image repeat attachment position;

On peut cependant s’attarder sur la propriété background-position qui accepte deux valeurs et que l’on voit écrit un peu dans tous les sens. Une valeur correspond à la position horizontale et l’autre à la position verticale. Je les appellerai respectivement X et Y dans la suite de l’article.

Le W3C indique :

« If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position. »

Que l’on pourrait traduire par : Si au moins une valeur n’est pas un mot-clé, alors la première valeur représente la position horizontale et le deuxième représente la position verticale.
Les mots-clé étant (left, top, right, bottom et center).

Le bon ordre est donc « X Y », valeur horizontale puis verticale, même si, dans le cas d’utilisation de mots-clé, l’ordre n’a finalement pas d’importance.

Cependant il me semble assez logique de toujours garder le même ordre quelque soit les valeurs utilisés, sinon on risque fortement de ce mélanger les pinceaux. D’accord, peut être pas sur le coup, mais en revenant des mois plus tard ou bien si une autre personne doit modifier votre feuille de style…

Pour conclure voici quelques exemples de propriétés background aux valeurs correctement ordonnées :

background:#000 url(image.gif) no-repeat;
background:#ff0000 url(image.gif) no-repeat left top;
background:transparent url(image.gif) no-repeat fixed 10px 5px;
background:url(image.gif) no-repeat scroll 1% 50%;
background:#DDD url(image.gif) no-repeat 2em .2em;
background:#CCC url(image.gif) repeat-x left 20%;
background:url(image.gif) repeat-y right 0;
background:#000;