Menu déroulant recouvert par le corps de texte

[Fuvola]

Bonjour, et bonne année!
Voilà, j'ai enfin terminé mon site (adresse çi-dessous), et j'aurais encore une petite question:
Comment faire pour que le menu horizontal déroulant ne soit pas recouvert par le corps de texte, lorsqu'on le déroule?
(Pour l'instant, j'ai contourné le problème en mettant un bandeau au-dessous, que je trouve moche et superflu.)
Merci beaucoup d'avance!
Fuvola



Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Ymai]

Bonjour
Il me semble qu'en ajoutant une règle pour mettre très à l'avant plan tous les <ul> qui font partie d'un .menu, cela devrait logiquement le faire.

Code : Tout sélectionner

.menu ul {z-index: 99}

En tous les cas sous Firefox.


Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5

[Fuvola]

Bonjour Ymai, et merci pour la réponse,
Je viens d'essayer la solution indiquée, et cela marche très bien (y compris sous IE 6.0), à un petit détail près: lorsqu'on ouvre une page sous IE, tous les menus se présentent déroulés. Y a-t-il une solution à cela?
Merci encore, Fuvola


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Ymai]

tous les menus se présentent déroulés.

Et ça ne le faisait pas avant?
Je ne vois pas, a priori, le rapport entre le javascript du menu et une directive CSS. Il doit y avoir autre chose.
J'aurais tendance à incriminer un chamboulement non souhaité dans la feuille de style qui fait que les items du menu ne sont plus cachés par défaut.
Avez-vous simplement inséré le code CSS proposé entre deux directives existantes?
Je corrige donc ce que je proposais: modifiez

Code : Tout sélectionner

.menu ul {
  width: 133px;
  position: absolute;
  padding-left: 0px;
}

en

Code : Tout sélectionner

.menu ul {
  width: 133px;
  position: absolute;
  padding-left: 0px;
  z-index: 99
}

plutôt que d'ajouter une ligne séparée.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5

[Fuvola]

C'est ce que j'avais fait...pour plus de clarté, voici le code css:

Code : Tout sélectionner

#menu {
  display: inline;
}
.menu a {
  border: 1px solid #333333;
  text-align: center;
  background-color: #765d4d;
  display: block;
  width: 116px;
}
.menu ul {
  width: 116px;
  position: absolute;
  padding-left: 0px;
  z-index: 99;
}
.menu li ul {
  margin-left: 0px;
  visibility: collapse;
}
.menu li {
  display: block;
  float: left;
}

Ainsi que le script:

Code : Tout sélectionner

/*
Author   : bieler batiste
Company  : doSimple : http://www.dosimple.ch
send me a mail for more informations : faden@PASDEPOURRIELaltern.org - remove ( PASDEPOURRIEL )

Short javascript function to create and handle a CSS navigation menu

Copyright (C) 2004  Bieler Batiste

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
*/

// the timeout for the menu
var timeout = 1000;

// not very clean but simple
// the function can be run in the HTML for faster display
// window.onload=initMenu;

// creat timeout variables for list item
// it's for avoid some warning with IE
for( var i = 0; i < 100; i++ )
{
    eval("var timeoutli" + i + " = false;");
}

// this fonction apply the CSS style and the event
function initMenu()
{
    // a test to avoid some browser like IE4, Opera 6, and IE Mac
    if ( browser.isDOM1 
    && !( browser.isMac && browser.isIE ) 
    && !( browser.isOpera && browser.versionMajor < 7 )
    && !( browser.isIE && browser.versionMajor < 5 ) )
    {
        // get some element
        var menu = document.getElementById('menu'); // the root element
        var lis = menu.getElementsByTagName('li'); // all the li
        
        // change the class name of the menu, 
        // it's usefull for compatibility with old browser
        menu.className='menu';
        
        // i am searching for ul element in li element
        for ( var i=0; i<lis.length; i++ )
        {
            // is there a ul element ?
            if ( lis.item(i).getElementsByTagName('ul').length > 0 )
            {        
                // improve IE key navigation
                if ( browser.isIE )
                {
                    addAnEvent(lis.item(i),'keyup',show);
                }
                // link events to list item
                addAnEvent(lis.item(i),'mouseover',show);
                addAnEvent(lis.item(i),'mouseout',timeoutHide);
                addAnEvent(lis.item(i),'blur',timeoutHide);
                addAnEvent(lis.item(i),'focus',show);
                
                // add an id to list item
                lis.item(i).setAttribute( 'id', "li"+i );
            }
        }
    }
}

