geek space web solutions

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

Monday, 02 August 2010 15:15
There are no translations available.

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;

}


 

Add comment


Security code
Refresh

Sections


Last articles

position:absolute with ie6 d... utf8 : substr ou mb_substr... Effet Noir et blanc ou Nivea... Lien web dans une applicatio... Module Fade Rotator pour Joo... Lancer une application au dé... Se connecter à un serveur dé... Écouter l'événement SOUND_CO... Qu'est-ce que Stage3D ?... ExpressJS Server...

Sondages

Do you think HTML5 can completely replace Flash ?
 
Would you be interested in an online XML editor ?
 

Paypal

paypal

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