geek space web solutions

div absolute ou fixed et sens de lecture de droite à gauche

Lundi, 02 Août 2010 15:15
Comme souvent, on rencontre de nombreux problèmes d'interprétation selon les navigateurs. Cette fois il s'agit d'un problème de positionnement d'un div absolu sur une page traduite en arabe c'est-à-dire sur une page où le sens de lecture est de droite à gauche.

Pour traduire un site en arabe j'ai utilisé le super composant Joomfish qui se charge de définir le sens de lecture de la page de droite à gauche.
Pour cela le composant définit la balise html de la manière suivante (regardez le dir="rtl") :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar-dz" lang="ar-dz" dir="rtl" >

La position fixe (position:fixed;) :
Comme dans un positionnement absolu, le contenu concerné est retiré totalement du flux. Mais il est cette fois positionné uniquement par rapport aux limites de la zone de visualisation, autrement dit la fenêtre du navigateur. Le défilement de la page n'a aucun effet sur un contenu en position fixe.

Dans le cas d'une lecture de droite à gauche, sur ie6 et ie7 (pas de problèmes sur ie8 et Firefox), mon div absolute pourtant bien positionné autrement, se décale vers la droite comme si il ne prenait pas en compte mon margin-left:-50%;

Sous IE6 (le div se décale vers la droite)
Capture problème div absolute sous IE6

Sous IE7 (le div se décale vers la droite)
Capture problème div absolute sous IE7

Sous IE8 (le div se positionne correctement)
Capture problème div absolute sous IE8

En mode normal "ltr", le positionnement du div absolu se fait par rapport à la gauche grâce aux left:50%; et margin-left:-50%.
Lorsqu'on passe en mode "rtl", le div absolu se positionne par rapport au côté droit, il faut donc définir dans le style right:50%; et margin-right:-50%.

Le code ci-dessous corrige le problème :
#menu_absolute {      


background-image: url('../images/bandeau_menu.jpg');

background-position: top;

background-repeat: repeat-x;


color: #FFFFFF;

text-align:center;

top:0px;

height:80px;

width:100%;

float:left;


left:50%;

right:50%;

margin-left:-50%;

margin-right:-50%;


position:fixed;

z-index:110;

}


 

Ajouter un Commentaire


Code de sécurité
Rafraîchir

Sections

Éditeur de fichier XML en ligne


"XML Manager" est un éditeur sécurisé permettant d'administrer en ligne un fichier XML.
Il fournit des fonctions avancées de recadrage et de redimensionnement des images...

Sondages

Pensez-vous que le HTML5 puisse complètement remplacer Flash ?
 
Seriez-vous intéressé par un éditeur d'XML en ligne ?
 

Paypal

paypal

Code du plugin Joomla AutoSEO 1.2 par www.geek-space.fr