function addAnEvent( target, eventName, functionName )
{
    // apply the method to IE
    if ( browser.isIE )
    {
        //attachEvent dont work properly with this
        eval('target.on'+eventName+'=functionName');
    }
    // apply the method to DOM compliant browsers
    else
    {
        target.addEventListener( eventName , functionName , true ); // true is important for Opera7
    }
}
    
// hide the first ul element of the current element
function timeoutHide()
{
    // start the timeout
    eval( "timeout" + this.id + " = window.setTimeout('hideUlUnder( \"" + this.id + "\" )', " + timeout + " );");
}

// hide the ul elements under the element identified by id
function hideUlUnder( id )
{   
    document.getElementById(id).getElementsByTagName('ul')[0].style['visibility'] = 'hidden';
}

// show the first ul element found under this element
function show()
{
    // show the sub menu
    this.getElementsByTagName('ul')[0].style['visibility'] = 'visible';
    var currentNode=this;
    while(currentNode)
    {
            if( currentNode.nodeName=='LI')
            {
                currentNode.getElementsByTagName('a')[0].className = 'linkOver';
            }
            currentNode=currentNode.parentNode;
    }
    // clear the timeout
    eval ( "clearTimeout( timeout"+ this.id +");" );
    hideAllOthersUls( this );
}

// hide all ul on the same level of  this list item
function hideAllOthersUls( currentLi )
{
    var lis = currentLi.parentNode;
    for ( var i=0; i<lis.childNodes.length; i++ )
    {
        if ( lis.childNodes[i].nodeName=='LI' && lis.childNodes[i].id != currentLi.id )
        {
            hideUlUnderLi( lis.childNodes[i] );
        }
    }
}

// hide all the ul wich are in the li element
function hideUlUnderLi( li )
{
    var as = li.getElementsByTagName('a');
    for ( var i=0; i<as.length; i++ )
    {
        as.item(i).className="";
    }
    var uls = li.getElementsByTagName('ul');
    for ( var i=0; i<uls.length; i++ )
    {
        uls.item(i).style['visibility'] = 'hidden';
    }
} 

Cordialement, Fuvola

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Ymai]

Serait-il possible d'avoir une version mise à jour? Dans une version d'IE6 pour Linux , je ne vois rien d'anormal.
A moins que Javascript ait été désactivé? Mais alors, la présentation change complètement.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5

[Fuvola]

Rebonjour,
Voilà, j'ai mis le site à jour. A part cela, non, le javascript n'était pas désactivé, et l'affichage était correct sous IE avant que je ne modifie la feuille de style. A moins que cela ne soit ma version de IE qui est un peu bizarre?...

[j'ai modifié le message]

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Ymai]

Avec toutes mes excuses: vraiment débordé pour l'instant.
Mais je confirme avoir observé le phénomène avec IE6 sous Linux.
A mon sens, certainement un souci de Javascript. Bizarre, si rien n'y a été modifié...
Si quelqu'un d'autre pouvait jeter un oeil.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5

[Mongo Bob]

Comment faire pour que le menu horizontal déroulant ne soit pas recouvert par le corps de texte, lorsqu'on le déroule?

Moi, je vois le contraire : un menu qui recouvre le corps de texte (sous IE6-7).

Pour l'instant, j'ai contourné le problème en mettant un bandeau au-dessous, que je trouve moche et superflu.)

C'est pas pour être paresseux, mais la solution du bandeau est bonne. Il aère la page, et il suffit d'en trouver un qui soit pas moche, si on considère que celui-ci l'est. Auquel cas, si convaincue, il reste à lui donner plus de hauteur, 100 au lieu de 60px?...
Le vrai pb est bien le menu déroulant qui reste un menu déjà déroulé sous IE6 et 7.
Le javascript semble gérer le déroulage? Le js pose donc problème.On peut pas s'en passer?
http://www.tuto-fr.com/tutoriaux/menu-d ... page_4.php : c'est un menu sans js, vertical mais avec "display:inline" là où il faut... Compatible IE6-7. Va-t'il cacher le texte en-dessous? (Google/"menu déroulant css" donne pas mal de résultats).En tout cas, c'est une autre méthode.
Ca n'a peut-être rien à voir, mais je ne comprends pas cette règle :

Code : Tout sélectionner

.menu li ul {
  margin-left: 0px;
  visibility: collapse;
} 

Elle s'applique à <ul> ou à <li>? Pas très familier avec les abréviations des règles css, moi. J'ai vu que "collapse" revenait à "hidden" pour tout ce qui n'est pas tableau.

[Fuvola]

