[RESOLU] Opacité de DIV

Eléphant du PHP | 51 Messages

17 avr. 2013, 09:38

Bonjour,
Aujourd'hui je rencontre une nouvelle difficulté. Ayant une page affichant un très long tableau j'ai mis en place une scrollbar verticale seulement cela posait problème car les entêtes descendaient aussi et j'aurais aimé qu'elles restent fixes. J'ai trouvé comme unique solution de faire afficher deux fois le tableau mais pour le premier en ne conservant que les entêtes. Maintenant, lorsque je suis tout en haut du tableau, je me retrouve avec deux lignes d'entêtes alors j'aimerais cacher l'autre. J'ai donc pour but de la faire passer derrière la première seulement je n'y arrive pas, elles se confondent.

J'ai mis les table dans deux DIV différents et voici leur css:
<style type="text/css">
	#table1{overflow:hidden;position:absolute;bottom:547px;top:70px;}
	#table2{overflow:auto;position:absolute;bottom:150px;top:70px;}	
</style type="text/css">
Savez-vous comment je peux faire passer le deuxième DIV complètement derrière le premier de façon à ne plus le voir ?

Merci d'avance

Mammouth du PHP | 571 Messages

17 avr. 2013, 13:25

bonjour,

En css, on peut superposer des éléments avec la proprieté z-index pour peu que ces élements soient positionnés en absolu(ce qui est ton cas).la div qui sera au 1er plan aura pour valeur de z-index la plus grande:
#table2{
z-index:1
}

#table1{
z-index:2; #div qui sera au premier plan
}

Mammouth du PHP | 2278 Messages

17 avr. 2013, 13:47

Si on se sert de div absolues, il est encore plus simple et surtout plus sûr de mettre une première div de hauteur suffisante pour afficher le titre et de placer juste en-dessous une duv abolue avec overflow = 'scroll' et une hauteur qui tienne sur la page (quitte à la calculer approximativement en fonction du nombre de lettres et de la police...
Vanitas vanitatum et omnia vanitas
Mes derniers livres :
Sauvez les Mots chez BoD,
Tous les chemins mènent à ROM chez BoD

Eléphant du PHP | 51 Messages

17 avr. 2013, 14:07

Merci Yann18 cette solution semble fonctionner seulement le fond des cellules restent transparent, pour les zones de textes aucun soucis mais comment rentre le fond de la cellule également opaque ?

Eléphant du PHP | 51 Messages

17 avr. 2013, 14:38

Problème résolu en mettant un background-color dans le style CSS de mes entêtes, ainsi la DIV devient complètement opaque et étant au premier plan elle cache bien la seconde DIV lorsque celle-ci passe dessous.

Merci encore !

Mammouth du PHP | 571 Messages

17 avr. 2013, 15:26

de rien.
pour rendre la div opaque il suffit de mettre avec la proprieté opacity de CSS3 son opacité à zéro:

#taDiv{
opacity:0;
}

Mammouth du PHP | 571 Messages

17 avr. 2013, 15:33

je viens de me rendre compte qu'au départ t'avais un autre problème, celui de rendre fixe l'entête. Pour rendre l'entête fixe(comme le menu de facebook) il suffit de le positionner en fixe(fixed):
#divEntete{
position:fixed;
top :6px;/* à toi de voir*/
left:1px;
}
la solution précédente(superposition d'éléments) est la moins élégante je te suggère le positionnement fixe.

Eléphant du PHP | 51 Messages

17 avr. 2013, 15:58

Je suis bien d'accord avec toi seulement il n'est pas possible de faire des div dans un tableau et va savoir pourquoi je n'ai pas été capable de faire fonctionner les thead et tbody c'est pourquoi je me suis tourné vers la solution de mettre deux fois le même tableau en n'affichant que les entêtes dans le premier puis que le contenu dans le second ! Seulement je n'arrivais pas à n'afficher que le contenu, maintenant avec la superposition de div qui cache les entêtes du second table tout va bien :D