Pb js visibility & css balise position:fixed

Résolu/Fermé

ClR555 - Modifié par ClR555 le 29/03/2011 à 10:52
ClR555 - 31 mars 2011 à 04:39

Bonjour à tous.

J'essaie en vain depuis hier de résoudre une énigme de mon site, peut-être aurez vous une idée. Il y a qq chose qui m'échappe et peut-être avez vous déjà eut la coquille en question.

Je vais essayer d'être la plus claire possible.

Sur une de mes pages, un lien html déclenche une fonction JS (toute bête) permettant l'apparition/disparition d'une div de mon site.
-> lien du type:

<a  class="panneau" href="javascript:visibilite('divid');" title="Afficher ou Masquer" alt="Afficher ou Masquer">Nom du lien</a>

Jusque là très bien. la div s'affiche et se cache sans pb.
-> ma div pour donner une idée :

<div id="divid" style="display:none"> 
<h3><span id="htpage"> </span>Miniatures</h3>  
 <div class="boutons"> 
  <a class="htdp" href="page.php#htpage" title="Haut" alt="Haut">en Haut</a>  
  <a class="bdp" href="page.php#bdpage" title="Bas" alt="Bas">en Bas</a> 
 </div> 
 <div class="txt"> 
  Texte aléatoire (+ ou moins long) 
 </div> 
 <span id="bdpage"> </span> 
</div>

Dans cette div divid, en gros on a :
- 1titre h3 contenant un span avec une ancre (haut de page)
- 1div boutons contenant deux liens permettant de se rendre en haut ou en bas de la div divid
- 1texte (txt)

Les Trucs en plus :
divid est en position:fixed (il est fixe sur l'écran).
Il possède un overflow:auto pour avoir une barre de défilement si le texte dépasse.
Mes boutons, à gauche du texte sont également en position:fixed, afin de les rendre accessibles depuis n'importe où dans le cours de la lecture du texte de divid.

là encore pas de pb... tout fonctionne...enfin presque.

En effet lorsque j'actualise ma page, mes boutons vont se coller en haut à gauche de ma page.php (en dehors de la divid). Un clic n'importe où dans la page les ramène à leur place voulue illico presto comme si de rien n'était, "ni vu ni connu jt'embrouille"...

Enfin perso ça m'embrouille depuis hier soir et puis je m'y connais peu en js mais bon là...
Je me dis qu'il y a forcément un truc.

Amis javascripteurs et javascripteuses je requierts une fois encore votre aide précieuse, la débutante que je suis s'arrache tous les cheveux...

Merci d'avance à ceux qui m'éviteront l'achat d'une perruque :)

A voir également:

Pb js visibility & css balise position:fixed
Ma position - Guide
Position gps - Guide
Balise br ✓ - Forum HTML
Partage de position whatsapp - Guide
Saut de lignes sans ✓ - Forum Webmastering

1 réponse

Réponse 1 / 1

siniko44 Messages postés 172 Date d'inscription vendredi 30 juillet 2010 Statut Membre Dernière intervention 29 novembre 2013 17
29 mars 2011 à 11:32

Ce serais sûrement plus chouette avec le script :).

ClR555
Modifié par ClR555 le 29/03/2011 à 15:50

il est vraiment trop long, d'où le raccourcit au dessus qui correspond bien à la réalité.
Je me disais que mes explications suffiraient... parceque là il faudrait que je mette le css, le php, le js...
Je pense que ça va décourager d'avance et je ne crois pas que le pb soit là.
Il y a vraisemblablement un pb de compatibilité entre mes deux blocs en position:fixe... Non? C'est du jamais vu ça en js?...
: (
et sinon... Quel morceau du script t'intéresse?

siniko44 Messages postés 172 Date d'inscription vendredi 30 juillet 2010 Statut Membre Dernière intervention 29 novembre 2013 17
29 mars 2011 à 17:24

A priori, le code déconne lorsque la page est chargée, mais il est remit en place lorsque une action Click est effectué, donc je ne pense pas que sa vienne du script.
Enfait c'est meme plutot bête, la propriété position:fixed, marche comme en absolue, Elle n'hérite pas des balise précédente, et donc ne prend pas en compte ton divid, ce qui pourra expliqué ceci. Après comment ils se remettent en place d'un coup de baguette, je ne l'explique pas, et j'en suis désolé :/

ClR555
Modifié par ClR555 le 29/03/2011 à 22:24

: / C'est balo ça... mais je te remercie tout de même de ta réponse...

"le code déconne lorsque la page est chargée" -> moui, tout à fait
"la propriété position:fixed, marche comme en absolue, Elle n'hérite pas des balise précédente, et donc ne prend pas en compte ton divid" -> alors ça, ça me laisse bien perplexe puisqu'au clic elle se met à la bonne place...
ça me fait réfléchir un peu aussi...

je mets mon css sur cette partie en fonction des balises données dans mon premier message... si ça peut m'aider, car là je sèche sévère.

Code CSS

 
#divid 
 { 
 position:fixed; 
 top:350px; 
 height:206; 
 width:150; 
 margin-left:-220px; 
 border: 1px inset #444444; 
 overflow:auto; 
} 
h3 
{ 
 padding:0px; 
 margin:0px; 
 margin-top:5px; 
 margin-bottom:5px; 
 font-size:17px; 
 text-align:center; 
} 
.boutons 
{ 
 position:fixed; 
 height:38px; 
 width:17px; 
 margin-left:2px; 
 margin-right:4px; 
 margin-bottom:5px; 
 padding-left:2px; 
 padding-bottom:3px; 
 color:grey;  
 border: 1px inset #e7e7e7; 
} 
.htdp, 
.bdp 
{ 
 text-decoration:none; 
 border:none; 
} 
a.htdp, 
a.bdp 
{ 
 display:block; 
 margin:0px; 
 padding:0px; 
 width:15px; 
} 
a.htdp 
{ 
 background: url(images/ht_de_page.png) no-repeat right; 
} 
a.htdp:hover  
{ 
 background: url(images/ht_de_page_hover.png) no-repeat right; 
} 
a.bdp 
{ 
 background: url(images/bas_de_page.png) no-repeat right; 
} 
a.bdp:hover  
{ 
 background: url(images/bas_de_page_hover.png) no-repeat right; 
} 
.txt 
{ 
 position:relative; 
 height:200px; 
 width:130px; 
 margin:5px 25px 5px 25px; 
 color:black; 
 font-size:10px; 
 font-family:Calibri; 
 text-align:justify; 
}

Voilà.
d'avance, je remercie quiconque pourra m'aider.
Si vous avez juste des pistes aussi...

ClR555
Modifié par ClR555 le 31/03/2011 à 04:43

Je marque ce sujet en résolu car suite à tes remarques, j'ai précisé ma demande plus simplement dans un message suivant, intitulé:"CSS position:fixed par rapport au parent" . Mon problème est de savoir s'il est possible de mettre une balise en position:fixed par rapport à un dossier parent(et pas par rapport à la page), lui même en position:fixed dans la page....
Mes recherches disent que non. Je pense pourtant qu'il doit y avoir un moyen d'obtenir le même effet mais je ne vois pas...
peut-être une i-frame... mais je n'aime pas ça...
autre chose ? ...
Au bon entendeur qui trouvera réponse peut-être... Toute idée est la bienvenue.
Bonne soirée à vous :)

Discussions similaires

la balise ou

ou ou

Balise

Javascript Arrondi à 2 chiffres après la virgule

Faire sauter 2 lignes avec br (CSS)