div imbriqués ( hidden et visible)

Bonjour,

Dans le but de créer un programme de gestion, j'utilise la technologie Ajax avec javascript, css et php.

Chaque partie de programme est affichée dans un <div>, certains éléments sont inclus dans cette page dans le but de les rendre visible ou non suivant que la fonction qu'ils entrainent soit accessible ou pas (un bouton "créer" ne peut pas être présent en même temps qu'un bouton "modifier")

Code:

---

1 2 3 4 5 6

<div id='pageclient'> <div id='btncreer'> </div> <div id='btnmodifier'> </div> </div>

---

Donc, successivement, je rends visible (='visible') ou invisible (='hidden') le div correspondant au bouton qui peut être utilisé. Pour l'instant ça marche sans problème.

mais quand je décide de rendre mon div pageclient invisible, le bouton, pourtant contenu dans mon div pageclient (mais qui est déclaré visible précédemment) reste affiché.

Est-ce qu'il faut que je rende invisible un à un les boutons en javascript (je n'ai pas le choix) ou est-ce qu'une partie de l'héritage de CSS m'échappe encore complètement ? (Je reconnais que ce sont mes premiers pas en css, mais j'avais pensé que le reste de ma page étant invisible, son contenu l'était également)
J'ai aussi la possibilité d'aller placer mon div à un endroit ou jamais la page ne l'affichera en 5000,5000, mais ça m'oblige à le ramener pour une utilisation.

Merci des coups de pouce que je pourrais obtenir. A noter que je suis du genre à condenser mon code (c'est historique, j'ai appris à programmer avec des machines dont la mémoire était exprimée en Ko et plus c'est court à passer en ligne, plus c'est rapide pour celui qui a une petite connexion)

Si tu as un problème de CSS, poster le code HTML c'est bien, mais je pense que le code CSS correspondant serait tout aussi utile... :roll:

Puisque tu as besoin de plus de code, je suis allé prendre dans mon code en supprimant ce qui n'est pas utile à la compréhension du problème.

J'ai donc un fichier javascript

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

function voitdiv(texte) { window.document.getElementById(texte).style.visibility="visible"; return; }   function cachediv(texte) { window.document.getElementById(texte).style.visibility="hidden"; return; }   function nouveauclient() { videtext('idcli'); videtext('nomclient'); voitdiv('btnclicre'); cachediv('btnclimodif'); return; }   function donnefichcli(resultat) { // resultat vient du résultat d une requete AJAX res=resultat.split('#'); setvaleur("idcli",res[0]); setvaleur("nomclient",res[1]); voitdiv('btnclimodif'); cachediv('btnclicre'); return; }   function donnepagecli() { voitdiv('pageclient'); }   function fermepagecli() { cachediv('pageclient');

---

un fichier CSS

Code:

---

1 2 3 4 5 6 7

#pageclient { font-size: smaller; position: absolute; top: 75px; left: 260px; visibility: hidden; }

---

Je n'ai pas de CSS au départ sur mes boutons

un fichier HTML

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div id="pageclient"> <div id="lignecli"> <span id="txtcli"> Nom du client&nbsp;:&nbsp; </span> <span id="repcli"> <input id="nomclient" type="text" size="40"> <input id="idcli" type="hidden" size="8"> </span> </div> <div> <input type="button" id="btnclicre" name="btnclicre" value="Creer" onclick="creationclient()"> <input type="button" id="btnclimodif" name="btnclimodif" value="Modifier" onclick="modifclient()"> </div> </div>

---

Quand je fais un appel à donnepagecli(), mon div s'affiche correctement, les boutons associés s'affichent également, pas de soucis tant que je reste sur cette page. Mais on n'est pas à l'abri du petit malin qui clique sur une autre partie du menu (un mec comme moi qui se met brutalement à cliquer sur tout ce qui bouge ou pas), et dans ces cas là, ma page affichée doit être effacée de l'écran, fonction fermepagecli(). Mais là ou est le problème, c'est que justement, comme j'ai déclaré que mes boutons étaient visibles, eux, restent à l'écran alors que le reste que je n'ai pas touché est bien devenu invisible.

J'imaginais que le fait de demander un visibility=hidden sur un div, ça effaçait l'ensemble du contenu du div, mais à priori, ce n'est pas le cas

Un détail, je fais teste sur safari 5.0 sur mac os.X.5

Utiliser la propriété visibility semble maladroit dans ton cas puisqu'elle se contente de cacher le contenu mais en conservant l'espace réservé à l'élément (en plus de l'effet de bord que tu constates).
Tu gagnerais à utiliser display à la place !

merci, même si dans l'absolu, ça n'a pas répondu à ma question, remplacer visibility="visible" par display="inline" et visibility="hidden" par display="none" a répondu à mon besoin, je ne vais pas trop me creuser la tête et utiliser cette propriété, même si au final, j'avais des trous à la place de certains boutons, ça ne génait pas le fonctionnement

merci pour cette réponse très réactive.