5568 sujets

Sémantique web et HTML

Positioner div sur un table

Pages :
Bonjour !

Voila sans plus attendre mon problème : Je veux un tableau (élastique) centré au milieu de ma page, avec un div (donc tout autant élastique) par dessus ce tableau.

J'ai trouvé un début de solution que voici :


<div id="global" style="text-align:center;height:1%;">

	<div id="fond" style="position:absolute;height:100%;">
	</div>

	<table>
	[...]
	</table>

</div>


Le soucis de la hauteur est donc réglé, mon div fait la même taile que le tableau (puisque qu'avec height:1%, #global fait la même hauteur que le tableau et que #fond en absolute fait alors la même hauteur que #global)

Le problème réside donc à priori dans la largeur : #fond apparait comme une ligne verticale.
J'ai tenté le même hack qu'avec height => mettre width:1% sur #global et width:100% sur #fond ; ça n'a pas fonctionné (et en plus ça a redimensionné mon tableau).
J'ai aussi tenté de mettre width:100% sur #fond sans mettre de width sur #global, et là #fond a pris toute la largeur de la page.. (absolute)

Je suis donc bloqué et apelle à l'aide !

Merci par avance =)


EDIT : En relisant, c'est vrai qu'on peut se demander pourquoi vouloir faire ça, ça parait absurde alors je m'explique : Je veux un fond semi-transparent à mon tableau (mais sans rendre le texte intérieur transparent), je développe en intranet et les PC sont bloqués sous IE, donc NON :
- Je ne peux pas utiliser de PNG transparency.
- Je ne peux pas inherit le width.
Modifié par Shqdow (22 Jun 2010 - 12:19)
Bonjour,

Pour que le position absolute serve à quelque chose, il faut le positionner avec left ou right et/ou top ou bottom.

Dans ton cas, il devrait donc être positionné en top:0; left:0;

Par contre je ne vois pas l'intérêt du tableau, un div pourrait tout autant faire l'affaire.

ps. : un peu de patience ne fait de mal à personne.
Modifié par Laurie-Anne (23 Jun 2010 - 08:21)
En fait, le tableau ne me sert pas à rien : c'est un tableau de données (la page est en fait une page de gestion de données, en l'occurence "utilisateurs", avec donc toutes les lignes et tous les champs importés d'une base de donnée; c'est d'ailleur pourquoi je dis "tableau elastique", c'est en fait que la taille de mon tableau dépend du nombre de lignes et de champs.)

Merci pour les infos je vais tester.
Modifié par Shqdow (23 Jun 2010 - 09:52)
J'ai testé, en fait maintenant mon div #fond :
- ne fait toujours pas la largeur de mon tableau.
- est positionné en left:0;top:0 par rapport à la page et non par rapport au div global.

Donc si je comprends bien, mon div #fond doit être en relative si je veux lui définir une position par rapport à son div conteneur #gloabal ? Mais à ce moment là, coment faire pour qu'il soit superposé avec mon tableau (qui lui aussi à besoin d'être positionné par rapport à #global, et donc en relative) ?

Je vais faire un petit shéma pour ceux qui passeraient sur le post =>
J'ai un div bleu conteneur.
J'ai un div rouge dans le div bleu.
J'ai un div vert dans le div bleu, par dessus du div rouge(je mets mon tableau dans un div pour que ce soit plus simple).

Ils sont tous elastiques

Je veux qu'il soient positionnés comme ceci :
http://img641.imageshack.us/img641/411/shmadiv.png

En fait je n'arrive pas à savoir s'il faut que mon #fond soit en absolute ou en relative. J'ai besoin de la propriété de l'absolute qui fait que "le div peut se placer au dessus de n'importe quoi" mais aussi de la propriété du relative qui fait que "le div se positionne par rapport à un parent".
Modifié par Shqdow (23 Jun 2010 - 11:06)
Bonjour,

Je vois pas l'intérêt de la manoeuvre. Tu veux placer un DIV par dessus ton tableau sur toute la surface de ce dernier, dans le but d'empêcher les utilisateurs de sélectionner les données du tableau par exemple? Autrement ça m'échappe.

Si c'est une question de design uniquement, peut-on voir le design souhaité (maquette graphique, pas un schéma qui représente la solution que tu vises... vu que cette solution est peut-être -- sans doute? -- mauvaise)?

Ah oui, et comme tu as l'air de patauger dans la semoule du positionnement CSS, un peu de lecture: Guide de survie du positionnement CSS.
Modifié par Florent V. (23 Jun 2010 - 12:11)
http://img693.imageshack.us/img693/7892/shmadiv2.png

J'ai donc besoin
- que le fond soit semi transparent et compatible IE6
==> pas de semi transparence png
- que le texte de la table ne soit pas transparent
==> pas d'attributs directement sur le table ou le div conteneur

En conséquence, la seule solution que j'ai trouvé est de faire un div (que j'ai intitulé 'fond'), et de le placer en dessous du table.

