Bonjour à tous,

Je suis amené à développer un site associatif en Arabe avec le CMS Joomla.

Ayant à l'esprit de mettre utf-8 et RtL dans mon code, j'avais la mauvaise surprise de voir la barre de déroulement verticale de la page passée à gauche dans IE... Bon, Microsoft, on reste droitier même si l'on écrit de droite à gauche... Le problème ne se pose même pas dans FF...

J'ai pensé que la question est normale puisque j'ai pu changer les couleurs de cette barre, la faire disparaître, mais pour lui changer la place... ça me reste impossible....

Enfin, cette question qui peut paraître anodine ne l'est pas vraiment, puisque des templates dépendent de la présence de cette barre à droite (c'est mon cas aussi) et l'on peut oser développer des sites pour les gauchers (avec LtR)

Enfin, on m'a indiqué des sites RtL avec la barre à droite ce qui m'encourage à trouver une solution non bricolée...

Par exemple, le site de "Aljazeera" : www.aljazeera.net
et un forum informatique : www.swalif.net/softs/

En fait l'adresse du notre serveur développement CMS Joomla est :
http://cms.targamat.com (il est intéressant de le voir sous IE et FF pour comprendre le problème et voir les limitations qu'impliquent le déplacement de la barre)...

Le code :


<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_styleswitcher.php");
$iso = split( '=', _ISO );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//En" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ar" dir="rtl" unicode-bidi:bidi-override>
<head>
<?php
if ( $my->id ) {
	initEditor();
}
mosShowHead();


// ***************************************************
$menu_type = "suckerfish";	// suckerfish  | module
$menu_name = "mainmenu";	// mainmenu by default, can be any Joomla menu name
$default_width = "thin";		// wide | thin | fluid
$default_font = "default";         // smaller | default | larger
$default_color = "red";           // red | blue | green | orange
$default_contrast = "light";	// light | med | dark
$show_access = "true";            // true | false
$show_menu = "true";             // true | false
$show_pathway = "false";        // true | false

// *************************************************

if ($menu_type != "module") {
	require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_suckerfish.php");
}
require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_styleloader.php");


