Maxime Millet

Centrer plusieurs blocs horizontalement quand on ne connait pas leur taille en CSS (responsive design)

09/02/2013 | Aucun commentaire |

Quel webmaster ne s'est pas amusé un jour où l'autre à essayer de centrer plusieurs blocs horizontalement ? A mon humble avis aucun ou du moins très peu ;-) .

Je vous propose aujourd'hui une solution responsive (qui s'adapte à la résolution des visiteurs)...

Bloc 1

Oh !

Un jolie bloc !!

Bloc 2

Ce bloc n'a pas de largeur définie.

Bloc 3

Le bloc 3


Ce sont ces blocs que je souhaite centrer. Très simple, il me suffit d'appliquer des marges automatiques à son conteneur (margin-left:auto; margin-right:auto;) ! Eh bien non, ce n'est pas possible. En effet, pour utiliser ces marges le conteneur doit avoir une taille définie, mais je ne connais pas la taille de mes blocs donc si j'applique ces marges le conteneur sera lui centré mais pas mes blocs.

La solution que je vous propose ci-dessous est d'utiliser display:inline-block sur vos blocs ce qui permet de les afficher sur la même ligne et de leur appliquer des styles habituellement réservés aux éléments de type inline.

Ainsi, plus besoin de flottante pour afficher des blocs sur la même ligne. Pour centrer vos blocs il suffit de centrer le texte dans le conteneur en utilisant text-align:center; . Si le conteneur est plus petit que la taille totale des blocs alors une nouvelle ligne sera créée et les blocs seront également centrés, cette solution s'adapte donc à la résolution du visiteur, c'est du responsive design.

Bloc 1

Oh !

Un jolie bloc !!

Bloc 2

Ce bloc n'a pas de largeur définie.

Bloc 3

Le bloc 3


Pour centrer les blocs verticalement entre eux, il suffit d'utiliser vertcial-align:middle; qui est une propriété réservée aux éléments inline et du coup fonctionnant sur les inline-block.

Le code CSS

#conteneur
{
/* Placez le style du conteneur ici, seul al ligne ci-dessous est nescessaire. */
text-align:center;
}
.bloc
{
display:inline-block; /* Pour que la magie opere */
text-align:left; /* Pour retablir l'alignement du texte apres c'est à vous de voir */
vertical-align:middle; /* Pour centrer verticalement nos blocs */
}

Le code HTML

<div id="conteneur">
<div class="bloc">
<h3>Bloc 1</h3>
<p>Oh !</p>
<p>Un jolie bloc !!</p>
</div>
<div class="bloc">
<h3>Bloc 2</h3>
<p>Ce bloc n'a pas de largeur définie.</p>
<p>Pourtant, il se centre bien !</p>
</div>
<div class="bloc">
<h3>Bloc 3</h3>
<p>Le bloc 3</p>
</div>
</div>

J'ai utilisé des div mais ça marche très bien avec des listes aussi ! N'hésitez pas à jeter un coup d'oeil sur le page d'exemples, c'est parfois plus simple à comprendre quand c'est visuel.

Changer l'apparence des boutons radios uniquement avec du CSS

15/12/2012 | Commentaires fermés |

Exemple de boutons radiosAvec le CSS, c'est cool, on peut tout customiser... eh bien non, c'est faux ! du moins pour certains élements on ne peut pas directement modifier leur apparence sans passer par la ruse. C'est le cas des boutons radios (ou inputs radios) et après avoir fais plusieurs recherches sur comment les personnaliser je dois vous avouer que je n'ai rien trouvé de bien concret c'est pour quoi j'ai décidé de partager avec vous la solution que j'ai trouvé et qui n'utilise pas de scripts tiers.

Démo disponible ici

Pour commencer, ma solution n'est surement pas compatible avec les anciens navigateurs et tant pis, il faut plutôt inviter l'utilisateur à se mettre à jour plutôt que de faire des hacks spécialement pour eux. Cependant elle ne devrait pas rendre vos boutons radios infonctionnels.

Le code HTML

Pour l'HTML je n'ai qu'une chose à vous dire, comme je l'ai dis en intro il n'est pas possible de changer l'apparence de ces inputs directement, vous devrez obligatoirement leur donner un label même si celui-ci reste vide.

<input type="radio" name="genre" value="homme" id="genre_femme">
<label for="genre_femme">Une femme</label>
<input type="radio" name="genre" value="femme" id="genre_homme">
<label for="genre_homme">Un homme</label>
<input type="radio" name="genre" value="dieu" id="genre_dieu" disabled>
<label for="genre_dieu">Un dieu</label>
<input type="radio" name="genre" value="robot" id="genre_robot">
<label for="genre_robot">Un robot</label>

Maintenant que nous avons notre code html, nous allons attaquer le CSS dont je vais vous proposer deux façons de faire, la première où vos boutons seront des images et la seconde où vos boutons seront 100% CSS.

Le CSS