Florent V. a écrit :
Tu veux placer un DIV par dessus ton tableau sur toute la surface de ce dernier

C'est exactement ça, sauf que c'est dessous (mais la différence sera alors juste un z-index)

Je suis ouvert à toute autre solution évidemment, mais celle là me paraissait potable. Et plus généralement, je pense que ça peut être interessant de savoir faire ça, et pas spécialement que pour mon cas à moi.

De plus, si j'arrivais à faire ça sous forme d'un 'div de background' comme je l'ai demandé, je pourais appliquer votre astuce pour mettre un arrière plan étirable si jamais je veux par exemple y mettre une texture...

EDIT : Merci pour l'article, très instructif, que je vais conserver. Ceci dit, je n'ai toujours pas trouvé de solution.
Modifié par Shqdow (23 Jun 2010 - 14:57)
Il suffit de placer un png transparent sur le fond du tableau. Ça ne marchera pas dans IE6 (png opaques) sans bidouilles, à toi de voir si tu veux tenir compte de ce navigateur.
Modifié par Patidou (23 Jun 2010 - 15:35)
Shqdow a écrit :
je développe en intranet et les PC sont bloqués sous IE, donc NON :
- Je ne peux pas utiliser de PNG transparency.


Shqdow a écrit :

J'ai donc besoin
- que le fond soit semi transparent et compatible IE6
==> pas de semi transparence png

Modifié par Shqdow (23 Jun 2010 - 15:42)
Modérateur
Bonjour,

Shqdow a écrit :

- Je ne peux pas utiliser de PNG transparency.


Avec un petit coup de Javascript, je pense notamment à ceci, tu peux utiliser du PNG transparent pour IE6.
Shqdow a écrit :
[quote Shqdow]je développe en intranet et les PC sont bloqués sous IE, donc NON :
- Je ne peux pas utiliser de PNG transparency.


Shqdow a écrit :

J'ai donc besoin
- que le fond soit semi transparent et compatible IE6
==> pas de semi transparence png


Oui. Bon. Voilà-voilà. Smiley lol
Modifié par Patidou (23 Jun 2010 - 15:48)
Merci beaucoup Tony Monast.

Ceci dit, je n'ai que photofiltre sous la main..

J'appliquerais ta méthode si jamais je ne trouve pas de solution avec mon div de fond.
Tony Monast a écrit :
Avec un petit coup de Javascript, je pense notamment à ceci, tu peux utiliser du PNG transparent pour IE6.

Pour ma part j'éviterais. Utiliser une librairie JavaScript qui gère plein de trucs juste pour appliquer automatiquement un filtre AlphaImageLoader, ça me semble excessif. Mieux vaut l'appliquer soi-même à la main (en CSS), ça permettra aussi de savoir ce qu'on fait plutôt que de faire aveuglément confiance à un script...

Un peu de lecture:
http://www.alsacreations.com/article/lire/81-transparence-png-ie6.html

Deux remarques:
1. Je ne suis pas sûr que l'utilisation d'AlphaImageLoader soit possible pour des éléments TABLE ou TD. Si c'est le cas, je crois qu'il va falloir laisser tomber le fond translucide pour IE6. À la rigueur tester DD_BelatedPNG en dernier recours, si la présence de cet effet dans IE6 est capital (vu que le design est plus que médiocre ça m'étonne qu'on passe des heures à rechercher cet effet sur IE6, mais bon).
2. Utiliser un élément positionné en absolu prenant les dimensions du tableau est une astuce intéressante, mais elle ne sera utilisable qu'à partir de IE7. En effet, le support du positionnement absolu dans IE6 est trop limité (pas de possibilité d'utiliser top:0;bottom:0; pour déterminer la hauteur dynamiquement). Donc solution pas utilisable.
Modifié par Florent V. (24 Jun 2010 - 13:52)
Modérateur
Bonjour,

Florent V. a écrit :

Pour ma part j'éviterais. Utiliser une librairie JavaScript qui gère plein de trucs juste pour appliquer automatiquement un filtre AlphaImageLoader, ça me semble excessif. Mieux vaut l'appliquer soi-même à la main (en CSS), ça permettra aussi de savoir ce qu'on fait plutôt que de faire aveuglément confiance à un script...


En effet, c'est peut-être un peu excessif. Jusqu'à ce qu'il n'y a pas si longtemps, je n'avais jamais réellement eu besoin de transparence Alpha sur les png, et c'est l'une des premières librairies sur laquelle j'étais tombé et qui fonctionnait assez bien. Je vais jeter un oeil au script IE PNG Fix qui me semble plus raisonnable.
Tony Monast a écrit :
Je vais jeter un oeil au script IE PNG Fix qui me semble plus raisonnable.

Je préfère malgré tout gérer les filtres Direct X à la main plutôt que laisser ça au bon vouloir d'un script dont je ne connais pas le comportement exact.

