Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

minos

HTML & CSS

Messages recommandés

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) :P

 

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

Partager ce message


Lien à poster
Partager sur d’autres sites

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?

Partager ce message


Lien à poster
Partager sur d’autres sites

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

Partager ce message


Lien à poster
Partager sur d’autres sites

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!!!

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • En ligne récemment   0 membre est en ligne

    Aucun utilisateur enregistré regarde cette page.

×