Parmis les nouveautés du css3 se trouvent les selecteurs :not() et :checked qui permettent d'intergargir sur l'élement en fonction de son état. Ces propriétés étant nouvelles, elles ne se pas reconnues par les anciens navigateurs donc notre customisation ne fonctionnera pas. Nous devons tout d'abord désactiver le style par défaut de l'input.

input[type="radio"]:not(:checked),input[type="radio"]:checked{display:none;}

Il faut maintenant associer le input avec le label en utilisant input[type="radio"]+label .

Des boutons radios avec des images

Il vous faut au moins 3 images pour: l'état décoché, l'état coché, l'état désactivé et une quatrième éventuellement pour rendre plus design qui correspond à l'état hover.

input[type="radio"] + label /* quand le bouton est décoché */
{
display:block;
background-image:url(decoche.png);
background-repeat:no-repeat;
min-width:16px;
padding-left:20px;
min-height:16px;
}
    Ce code est tout con, voici deux petites explications :
  • min-width et min-height doivent correspondre à la taille de votre image.
  • padding-left permet de décaler le texte vers la gauche afin que notre image ne soit pas recouverte, il faut mettre la taille de la longueur de votre image plus une marge.
input[type="radio"] + label:hover /* faculfatif mais plus sympa */
{
background-image:url(hover.png);
}
input[type="radio"]:checked + label /* quand le bouton est coché */
{
background-image:url(coche.png);
}
input[type="radio"]:disabled + label /* quand le bouton est désactivé */
{
background-image:url(media/images/boutons-radios/desactive.png);}

Remarque : on aurait aussi pu utiliser des sprites afin d'avoir qu'un seul fichier.

Des boutons radios 100% CSS

Le principe est le même sauf qu'on va maintenant utiliser le selecteur :before.

input[type="radio"]+label
{
display:block;
margin:2px;/* c'est plus aéré avec une marge !*/
}
input[type="radio"]+label:before
{
content:"";/* pour que le bouton soit visible*/
display:inline-block;
width:1em;
height:1em;
background-color:#000;
border:2px solid #C60;
border-radius:55px;
}
input[type="radio"]+label:hover:before /*Bouton hover*/
{
background-color:#F60;
}
input[type="radio"]:checked+label:before/*Bouton coché*/
{
background-color:#FC0;
}
input[type="radio"]:disabled+label:before/*Bouton désactivé*/
{
background-color:#999;
border:2px solid #333;
}

Voilà ! On aurait pu faire mieux parce que là c'est pas très joli avec les nouvelles propriétés du css3 comme les dégradés, les transitions, les ombres...

Rediriger tout un site vers le sous domaine www

09/08/2012 | |

Rediriger une page dont l'url ne contient pas le sous domaine www est une question souvent posée sur les forums de webmastering, c'est souvent histoire d'avoir des liens plus esthétique et pour éviter des problèmes de duplicate-content.

La solution à placer à la racine du site dans un fichier htaccess (Apache) :

RewriteEngine on
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^(.*) http://www.example.com/$1 [QSA,L,R=301]

Et la solution pour Nginx, il faut placer le code suivant en haut du vHost (pas encore testé).

server {
server_name exemple.com;
rewrite ^(.*) http://www.exemple.com$1 permanent;
}

Et voilà !

Javascript compteur de caractères textarea (minimum et maximum)

10/05/2012 | Commentaires fermés |

Il est souvent utile de limiter une textarea en lui indiquant un nombre maximum de caractères à ne pas dépasser soit par une fonction javascript, soit grâce à maxlength="nombre" pour une description par exemple. Cependant, il est aussi utile de donner un minimum de caractères car si votre description fait 20 caractères, je doute qu'elle soit très précise mais je ne voudrais pas douter de vous... ;)

C'est ce que fait le script ci-dessous, il donne un minimum de caractères ainsi qu'un maximum pour que le formulaire soit validé.

var total=0;
var mini=150;
var maxi=600;
function actionlimite(){
if(total < mini || total > maxi)
{
alert("Votre description utilise "+total+" caractères alors qu'elle doit en faire entre "+mini+" et "+maxi+" caractères !");
return false;
}
else{
return true;
}
}
function limite(textarea){
total = textarea.value.length;
}

Ici les limites du nombre de caractères est > 150 et < 600, elles sont définies par les variables mini et maxi.

<form name="description" onSubmit="return actionlimite();">
<textarea name="description" onKeyUp="limite(this);" ></textarea>
<input name="valider" type="submit" value="Envoyer">
</form>

Nous allons d'abords nous intéresser à la ligne 2. Comme vous pouvez le comprendre l'attribut onKeyUp va appeler la fonction limite() à chaque fois qu'une touche est relachée et donc mettre à jour la variable total. Cette fonction prend en paramètre this qui est le pointeur sur la ressource donc ici notre textarea.

Dans la ligne 1, l'attribut onSubmit va lancer la fonction actionlimite() avant de valider le formulaire. Si la fonction retourne true alors c'est que le nombre de caractères est suffisant, le formulaire est dans ce cas envoyé, sinon, elle retourne false et le formulaire n'est pas envoyé.

Bonus : un compteur

Comme je vous ai déjà donné le début de mon code je vais aussi vous donner le compteur :D.