Bonjour Ymai, bonjour Mongo Bob,
Eh bien, c'est très bizarre, mais je viens de m'aperçevoir que ce que j'avais écrit:

Code : Tout sélectionner

.menu li ul {
  margin-left: 0px;
  visibility: hidden;
} 

s'était transformé tout seul en:

Code : Tout sélectionner

.menu li ul {
  margin-left: 0px;
  visibility: collapse;
}

J'ai donc retiré le "collapse", ce qui semble avoir résolu le problème (touchons du bois...)
A part cela, en ce qui concerne le bandeau, vous avez raison, car c'est encore plus moche sans!
Je n'ai pas le temps de m'occuper du menu déroulant que vous me proposez, mais j'ai noté la page en question et je m'en occuperai à la prochaine occasion.
Sinon, j'ai un autre problème, un peu plus urgent celui-là: j'ai mis une nouvelle page sur mon site, qui comporte un lecteur mp3, ou plutôt plusieurs. Le lecteur mp3 s'affiche correctement sous Firefox, mais sous IE il disparaît carrément au bas de la page. Lorsque je désactive la feuille css je ne trouve rien d'anormal, mais je n'arrive pas à résoudre le problème en modifiant les propriétés css.
Auriez-vous une idée?...voici le code:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
 xmlns="http://www.w3.org/1999/xhtml" lang="fr"><head><meta
 http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>Audio</title>
<meta
 content="flûte traversière, musique classique, flûtiste, concert, orgue, sonate, Flöte, Querflöte, Duett, Orgel, flute, flutist" /><meta
 content="follow" name="Robots" /><meta content="TRUE"
 name="MSSmartTagsPreventParsing" /><script src="dynMenu.js"
 type="text/javascript"></script><script src="browserdetect.js"
 type="text/javascript"></script><script src="jquery.js"
 type="text/javascript" charset="utf-8"></script><script
 src="jquery.wslide.js" type="text/javascript" charset="utf-8"></script><script
 type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#parent4").wslide({
width: 600,
height: 550,
autolink: false,
fade: true,
duration: 1000
});
});
</script><link title="menu" media="all" rel="stylesheet"
 href="menu3.css" type="text/css" /><script type="text/javascript"
 src="/framaplayer/framaplayer.js"></script></head><body>
<!-- les drapeaux --><div class="drapeaux" style=""><a href="index.html"><img
 style="border: 0px solid ; width: 28px; height: 21px;" alt="[Fr]"
 src="img/france.jpg" /></a><a href="indexde.html"><img
 style="border: 0px solid ; width: 28px; height: 21px;" alt="[De]"
 src="img/allemagne.jpg" /></a><a href="indexen.html"><img
 style="border: 0px solid ; width: 28px; height: 21px;" alt="[En]"
 src="img/angleterre.jpg" /></a></div><!-- l'en-tête --><div style=""
 id="en_tete"><h1>
flûtiste</h1>
</div><!-- les menus --><ul id="menu"><li><a href="index.html">Accueil</a></li>
<li><a href="2008.html">Agenda</a><ul>
<li><a href="2007.html">2007</a></li>
<li><a href="2008.html">2008</a></li>
<li><a href="2009.html">2009</a></li>
</ul></li><li><a href="photos.html">Images</a></li><li><a
 href="audio.html">Audio</a></li>
<li><a href="#menu3">Programmes</a><ul>
<li><a href="mathieu.html">Duo
flûte et orgue</a></li>
<li><a href="autres.html">Musique
de chambre</a></li></ul></li><li><a href="Presse.html">Presse</a></li><li><a
 href="2008.html">Liens</a><ul>
<li><a href="coinduflutiste.html">Le
coin du
flûtiste</a></li>
<li><a href="liens.html">Remerciements</a></li></ul></li><li>
<a href="2008.html">Me
contacter</a><ul>
<li><a href="guestbook.php">Livre
d'Or</a></li>
<li><a href="formulaire.php">Formulaire
de contact</a></li>
</ul></li></ul><script type="text/javascript">initMenu();
</script><!-- les bandeaux --><div style="" id="bandeau"></div><div
 id="container"><div id="image_1"><div id="menu4"><h2>Ecouter</h2><ul><li><a
 href="#parent4-1">Emile Bernard (1843-1902): Romance, Op.33</a>
</li><li><a href="#parent4-2">Cécile
Chaminade (1857-1944): Concertino pour flûte</a></li><li><a
 href="#parent4-3">Théodore Dubois (1837-1924): Suite sur des
