Positionner un affichage

kahilesgi -  
bonjour
voila mon script m affiche deux elements
en effet lorsqu il m affiche le premier (lign1)il me cache le second(ligne2)
et lorsqu il m affiche le second(ligne2)il me cache le premier(ligne1)
comment faire pour afficher les deux elements aux meme endroits
meme ligne!
faut il faire appel aux feuille de styles?
comment positionner mes deux elements!
merci 

<html>

<head>

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />

<script src="prototype.js"></script>

<script language="JavaScript">

function affichage(eltAafficher, eltAcacher)

{

var eltAfficher = document.getElementById(eltAafficher);

eltAfficher.style.visibility="visible";

var eltAcacher = document.getElementById(eltAcacher);

eltAcacher.style.visibility="hidden";

}

</script>

</head>

<body>





<div id="courant" class="focus" ; position:absolute; visibility:hidden;">

aaaaa

</div>

<div id="titre" class="cache" ; position:absolute; visibility:hidden;">

bbbbbbbb

</div>

<input type="button" value="compte1" onclick="affichage('courant', 'titre');">

<input type="button" value="compte2" onclick="affichage('titre','courant');">

<body>

</html>
Configuration: Windows XP
Firefox 2.0.0.5

8 réponses

  1.  Gihef Contributeur
    Je ne sais pas ce qu'est ton module.
    Peut-être t'est-il possible de le positionner en “relative” ?
    Sinon, essaye de les insérer dans une <div> positionnée en “relative” :
      <div style="position:relative;">
    <span id="courant" class="focus" >
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </span>
    <span id="titre" class="cache" >
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    </span>
  </div>            <-- et ici
    <br /><br />
    <form action="">
      <input type="button" value="compte1" onclick="affichage('courant', 'titre');">
      <input type="button" value="compte2" onclick="affichage('titre','courant');">
    </form>
  </div>            <-- ou ici
    0
    1. kahilesgi Auteur
      ui ca marche mais le probleme c est que ca n aparai pas a l interieur de mon module
      en fait
      quand c est : position absolu ca marche et le module n aparai pas!
      et quand c est position relative le module aparait mais l afichage marche pas ca s afiche a deux endroit differents
      0
      1. Gihef Contributeur
        C'est normal, je te propose d'utiliser des élément en ligne et toi tu mes les transforme en bloc (-;
        “display: block;” !

        Essaye :
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
  <title>Proposition pour hidden superposé</title>
  <link rel="stylesheet" media="screen" type="text/css" title="Design" href="#" />
  <style type="text/css">
  .focus, .cache {
    position : absolute;
    margin : .5em;
    }
  .focus {
    /*display: block;*/
    visibility: hidden;
    color: blue;
    font-size: 18px;
    }
  .cache {
    visibility: hidden;
    color: blue;
    font-size: 18px;
    }
  </style>
  <script type="text/javascript" src="prototype.js"></script>
  <script type="text/javascript" language="JavaScript">
  function affichage(eltAafficher, eltAcacher)
  {
  var eltAfficher = document.getElementById(eltAafficher);
  eltAfficher.style.visibility="visible";
  var eltAcacher = document.getElementById(eltAcacher);
  eltAcacher.style.visibility="hidden";
  }
  </script>
</head>

<body>
  <span id="courant" class="focus" >
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </span>
  <span id="titre" class="cache" >
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  </span>
  <br /><br />
  <form action="">
    <input type="button" value="compte1" onclick="affichage('courant', 'titre');">
    <input type="button" value="compte2" onclick="affichage('titre','courant');">
  </form>
</body>
</html>
        0
        1. kahilesgi Auteur
          jai remplacer les div par les span ca na rien changer

          jai inserer une fonction qui apel ma class,pour qu elle tienne compte des modification de ma class 

          function affichage(eltAafficher, eltAcacher)
{

  var eltAfficher = document.getElementById(eltAafficher);

eltAfficher.className="focus";

var eltcacher = document.getElementById(eltAcacher);

eltAfficher.className="cache";
}


          et voici mon fichier css avec mes class 

          .focus{
display: block;
visibility: hidden;
color: blue;
font-size: 18px;
}

.cache{




height: 0px;
display: none;
visibility: hidden;
color: blue;
font-size: 18px;
}


          je veux faire en sorte que je puisse parametrer dans ma feuille de style le positionnement de l affichage
          que mes deux elements aaaaaa et bbbb soit aficher dans le meme emplacement!
          0
          2. Gihef Contributeur
            Bon alors, fais les 1res modif. que je te proposais : remplace les “div” par des “span”
              <span id="courant" class="focus">
  aaaaa
  </span>
  <span id="titre" class="cache">
  bbbbbbbb
  </span>
            0
            1. kahilesgi Auteur
              en fait c est assez compliquer je travailler avec un module sur un portail
              dans un module jai

              mes div : 
              <div id="courant" class="focus" >
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="titre" class="cache" >
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>


              et dans l autre module jai mon script et mes boutons
              mais mon script ne gere pas la classe
              quelle fonction je dois lui ajouter pour qu il tienne compte de la class
              comme ca je pourrai changer la class dans mes feuilles de styles et lui atribuer une hauteur 0px par exemple 

              function affichage(eltAafficher, eltAcacher)
{
 var eltAfficher = document.getElementById(eltAafficher);
eltAfficher.style.visibility="visible";
var eltcacher = document.getElementById(eltAcacher);
eltcacher.style.visibility="hidden";
}

</script>
</head>


<body>

<input type="button" value="compte1" onclick="affichage('courant', 'titre');">

<input type="button" value="compte2" onclick="affichage('titre', 'courant');">
</body>
              0
              1. Gihef Contributeur
                Vide le cache, recharge la page et montre-nous ton code modifié.
                0
                1. Gihef Contributeur
                  Bonjour,

                  Pas besoin de syles pour placer des éléments côte à côte.
                  Il suffit d'utiliser des éléments “en ligne” plutôt que des “blocs”.

                  Dans l'exemple que tu donnes, des <div> ont été utilisées. Or, elles se placent, par défaut, les unes en dessous des autres.
                  Essaye ça :
                    <span id="courant" class="focus">
  aaaaa
  </span>
  <span id="titre" class="cache">
  bbbbbbbb
  </span>
                  Tu remarqueras au passage que j'ai supprimé les “ ; position:absolute; visibility:hidden;"” qui, utilisés comme ça, ne servent qu'à générer des erreurs (-;

                  Cependant, si tu as besoin des ces <div> ou si tu tiens à utiliser des styles, tu peux t'y prendre, par exemple, comme ça :
                    <div id="courant" class="focus" style="display:inline;">
  aaaaa
  </div>
  <div id="titre" class="cache" style="display:inline;">
  bbbbbbbb
  </div>
  <p>&nbsp;</p>
                  Tu pourrais aussi utiliser du “float”.
                  0
                  1. kahilesgi Auteur
                    toujours le meme probleme ca m affiche l un en dessous de lautre!
                    0

                Discussions similaires

                league of legend impossible d'initialiser le dispositif d'affichage
                pascontent

                5 réponses
                Bug d'affichage sur ma Freebox Revolution
                BourrinOman83

                4 réponses
                Ma Freebox n'affiche plus l'heure
                Thiloulou

                5 réponses
                Facebook ne s'affiche plus correctement.
                Twibault

                36 réponses
                Impossible d'afficher le dispositif d'affichage LOL
                Rico

                6 réponses