CSS tricks
Tags : CSS

Attribut Position

Le tag position est l'un des attributs CSS le plus important et le plus puissant pour vous construire une interface complexe en CSS.

Position dispose de 4 états :

  • static
  • relative
  • absolute
  • fixed

Static

La boîte est placée selon le flux normal du site. Les propriétés 'left', 'top', 'right' et 'bottom' ne s'appliquent pas.

Relative

La boîte est placée selon le flux normal, exactement comme la position static, à la différence près que les propriétés 'left', 'top', 'right' et 'bottom' s'appliquent désormais au conteneur. Il est donc possible de déplacer la boite sans influer sur les boîtes autour.

Absolute

La boîte est placée hors du flux normal du site. Ainsi elle n'intervient pas dans le placement des différents éléments  qui composent le site. Dès lors, son positionnement va être déterminé par les propriétés 'left', 'top', 'right' et 'bottom'.

Fixed

La boîte se comporte comme la position absolute, à ceci près que celle-ci ne bougera pas lors du scroll. La boîte reste toujours à la même place. Idéal pour les logos ou menus. Problème ! IE6 ne supporte pas cette propriété.

Soyez le premier à commenter.
Erreur JS - Identificateur, chaîne ou nombre attendu - IE7

Ceux qui utilisent des Framework JS (comme jQuery) assez souvent ont déjà du tomber sur ce genre d'erreurs détectées seulement sur IE7 lors de l'utilisation d'un Framework JS comme jQuery (à noter que l'erreur ne vient pas de jQuery) :

Error Message: "Identificateur, chaîne ou nombre attendu"

L'erreur est très simple, assurez vous de ne pas avoir laissé une petite virgule à la fin d'une déclaration.

Script Buggé :

<!-- Script permettant de changer l'opacité d'un élément -->

function changeOpac(opacEnd,id);
    opacEnd = opacEnd/100;
        jQuery("#"+id).animate({
            opacity: opacEnd,
         }, 500 );
}

Script Corrigé :

<!-- Script permettant de changer l'opacité d'un élément -->

function changeOpac(opacEnd,id);
    opacEnd = opacEnd/100;
        jQuery("#"+id).animate({
            opacity: opacEnd
         }, 500 );
}