poèmes
virgiliens</a></li>
<li><a href="#parent4-4">Alexandre Guilmant
(1837-1911): Berceuse</a></li><li><a href="#parent4-5">Johann Sebastian
Bach (1685-1750): Sonate
en Trio
n°6,
BWV 530</a></li><li><a href="#parent4-6">Johann
Sebastian
Bach (1685-1750): Aria de la Cantate
BWV 100</a></li>
</ul></div><ul id="parent4"><li><div class="magneto"><object
 type="application/x-shockwave-flash"
 data="dewplayer.swf?mp3=audio/bernardromance.mp3&bgcolor=9DC994"
 height="20" width="200"><param name="movie"
 value="dewplayer.swf?mp3=audio/bernardromance.mp3&bgcolor=9DC994" /></object><h5>Emile
Bernard:
Romance, Op.33</h5>
<span class="commentaires">Enregistrement:
Toulouse les Orgues 2008</span></div></li><li><div class="magneto"><object
 type="application/x-shockwave-flash"
 data="dewplayer.swf?mp3=audio/chaminadeconcertino.mp3&bgcolor=9DC994"
 height="20" width="200"><param name="movie"
 value="dewplayer.swf?mp3=audio/chaminadeconcertino.mp3&bgcolor=9DC994" /></object><h5>Cécile
Chaminade: Concertino pour flûte</h5>
<span class="commentaires">Enregistrement:
Toulouse les Orgues 2008</span></div>
</li><li><div class="magneto"><object
 type="application/x-shockwave-flash"
 data="dewplayer-multi.swf?mp3=audio/duboisdaphnis.mp3|audio/duboislethe.mp3|audio/duboistityre.mp3&bgcolor=9DC994"
 height="20" width="240"><param name="movie"
 value="dewplayer-multi.swf?mp3=audio/duboisdaphnis.mp3|audio/duboislethe.mp3|audio/duboistityre.mp3&bgcolor=9DC994" /></object><h5>Théodore
Dubois: Suite sur des poèmes virgiliens (Daphnis-Le Léthé-Tityre)</h5>
<span class="commentaires">Enregistrement:
Toulouse les Orgues 2008</span></div>
</li><li><div class="magneto"><object
 type="application/x-shockwave-flash"
 data="dewplayer.swf?mp3=audio/guilmantberceuse.mp3&bgcolor=9DC994"
 height="20" width="200"><param name="movie"
 value="dewplayer.swf?mp3=audio/guilmantberceuse.mp3&bgcolor=9DC994" /></object><h5>Alexandre
Guilmant: Berceuse</h5>
<span class="commentaires">Enregistrement:
Toulouse les Orgues 2008</span></div>
</li><li><div class="magneto"><object
 type="application/x-shockwave-flash"
 data="dewplayer-multi.swf?mp3=audio/bachsonate61.mp3|audio/bachsonate62.mp3&bgcolor=9DC994"
 height="20" width="240"><param name="movie"
 value="dewplayer-multi.swf?mp3=audio/bachsonate61.mp3|audio/bachsonate62.mp3&bgcolor=9DC994" /></object><h5>Johann
Sebastian Bach: Sonate en Trio n°6, BWV 530 (Allegro-Largo)</h5>
<span class="commentaires">Enregistrement: Orgue
historique de Cintegabelle, septembre 2006</span></div>
</li><li><div class="magneto"><object
 type="application/x-shockwave-flash"
 data="dewplayer.swf?mp3=audio/bachcantate100.mp3&bgcolor=9DC994"
 height="20" width="200"><param name="movie"
 value="dewplayer.swf?mp3=audio/bachcantate100.mp3&bgcolor=9DC994" /></object><h5>Johann
Sebastian Bach: Aria de la Cantate BWV 100</h5>
<span class="commentaires">Enregistrement: Orgue
historique de Cintegabelle, septembre 2006
</span></div></li></ul></div></div>
</body></html>

Merci d'avance si vous avez une idée, car j'ai fait des recherches sans résultat!

[edit] si vous avez besoin de voir la page "en vrai": dans l'adresse du site, remplacer "index" par "audio".

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Mongo Bob]

Bonjour (ça fait partie des bonnes résolutions de 2009)

Code:
.menu li ul {
margin-left: 0px;
visibility: collapse;
}

J'ai donc retiré le "collapse", ce qui semble avoir résolu le problème (touchons du bois...)

Tu ne l'as pas retiré, tu l'as remplacé :
actuellement, tu as ça :

Code : Tout sélectionner

.menu li ul {
  margin-left: 0px;
  visibility: hidden;
}

au lieu de

Code : Tout sélectionner

.menu li ul {
  margin-left: 0px;
  visibility: collapse;
}