// *************************************************
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<?php echo $mosConfig_live_site;?>/index.php?option=com_rss&amp;feed=RSS2.0&amp;no_html=1" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/<?php echo $contraststyle; ?>.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/<?php echo $colorstyle; ?>.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/suckerfish.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />
</head>
<body class="<?php echo $colorstyle; ?> <?php echo $widthstyle; ?> <?php echo $fontstyle; ?>">
	<div class="wrapper">
		<div id="outer-border">
			<div id="top-head">
				<a href="<?php echo $mosConfig_live_site;?>" title=""><span id="logo">&nbsp;</span></a>
				<div id="color-insert"></div>
				<div id="access-bar">
				  <?php if($show_access=="true") { ?>
					<div id="access">
	  				<div id="buttons">
							<a href="<?php echo $thisurl; ?>widthstyle=w-fluid" title="&#1593;&#1585;&#1590; &#1575;&#1604;&#1588;&#1575;&#1588;&#1577;" class="fluid"><span class="button">&nbsp;</span></a>
	  					<a href="<?php echo $thisurl; ?>widthstyle=w-wide" title="&#1579;&#1604;&#1579;&#1610; &#1593;&#1585;&#1590; &#1575;&#1604;&#1588;&#1575;&#1588;&#1577;" class="wide"><span class="button">&nbsp;</span></a>
	  					<a href="<?php echo $thisurl; ?>widthstyle=w-thin" title="&#1606;&#1589;&#1601; &#1593;&#1585;&#1590; &#1575;&#1604;&#1588;&#1575;&#1588;&#1577;" class="thin"><span class="button">&nbsp;</span></a>
							<span class="spacer">&nbsp;</span>
	  					<a href="<?php echo $thisurl; ?>fontstyle=f-larger" title="&#1578;&#1603;&#1576;&#1610;&#1585; &#1581;&#1580;&#1605; &#1575;&#1604;&#1582;&#1591;" class="large"><span class="button">&nbsp;</span></a>
	  					<a href="<?php echo $thisurl; ?>fontstyle=f-default" title="&#1581;&#1580;&#1605; &#1575;&#1604;&#1582;&#1591; &#1575;&#1604;&#1602;&#1610;&#1575;&#1587;&#1610;" class="default"><span class="button">&nbsp;</span></a>
	  					<a href="<?php echo $thisurl; ?>fontstyle=f-smaller" title="&#1578;&#1589;&#1594;&#1610;&#1585; &#1581;&#1580;&#1605; &#1575;&#1604;&#1582;&#1591;" class="small"><span class="button">&nbsp;</span></a>
							<span class="spacer">&nbsp;</span>
							<a href="<?php echo $thisurl; ?>colorstyle=orange" title="&#1576;&#1585;&#1578;&#1602;&#1575;&#1604;&#1610;" class="orange"><span class="button">&nbsp;</span></a>
							<a href="<?php echo $thisurl; ?>colorstyle=green" title="&#1571;&#1582;&#1590;&#1585;" class="green"><span class="button">&nbsp;</span></a>
							<a href="<?php echo $thisurl; ?>colorstyle=blue" title="&#1571;&#1586;&#1585;&#1602;" class="blue"><span class="button">&nbsp;</span></a>
							<a href="<?php echo $thisurl; ?>colorstyle=red" title="&#1571;&#1581;&#1605;&#1585;" class="red"><span class="button">&nbsp;</span></a>
							<span class="spacer">&nbsp;</span>
							<a href="<?php echo $thisurl; ?>contraststyle=co-dark" title="&#1571;&#1604;&#1608;&#1575;&#1606; &#1603;&#1575;&#1605;&#1583;&#1577;" class="dark"><span class="button">&nbsp;</span></a>
							<a href="<?php echo $thisurl; ?>contraststyle=co-med" title="&#1571;&#1604;&#1608;&#1575;&#1606; &#1605;&#1578;&#1608;&#1587;&#1591;&#1577;" class="med"><span class="button">&nbsp;</span></a>
							<a href="<?php echo $thisurl; ?>contraststyle=co-light" title="&#1571;&#1604;&#1608;&#1575;&#1606; &#1586;&#1575;&#1607;&#1610;&#1577;" class="light"><span class="button">&nbsp;</span></a>
	  				</div>
					</div>
					<?php } ?>
				</div>
				<div id="top-mod">
					<?php mosLoadModules('top', -1); ?>
				</div>
			</div>
			<?php if($show_menu=="true") { ?>
			<div id="horiz-menu">
				<div id="nav">
        	<?php if ($menu_type == "module") mosLoadModules('toolbar'); ?>
        	<?php if ($menu_type == "suckerfish") mosShowListMenu($menu_name);	?>
  			</div>
			</div>
			<div class="clr"></div>
		  <?php } ?>
			<table class="outer" cellspacing="0">
				<tr valign="top">
				  <?php if (mosCountModules('left')) { ?>
					<td class="left">
					 <div class="sidepad">
					   <?php mosLoadModules('left', -2); ?>
					 </div>
					</td>
					<?php } ?>
					<td class="middle">
					  <?php if ($show_pathway == "true") { ?>
					  <div class="path-padding">
              <?php mosPathway(); ?>
            </div>
            <?php } ?> 
            <?php if (mosCountModules('user1') || mosCountModules('user2') || mosCountModules('user3')) { ?>
            <div class="smallpad">
  					  <table class="nopad" cellspacing="0">
  					    <tr valign="top">
  					      <?php if (mosCountModules('user1')) { ?>
  					      <td>
  					         <?php mosLoadModules('user1', -2); ?>
  					      </td>
  					      <?php } ?> 
  					      <?php if (mosCountModules('user2')) { ?>
  					      <td>
  					       <?php mosLoadModules('user2', -2); ?>
  					      </td>
  					      <?php } ?> 
  					      <?php if (mosCountModules('user3')) { ?>
  					      <td>
  					       <?php mosLoadModules('user3', -2); ?>
  					      </td>
  					      <?php } ?> 
  					    </tr>
  					  </table>
					  </div>
					  <?php } ?> 
					  <?php if (mosCountModules('user4') || mosCountModules('user5') || mosCountModules('user6')) { ?>
						<div class="midbox">
							<table class="nopad" cellspacing="0">
						    <tr valign="top">
						      <?php if (mosCountModules('user4')) { ?>
						      <td>
						        <?php mosLoadModules('user4', -2); ?>
						      </td>
						      <?php } ?>
						      <?php if (mosCountModules('user5')) { ?>
						      <td>
						        <?php mosLoadModules('user5', -2); ?>
						      </td>
						      <?php } ?>
						      <?php if (mosCountModules('user6')) { ?>
						      <td>
						        <?php mosLoadModules('user6', -2); ?>
						      </td>
						      <?php } ?>
						    </tr>
						  </table>
						</div>
						<?php } ?> 
						<div class="padding">
								<?php mosMainbody(); ?>
						</div>
						<?php if (mosCountModules('user7') || mosCountModules('user8') || mosCountModules('user9')) { ?>
						<div class="botbox">
							<table class="nopad" cellspacing="0">
						    <tr valign="top">
						      <?php if (mosCountModules('user7')) { ?>
						      <td>
						        <?php mosLoadModules('user7', -2); ?>
						      </td>
						      <?php } ?>
						      <?php if (mosCountModules('user8')) { ?>
						      <td>
						        <?php mosLoadModules('user8', -2); ?>
						      </td>
						      <?php } ?>
						      <?php if (mosCountModules('user9')) { ?>
						      <td>
						        <?php mosLoadModules('user9', -2); ?>
						      </td>
						      <?php } ?>
						    </tr>
						  </table>
						</div>
						<?php } ?> 
					</td>
					<?php if (mosCountModules('right')) { ?>
					<td class="right">
					 <div class="sidepad">
					   <?php mosLoadModules('right', -2); ?>
					 </div>
					</td>
					<?php } ?>
				</tr>
			</table>
			<div id="bot-footer">
				<?php mosLoadModules('footer', -1); ?>
			</div>
		</div><div id="bot-rocket">
		
			<a> TargamaT 2005-2006 © </a>
		</div>
	</div>