Pour cela il vous suffit de rajouter la ligne ci-dessous dans la fonction limite() :

document.getElementById('compteur').innerHTML = total+" Caractère(s)";

Et n'oubliez pas de d'ajouter <span id="compteur"></span> dans votre page ;).

Démonstration du code

Obtenir son Relevé d'identité opérateur (code RIO)

14/01/2012 | |

Avec l'arrivé de Free sur le marché de la télécommunication mobile en France beaucoup souhaitent changer d'opérateur mais garder leur numéro. Cela est possible (parfois les hotlines disent que non mais elles mentent), c'est ce qu'on appelle la portabilité du numéro.

Pour obtenir votre code RIO c'est très simple, si vous êtes un professionnel celui-ci doit être présent sur votre facture et sur votre compte en ligne.

Si vous êtes un particulier la démarche n'est pas plus compliquée, vous devez téléphoner au 3179 depuis votre portable et le code vous sera transmis par voix puis par sms. De plus vous n'avez rien à payer à ce niveau car l'appel est gratuit.

Sources : Wikipédia inside ;)

Désactiver le referer de firefox

20/01/2011 | |

Firefox

Suite à un plantage de mon profil de firefox j'ai désactivé le referer. Le referer permettant de voir de quelle page vous venez, je trouve ça un peu de l'espionnage même si c'est très utile pour les dev, je m'en sers moi aussi.

Pour le désactiver rendez vous dans about:config et cherchez la ligne network.http.sendRefererHeader. Sa valeur est normalement à 2, passez la à 0 et c'est terminé !

Générer un NIC Handle avec une fonction php

13/01/2011 | Commentaires fermés |

Qu'est-ce que le NicHandle ?

Le NicHandle est un code généralement utilisé chez les registars pour identifier un client. Il est composé de la première lettre du nom et du prénom de l'utilisateur suivie d'une suite de 4 ou 5 chiffres et enfin votre marque.

Cet identifiant est pour moi plus sûr qu'un pseudonyme (pour un site professionnel ou commercial) même si ce n'est pas la sécurité parfaite ;-).

Le code

J'ai récemment dû mettre en place un système d'identification pour gérer un "caddie virtuel" et j'ai opté pour cette solution. La fonction a besoin de mysql pour chercher si le NIC existe déjà. Si vous supprimez la requête n'oubliez pas de faire pareil avec la boucle while qui ne servira plus à rien.

function Gnich($nom,$prenom)
{
while($verif != 1)
{
$id = rand(10000, 99999);
$n = substr($n, 0, count($nom));
$p = substr($p, 0, count($prenom));
$id = "$n$p$id";
$cherche=mysql_query("SELECT * FROM users WHERE nic = '$id'");
if(mysql_num_rows($cherche) != 1)
{
$verif = 1;
}
$id = $id."-MARQUE";
}
return $id;

[bash] Faire un backup avec dl.free.fr

26/12/2010 | Commentaires fermés |

Serveur rackLa sauvegarde pour un site web ou un projet est chose importante. Aujourd'hui nous disposons de technologies comme le RAID mais quand on est sur un hébergement mutualisé celles-ci sont parfois inexistantes et un backup maison est toujours mieux que celui de notre hébergeur (enfin c'est mon avis j'en ai déjà fait les frais).

Une solution intéressante

Connaissez-vous le système dl.free.fr ? C'est la plateforme de stockage de Free, elle offre un stockage illimité et la taille maximale d'un fichier est de 10 Go (en FTP sinon c'est 1 Go depuis l'interface http). Les fichiers sont converservés pendant 30 jours après le dernier téléchargement. Il n'y a pas besoin de s'inscrire ou d'être chez free (mais il me semble qu'il faut quand même avoir une IP française) une adresse email valide suffit. Depuis maintenant 2 ans j'utilise la solution suivante : Une fois par jour une crontab génère une archive de mon dossier www où se trouve mon site et l'envoie sur l'ftp de free puis je reçois un mail de Free pour confirmer la réception du fichier. J'ai maintenant 30 jours pour utiliser cette sauvegarde.8-)

Le script Bash

Pour le script nous avons besoin de lftp et tar, ce dernier est installé par défaut (du moins sous debian) quant à l'autre il est possible que vous ayez besoin de l'installer comme cela :

apt-get install lftp
Il ne vous reste plus qu'à choisir votre mot de passe qui doit faire 20 caractères maximum.

#!/bin/bash
echo "##########BackUp##########"
d=$(date '+%d-%m-%Y')
tar zcvf /home/bu-$USER-$d.tar.gz /home/www
lftp VOTRE_ADRESSE_MAIL:VOTRE_MOT_DE_PASSE@dl.free.fr -e "put -O / /home/bu-$USER-$d.tar.gz; quit"
rm /home/bu-$USER-$d.tar.gz
echo "##########BackUp##########"

N'oubliez pas de le rendre exécutable et de faire la crontab !


Il est possible d'améliorer le backup en prenant des clouds chez OVH et d'envoyer les sauvegardes dessus.