or "hidden" ou "collapse", c'est kif-kif quand l'élément concerné n'est pas un tableau. Ca veut dire que l'élément <li> ou <ul> n'est pas affiché par un navigateur graphique, courant, quoi.
C'est d'ailleurs la raison pour laquelle je te demandais ce que signifiait ta règle ".menu li ul", pour voir si ça avait un rapport avec ton pb, or, pas eu de réponse...
Je crois que cette règle devrait signifier que les propriétés d'icelle s'appliquent à tous les éléments <ul> contenus dans un élément <li>, or, tu conviendras qu'il y a un grave problème, puisque ça n'arrive jamais : c'est <ul> qui doit contenir des et que des <li> (tout autre élément contenu dans <ul> est interdit).
J'en suis même sûr, je viens de vérifier dans le Meyer : ça s'appele un sélecteur de descendant, eh oui! Dans ta règle, <ul> descend de <li>
C'est pourquoi cette règle me questionne et que j'espérai que tu explorerais cette piste, qui pourrait n'avoir rien à voir avec ton problème d'affichage IE....

ce que j'avais écrit (...) s'était transformé tout seul

oui, oui, c'est un phénomène bien connu, tout à fait naturel...
pour les lecteurs mp3, j'y connais rien, désolé...

[Mongo Bob]

suite : tu as bien la validation css, donc, soit je me plante sur

Code : Tout sélectionner

.menu li ul

, soit c'est le validateur...
http://jigsaw.w3.org/css-validator/vali ... tac.com%2F

[Fuvola]

Excusez-moi d'avoir oublié de répondre à votre question...je ne suis pas l'inventeur de ce

.menu li ul

(il s'agissait d'un script tout fait, et j'avais déjà tenté de simplifier au maximum le css)
Cette règle semblait s'appliquer aux <ul>contenant des <li>, eux-mêmes contenus dans des <li>, le tout contenu dans un <ul> (très simple n'est-ce pas).
A part ça, lorsque je vais sur le lien que vous me donnez j'ai: "Aucune erreur trouvée"????...
Dommage, pour le lecteur mp3! l'ennui c'est que je ne sais pas si le problème vient du lecteur ou de mon code. Cherchons encore...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Mongo Bob]

A part ça, lorsque je vais sur le lien que vous me donnez j'ai: "Aucune erreur trouvée"????...

Tout à fait, c'est bien la remarque que je m'autorisai à énoncer, d'ailleurs... Raison pour laquelle j'établis que soit je me plantai, soit le validateur se planta...
Pour le mp3, c'est peut-être juste une question de positionnement ou de dimensions, comme pour n'importe quel élément, je vous promets d'y revenir, donc, chère amie...
(bon dieu, ça devient classe, ici! Va falloir s'adapter...)

[Mongo Bob]

Cette règle semblait s'appliquer aux <ul>contenant des <li>, eux-mêmes contenus dans des <li>, le tout contenu dans un <ul> (très simple n'est-ce pas).

Un menu avec sous-menu! Bon sang mais c'est bien sûr!

Sinon, j'ai un autre problème, un peu plus urgent celui-là: j'ai mis une nouvelle page sur mon site, qui comporte un lecteur mp3, ou plutôt plusieurs. Le lecteur mp3 s'affiche correctement sous Firefox, mais sous IE il disparaît carrément au bas de la page. Lorsque je désactive la feuille css je ne trouve rien d'anormal, mais je n'arrive pas à résoudre le problème en modifiant les propriétés css.

Sous FF, cette page mp3 est très bien conçue (et je pèse mes mots), design impeccable, félicitations.
Tu as utilisé Dewplayer de Alsacréations, je n'ai plus qu'à m'en inspirer pour mon site de blues!
http://www.alsacreations.fr/mp3-dewplayer.html


Pour le lecteur qui reste en bas sous IE, il faut quand même tenter de donner des largeurs aux blocs "#en_tete", "#menu", "#parent4" et "#menu4", qui soient logiques, en %, placés côte à côte (pour ceux qui sont en position flottante) la somme des largeurs ne devrait pas dépasser 100% ou moins, il faut tester aussi la largeur des blocs conteneurs "#bandeau", "#container" et "#image_1".
IE ne donne pas les mêmes valeurs aux marges et espacements, essayez de les mettre toutes à 0?
J'ai essayé de reproduire votre code et css chez moi, pour tester, aïe! J'obtiens pas du tout le même affichage (j'ai pas importé les objets, dewplayer etc...).

bon courage



PS : IE6 laisse le lecteur en bas, mais IE7 restitue tous les lecteurs à droite en colonne, ça se complique.