comment faire proprement une alternation de div ?

10 janv. 2008, 09:52

Bonjour,

j'ai un petit problème au niveau de la mise en page.

J'ai un conteneur <div> qui doit contenir 2 élements différents selon le passage de la souris.
Ces élements sont eux même 2 conteneur. J'utilise l'attribut css display pour afficher ou non les conteneurs.

j'ai donc ce code :

Code : Tout sélectionner

<div CLASS="rubriqueMenu" onmouseover="afficherSousRubrique('sb');" onmouseout="cacherSousRubrique('sb')">
  <!-- 1er element, lorsque la souris n'est pas dessus -->
  <div ID="sb1">
    <IMG SRC="mage_fond.jpg" CLASS="fondMenu"><P CLASS="titreRubrique">TITRE RUBRIQUE</P>
  </div>

  <!-- 2e element, lorsque la souris passe dessus -->
  <div ID="sb2" STYLE="display:none;" >
    <IMG SRC="image_fond.jpg" CLASS="fondMenu">
    <div STYLE="position:relative;margin-top:-120px;width:100%;height:120px;">
      <A HREF="..." 		CLASS="sousRubriqueMenu" STYLE="width:32%;height:98%;padding-top:50px;">sous rubrique 1</A>
      <A HREF="..." CLASS="sousRubriqueMenu" STYLE="width:32%;height:98%;padding-top:50px;">sous rubrique 2</A>
    </div>
  </div>
</div>

voilà le javascript simple qui changer l'attribut display:

Code : Tout sélectionner

function afficherSousRubrique(debutId){
		document.getElementById(debutId+"1").style.display="none";
		document.getElementById(debutId+"2").style.display="inline";
	}
	
	function cacherSousRubrique(debutId){
		document.getElementById(debutId+"2").style.display="none";
		document.getElementById(debutId+"1").style.display="inline";
	}

Le problème est que sous IE6 j'ai un petite ligne vide qui apparait sous mon conteneur et qui crée un décalage avec les conteneurs rubrique suivants.

Y'a t il un autre moyen plus efficace de faire le basculement entre 2 conteneurs contenus dans un conteneur?

10 janv. 2008, 10:15

bonjour
Et en faisant :

Code : Tout sélectionner

function afficherSousRubrique(debutId){
      document.getElementById(debutId+"1").style.display="none";
      document.getElementById(debutId+"2").style.display="block";
   }

Est ce que cela change quelque chose?

Peux tu faire un screenshot de ton problème?
Merci

EDIT : jartage des bbcode non traduit au sein de la balise code

10 janv. 2008, 10:48

Si a la base les divs sont en block (ils le sont par défaut), c'est effectivement mieux de les mettre ne block (sans le bbcode, qui n'est pas interpreté dans la balise code)

10 janv. 2008, 11:32

après avoir mis la valeur de display à block, même problème.

voilà les screenshots :
avant passage de la souris

lorsque la souris passe

10 janv. 2008, 11:45

Hum...

Peux tu spécifier la taille de tes divs genre :

<div id='sb1' style="height:XXpx;"></div>
<div id='sb2' style="height:XXpx;"></div>

Pas sur que ca aide mais on ne sait jamais.

10 janv. 2008, 11:50

A essayer (ça coûte pas grand chose), retire les retours à la ligne entre les balises html (oué, je sais, ça fait un code pas super lisible, mais j'avais déjà eu des soucis du même genre sous IE, et c'était les retours charriot et tabulations qui possait problème parceque môssieur estimait qu'il devait leur allouer un petit espace sur la page

)

Bon c'est peut être pas le cas ici, mais tu peux toujours essayer :

Code : Tout sélectionner

 HREF="..." CLASS="sousRubriqueMenu" STYLE="width:32%;height:98%;padding-top:50px;">sous rubrique 2</A></div></div></div>

10 janv. 2008, 11:56

A essayer (ça coûte pas grand chose), retire les retours à la ligne entre les balises html

Effectivement ça ne coute pas grand chose et ca rapporte gros, ça marche maintenant.
Je n'avais pas d'indentation ce matin dans le code, j'ai trouvé ça bizarre alors j'en ai ajouté...
Maintenant je sais pourquoi j'en avait pas.

MErci Ryle pour m'avoir remis sur le droit chemin

comment faire proprement une alternation de div ?

Qui est en ligne