HTML & CSS

[minos]

salut à tous,

j'ai un problème de "calques" en CSS

J'ai réalisé un menu avec une rubrique déroulante en javascript...

ma page est divisé en 2: le menu à gauche, et le corps de la page au centre et a droite...

en fait la page est un tableau (car j'affiche des données dynamiques dans le corps et le menu est fixe, donc si ke veux que la cellule du menu s'allonge en fonction du nombre de données obtenues)

(oui oui j'en viens au fait)

 

alors voilà: ma rubrique déroulante consiste à faire apparaître un calque caché sous le menu et qui vient en "slidant" (j'utilise une fonction de Cross Browser) par dessus le contenu de la page...

 

Le problème c'est qu'il doit y avoir 3 niveaux d'affichages dans la page

1- le menu: au dessus de tout

2- la rubrique déroulante en dessOUs du menu et au dessUs du corps car il y a des liens dans cette rubrique

3- le corps de la page

 

or la conception de la page en 2 colonnes d'un tableau m'empêche d'y arriver car j'ai l'impression que je ne peux indiquer des "z-index" différents sur des cellules d'un même tableau

-> est-ce que c'est le cas?

-> si oui comment y remédier?

-> sinon est-ce qu'on peut modifier le paramètre z-index d'un "div" en javascript?

 

en gros la structure de ma page donne:

 

<table>

<tr>

<td> <!-- 1ere cellule contenant le menu de gauche qui doit être par dessus tout -->

<table><tr><td></td></tr> <!-- table qui contient la mise en forme du menu -->

</td>

<td> <!-- 2ème cellule contenant le corps qui doit être en dessous de tout -->

</td>

</tr>

</table>

 

<div> <!-- ici mon "div" avec la rubrique que je fai apparaître --> </div>

 

 

est-ce que quelqu'un aurait une idée svp?

merci

[minos]

je n'y suis toujours pas arriver

je me demande si ce n'est pas à cause de l'imbrication des tableaux...

il n'y aurait pas une histoire d'héritage alors?

il reste encore la possibilité de modifier le paramère z-index en javascript peu-etre...

c'est possible?

[KewlCat]

Tu as la possibilité de modifier les z-index en javascript en utilisant la propriété style et zIndex :

document.getElementById('menu').style.zIndex = 12;

 

(ok, 12 c'est un peu forcé, mais si j'ai vraiment 11 sous-niveaux à afficher ça devient vite nécessaire)

 

Pour en revenir aux propriétés de style des tableaux, étant donné que ce ne sont pas des éléments "blocs" ils ne peuvent pas prendre de propriété zIndex (ou du moins s'ils en ont une elle sera inefficace)

Le mieux que tu aies à faire est d'utiliser des DIV (ou les éléments "bloc" de ton choix... P ou autre...)

 

Reste à savoir si tu veux conserver ton tableau pour la mise en page (avec un affichage des blocs en style "display:inline" et "display:none" pour afficher/cacher, ou si tu joues avec des éléments en "position:absolute" histoire de t'affranchir des problèmes de "mouvements" causés par le menu)

 

Pour plus d'info : http://www.w3.org/TR/REC-CSS2/visuren.html

[minos]

Merci pour ce lien KewlCat!

il j'ai trouvé le meme en français!

ICI

 

sinon j'ai modifié ma façon de penser en fait pour arriver à mes fins

--> quand le menu n'est pas déployé il n'est pas caché sous un élément, mais se trouve en

position: absolute;

left:-300px;

top:250px;

 

en gros complètement en dehors de la page

 

maintenant mes problèmes ce sont plus les compatibilités entre navigateurs...

comment je peux faire pour changer un paramètre d'un navigateur à l'autre?

j'ai appliqué ce qui suit tiré de OPENWEB

 

interieur{

position: relative;

top: 10px;

voice-family: "\"}\"";

  voice-family:inherit;

  top: 0px;

}

html>body .interieur {

  top: 0px;

}

 

en gros je veux mettre un paramètre top différent suivant le navigateur...

parce que sinon une fois c'est trop haut et sur l'autre c'est trop bas!

 

encore une fois sans être lourd, Microsoft ils sont chiant à pas suivre les normes du W3C!!!

[KewlCat]

Pas de pb puisque ce sont toujours des paramètres de la propriété style de tes éléments.

 

Encore une fois, tu peux le faire en JavaScript. Suffit de détecter le navigateur : http://www.w3schools.com/js/js_browser.asp