<?php mosLoadModules( 'debug', -1 );?>
</body>
</html>





J'espère que j'ai bien posé le problème et vous ai donné l'apetit pour le résoudre...


Merci d'avance
Modifié par aratype (04 Nov 2006 - 18:18)
Modérateur
Bonjour aratype et bienvenue, Smiley smile

Peux-tu, s'il te plaît, éditer ton message pour baliser le code comme il se doit, en l'encadrant des balises obtenues avec le bouton code, en vue de le rendre plus lisible ? Merci. Smiley cligne

Par ailleurs, ne mets pas le code PHP car cela rend la lecture difficile. N'indique que le code XHTML obtenu après interprétation, cela devrait suffire. Smiley ravi

Je déplace dans le salon général, plus adapté à ta demande.
Modifié par koala64 (04 Nov 2006 - 13:00)
Bonjour et merci pour ton mot...

J'ai fait la mise en page selon les normes...

La question est, à mon avis, difficile et c'est pour ça j'ai mis toutes les infos étant donné que je suis novice sur ce sujet...
Je crois qu'il ne sera pas faisable d'inverser la barre puisqu'elle est définie comme présente à la position inverse de l'origine de l'écriture utilisée et pas à droite et c'est tout...

Dans ce cas, la seule chose sera d'inverser les tables une à une en rtl et ainsi tout le monde sera contenet.....


A vous
Modifié par aratype (05 Nov 2006 - 09:44)
Modérateur
bonjour,

essai par le biais du css de cette façon (avec doctype):

html {direction:ltr;} 
body  {
direction:rtl;
unicode-bidi:bidi-override;
}


sans doctype , essayer de ne cibler que le conteneur principal par exemple :
<edit> ah zut , j'oublié que IE en mode quirk (ou sans dtd valide ") etait "handicapé du css" , il y a toutes les chances que ça ne fonctionne pas vraiment. Une soluce plutot "sale" et sujette a de drole de reaction d'un navigateur a l'autre , c'est de mettre la page dans une iframe entre body et body d'une page tout a fait normale , ajouté un js qui recupere la hauteur de la page ansi incluse et redimensionné l'iframe pour repporter le scroll sur la page qui contient l'iframe. bref , vive les standards ! </>

#principal  {
direction:rtl;
unicode-bidi:bidi-override;
}

(comme je te l'avais suggeré pour la version doctype, .. le temps de trouvé le topic qui a eté deplacé )

je ne connais pas le cms que tu utilise , d'ailleurs je n'en connait encore aucun vraiment.

++

une page en lien ou juste le code html et css associer aurait surement etait plus clair pour tout le monde.


<re-edit> 2 pages pour tester les direction de textes :
http://www.editions-eyrolles.com/css2/tests/vfm/vfm13.htm
et
http://www.editions-eyrolles.com/css2/tests/vfm/vfm14.htm
++
Modifié par gcyrillus (06 Nov 2006 - 01:17)