Vous avez remarqué qu'il n'y a que la virgule après le paramètre d'opacité qui a été supprimé. La virgule n'est nécessaire que lorsque vous fournissez plusieurs paramètres. Cela peut paraitre plutôt évident, mais je vous assure qu'on n'y pense pas forcement tout de suite (on s'arrache vite les cheveux) !

 

Afficher les commentaires (10)
Gestion sauvegarde sur serveur Ubuntu
Tags : Ubuntu

Sauvegarde automatique serveurs

Ce petit script va vous permettre de sauvegarder sous la forme d'une archive un répertoire et son contenu, ainsi que qu'une ou plusieurs DB et de transférer le tout vers un autre serveur par FTP.

#!/bin/bash

#Création de l'archive dans /home/user/SAVE/ qui va contenir tout ce qui se trouve dans /var/www/

tar -czvf /home/user/SAVE/www_$(date '+%d').tar.gz /var/www/*

#Sauvegarde de la base 'database'

mysqldump --host=localhost --user=userSQL --password=passwordSQL  database > /home/user/SAVE/database_$(date '+%d').sql

#Sauvegarde de la base 'database_2'

mysqldump --host=localhost --user=userSQL --password=passwordSQL  database_2 > /home/user/SAVE/database_2_$(date '+%d').sql

#On se connecte par FTP au serveur de sauvegarde, puis on copie le répertoire et tout ce qui se trouve en local dans le répertoire /home/user/SAVE/ dans le répertoire /rep_sur_serveur_distant du serveur de sauvegarde.
#L'option -x sert à exclure des fichiers ou dossiers.
#L'option -R signifie que l'on copie dans le sens Local vers Distant

lftp ftp://userFTP:passwordFTP@adress_serveur_FTP -e "mirror -e -R -x fichier_1_a_exclure -x fichier_2_a_exclure /home/user/SAVE/ /rep_sur_serveur_distant ; quit"

Soyez le premier à commenter.
Limiter le nombre de connexions HTTP par IP - Module Apache2
Tags : Ubuntu - Apache2

Limiter le nombre de connexions par IP peut être  très utile si votre serveur est saturé par des personnes utilisant des gestionnaires de Download à outrance.

Apache ne permet pas de limiter les connexions apr IP de base. Il existe par contre un module qui marche plutôt bien : mod_limitipconn.

Installation

Récupération des sources pour Apache2

~ wget http://dominia.org/djao/limit/mod_limitipconn-0.23.tar.bz2

~ tar xjvf mod_limitipconn-0.23.tar.bz2

~ cd mod_limitipconn-0.23

~ vi Makefile

Trouver la ligne suivante (dans le fichier Makefile):

APXS=apxs

Changer en

APXS=/usr/bin/apxs2 (le chemin de votre apxs peut être différent)

Sauvegarder

Echap:wq

Configuration

Vérifier que la ligne locate ExtendedStatus soit bien décommenté dans le fichier de configuration d'apache.

~ sudo vi /etc/apache2/apache2.conf


Ajouter dans chaque VirtualHost, ou le principal (va affecter tous les VirtualHost) les lignes suivantes :

~ sudo vi /etc/apache2/sites-enabled/000-default

MaxConnPerIP 3
# On spécifie que la limitation du nombre de connexions HTTP par IP ne s'applique pas aux images
NoIPLimit image/*

MaxConnPerIP 1
# A l'inverse, la limitation ne s'applique qu'aux fichiers vidéos et audio
OnlyIPLimit audio/mpeg video

Sauvegarder :

echap:wq

~ sudo /etc/init.d/apache restart

Soyez le premier à commenter.
IE8 et min-width et max-width
Tags : CSS - IE8

Après IE7, arrive IE8, normal, surtout en ce moment où la guerre des navigateurs fais rage !

Pourtant, et on le sait depuis longtemps, une nouvelle version d'IE apporte certe des corrections, mais aussi son lot de bizarrerie, Microsoft oblige.

Ici je veux juste vous faire part d'un comportement que j'ai remarqué avec la nouvelle version du navigateur préféré de Bilou.

Constat

Sur IE8 donc, si vous codez comme beaucoup avec le Doctype en XHTML, vous pourrez avoir quelques soucis de CSS. Notamment avec la balise min-width et max-width. Ces balises ne seront pas prisent en compte par le navigateur.

Doctype XHTML transitional :

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Ces 2 balises fonctionnent sur IE8, elles étaient d'ailleurs déjà présentes sur IE7. Oui mais voilà, aujourd'hui, si vous êtes en XHTML, aucune chance pour que cela fonctionne sous IE8 ... pas de bol, mais vous devrez passer votre Doctype à HTML5 pour faire fonctionner ces petites balises.

Solution

Déclarer le Doctype de la page en HTML5 afin que les balise min-width et max-width fonctionnent sur IE8.

Doctype HTML 5 :

<!DOCTYPE html>

Afficher les commentaires (2)
Classe Tween AS3 - Bug
Tags : AS3 - Bug - Actionscript - Flash - Tween

Alors, je sais pas pour vous, mais moi je suis tombé sur un bug dans Flash assez pénible !

Il concerne la classe Tween, vous savez, celle là même qui vous permet de faire de belles animations fluides et jolies ^^

Bref, si vous n'avez pas rencontré ce bug, vous avez eut bien de la chance, car je peux vous assurer que c'est à se taper la tête contre ce foutue bureau !!

Description du bug

Vous avez déclarez une ou plusieurs animations utilisant Tween. Le test de votre animation dans Flash fonctionne à merveille, les animations s'enchainent sans aucun problème.

Oui mais voilà, une fois exporté en SWF sur votre serveur et intégré à votre site, là, vous déchantez rapidement ! Les animations ne s'enchaînent plus, elles s'arrêtent sans criez garde (gardeeee !). Bref, c'est le chaos !!

Alors je vous l'accorde, ce bug n'apparait tout le temps, il est alléatoire, au bon vouloir de Môsieur AS !! Grrrrr rien de pire donoc pour trouver la nature du problème.

Code buggé

import fl.transitions.*;
import fl.transitions.easing.*;
var T:Tween = new Tween(texte1_txt, "alpha", Strong.easeOut, 0, 1, 3,true);
var T2:Tween = new Tween(texte2_txt, "alpha", Strong.easeOut, 0, 1, 3,true);
var T3:Tween = new Tween(texte3_txt, "alpha", Strong.easeOut, 0, 1, 3,true);

Astuce

L'astuce pour corriger ce problème est de ne pas déclarer directemetn l'objet Tween.

Code corrigé

import fl.transitions.*;
import fl.transitions.easing.*;

var tab:Array = new Array();
tab[0] = new Tween(texte1_txt, "alpha", Strong.easeOut, 0, 1, 3,true);
tab[1] = new Tween(texte2_txt, "alpha", Strong.easeOut, 0, 1, 3,true);
tab[2] = new Tween(texte3_txt, "alpha", Strong.easeOut, 0, 1, 3,true);

Et voilà, toutes les animations Tweens fonctionnent correctement ! Elle est pas belle la vie ??

Soyez le premier à commenter.

Baptiste Doré Spiderneo's design | Tous droits réservés

PHP/MySQL, CSS, JavaScript/DOM/AJAX , SEO, XSL

Authentification