En fait non: je préfère bannir AlphaImageLoader et l'utilisation des filtres Direct X dans IE en général. Smiley smile
Les comportements obtenus sont trop souvent problématiques, vu que IE doit en quelque sorte insérer un élément «étranger» dans la page. Apparemment l'intégration dans IE9 de l'accélération matérielle d'une part, et du rendu des fontes avec DirectWrite d'autre part, sera de bien meilleure facture.
Merci pour toutes vos réponses aussi précises et instructives les unes que les autres.
Il est vrai, Florent, que c'est une des raisons pour lesquelles j'étais réticent à propos d'utiliser un script... moi j'utilise souvent les 4 propriétés de transparence CSS pour faire quelque chose de cross-browser, et pour aussi préparer l'avenir :

		filter : alpha(opacity=50);
		-moz-opacity : 0.50;
		opacity : 0.50;
		-blabla-opacity : 0.50; /* J'ai paumé la 4ème */


Voila pourquoi j'étais autant attaché à ma méthode... Mais bon à priori il m'est donc impossible de le faire.. Ceci dit ( Smiley biggrin ) je pensais à un truc. Ne serait-il pas possible (tant qu'à faire d'utiliser JS autant faire ça bien) de faire un petit script qui dirait (onload) :

getelementbyid('MonFond').LeHaut = getelementbyid('MonTableau').LeHaut;
getelementbyid('MonFond').Lebas = getelementbyid('MonTableau').LeBas;
getelementbyid('MonFond').LaGauche = getelementbyid('MonTableau').LaDroite;
getelementbyid('MonFond').LaDroite = getelementbyid('MonTableau').LaGauche;

ou alors le positionner comme je l'ai fait et ajouter un script onload :

getelementbyid('MonFond').width = getelementbyid('MonTableau').width;

(javascript minable et très aproximatif, simplement pour vous représenter mon idée)

PS : Oui, j'y tiens à ma semi transparence : c'est totalement inutile et donc completement indispensable =)
Modifié par Shqdow (25 Jun 2010 - 11:26)
a écrit :
Oui, j'y tiens à ma semi transparence : c'est totalement inutile et donc completement indispensable =)


Indispensable au point d'alourdir des pages pour un intranet et de faire passer tes lubies de designer avant le confort et la rapidité d'exécution pour l'utilisateur? Pardon si mon intervention est hors de propos, mais quand je lis ça, j'ai envie de bondir. Je pensais que l'on faisait des sites pour les utilisateurs, hors pour moi, un intranet est quelque chose que les gens vont utiliser souvent je pense non ? Comme tu le dis, c'est TA semi transparence.
Il faut se demander alors qu'est ce qui est le mieux : un super effet png transparent à grands coups de scripts, de bouts de code bien bourrins, qui va mettre 15ans à charger et que 1 utilisateur sur 100 va remarquer ? Un site utilisable, rapidement chargé, un peu moins beau, certes, mais fonctionnel ?

Si déjà tes utilisateurs sont coincés sous IE6, leur imposer du script en plus qui va tout alourdir est à mon sens pas vraiment leur rendre service.

Encore désolé si j'ai été hors de propos
Modérateur
Florent V. a écrit :

Je préfère malgré tout gérer les filtres Direct X à la main plutôt que laisser ça au bon vouloir d'un script dont je ne connais pas le comportement exact.


Je n'ai pas analysé le script en entier, mais il ne fait pas qu'ajouter le filtre pour IE. Il corrige certains dommages collatéraux causés par le filtre d'IE (liens qui deviennent non cliquables - mettre en position relative, etc...).

J'ajouterais aussi que même si le script génère des éléphants roses, cela n'affectera que IE6. Puis le jour que ce navigateur sera rendu officiellement dans un musée, il suffira de retirer la ligne d'appel au script.

L'utilisation de ce script me semble raisonnable et le risque est bien calculé.
Modifié par Tony Monast (25 Jun 2010 - 14:56)
Modérateur
saiko_sama a écrit :

Si déjà tes utilisateurs sont coincés sous IE6, leur imposer du script en plus qui va tout alourdir est à mon sens pas vraiment leur rendre service.


Même si je partage ton avis au sujet des intranets, je me dis qu'une simple transparence ne va peut-être pas ralentir le tout. Le script va se mettre en cache et il n'effectue pas énormément de modifications dans le document. Puis, ce n'est pas parce que les ordinateurs sont sous IE6 qu'ils ne sont pas à jour au point de vue matériel. Je crois que tout dépend du contexte.
J'avoue que j'ai eut une mauvaise expérience avec un script de ce genre, d'où ma réticence pour l'utilisateur. Il fallait mettre une image d'un 1px de large en .GIF transparent, le script changeait tous les pixels gris de mes images en png en px transparent. Je vous laisse imaginer le temps de chargement de ma page, même sur un pc à jour niveau matériel et une bonne connexion ^^

Au final j'ai préféré revoir mon design plutôt que d'imposer ça aux utilisateurs. Comme dit Tony Monast, tout dépend du contexte Smiley smile
Pages :
Sujet clos
Aller à