5568 sujets

Sémantique web et HTML

Positioner div sur un table

Pages :
(reprise du message précédent)

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
L'idée, saiko, c'était de redimensionner un div dynamiquement (environ 0.03 secondes ?) pourqu'il fasse la largeur de mon tableau. Et ensuite la transparence, ce ne sont que 4 propriétés (1 par navigateur) tout ce qu'il y a de plus normal... Le CSS 3 prévoit même de l'inclure. C'est exactement pour ça (et si tu relis le post en entier tu t'en rendra compte) que j'ai de grosses réserves à utiliser un script JS qui me change tous les pixels d'un .png

De plus, le travail que j'effectue est pour une grande enseigne. Même si je ne fais qu'une dizaine de pages du projet, j'ai besoin de quelque chose de propre, et en effet, excuse moi du mot : BEAU. Des directeurs sont amenés à passer sur cette page, je vais pas planter mon <body style="background:'white';"><table style="background:'green';border:'40px solid pink;'"> hein, désolé.
Modifié par Shqdow (25 Jun 2010 - 15:34)
Modérateur
Shqdow a écrit :
je vais pas planter mon <body style="background:'white';"><table style="background:'green';border:'40px solid pink;'"> hein, désolé.


... N'exagère pas non plus. Dans le cas présenté, il y a moyen de faire quelque chose de très esthétique, très beau, sans utiliser de transparence. Il y a un juste milieu entre un truc hyper chic avec transparence et un fond vert avec bordure rose... Smiley ravi
Modifié par Tony Monast (25 Jun 2010 - 15:37)
Evidemment j'abuse. Mais tout ça pour dire qu'à la base, j'avais pas précisé le contexte (graphisme, transparence, blablabla c'est le mal) pour justement éviter ce genre de polémique. J'en reviens à ma question de base =>

Coment placer un div absolute et un table élastique (de la même taille) l'un sur l'autre SANS les imbriquer dans le code ? Florent à l'air de dire que c'est impossible sous IE6, et je serais bien tenter de le croire, ce qui m'amène à penser que : plutôt que d'essayer de rendre mon div autant élastique que le tableau, pourquoi ne pas générer le tableau, et une fois la page générée analyser le tableau et à ce moment là créer le div (parce qu'à ce moment là, la largeur, hauteur, et position, on y a accès) => Javascript (ce que je ne connais absolument pas)
Là est ma lacune et c'est là où j'ai besoin d'aide, en fait.
Modifié par Shqdow (25 Jun 2010 - 15:45)
Modérateur
Même si tu voulais éviter cette polémique, je persiste qu'il vaut mieux utiliser un PNG transparent accompagné d'un script pour IE6, plutôt que d'utiliser une méthode peu fiable se résumant à placer un div et un table l'un sur l'autre.

Au moins, avec le PNG transparent, tu es certain du résultat dans la grande majorité des navigateurs Web, et pour IE6, le script s'en occupera et une fois que tu auras validé les performances et la fiabilité du script, ton calvaire sera terminé.

Sinon, as-tu pensé à utiliser une image de fond pour ton tableau qui simulerait la transparence? À noter que ça peut fonctionner que dans des conditions bien précises...
Tony Monast a écrit :
Sinon, as-tu pensé à utiliser une image de fond pour ton tableau qui simulerait la transparence? À noter que ça peut fonctionner que dans des conditions bien précises...


En fait oui, mais comme l'image le montre, mon fond n'est pas uni (+ une difficulté), mon tableau est élastique (+ une difficulté), ma page est redimensionable (+ une difficulté). Ces 3 conditions font parties de celles qui font qu'il ne vaut mieux pas se lancer dans l'aventure.
Modifié par Shqdow (25 Jun 2010 - 16:02)
Modérateur
D'accord.

Pour ce qui est de l'utilisation d'un png transparent avec un bon vieux filter dans les CSS pour IE6 (comme proposé par Florent), sans utiliser de script, ça non plus tu n'as pas envie? Tu veux absolument essayer ta technique du table et du div superposé?

Si c'est le cas, ça va prendre une bonne dose de Javascript et les calculs devront s'effectuer au moindre redimensionnement de la fenêtre ou du tableau lui-même (zoom texte). Il y a potentiellement des effets collatéraux qui devront être gérés. Bref, c'est une belle aventure qui t'attend. Smiley biggrin

J'aimerais bien t'aider, mais le simple fait que je considère cette solution comme inappropriée, ça me turn-off un peu.

Bon courage!
Modifié par Tony Monast (25 Jun 2010 - 21:08)
Tony Monast a écrit :
Il y a un juste milieu entre un truc hyper chic avec transparence et un fond vert avec bordure rose... Smiley ravi

Nan mais de toute façon on n'est PAS sur un truc hyper chic à la base.
Moi je serais d'avis de virer ce design qui fait mal aux yeux (tous navigateurs confondus). Mais ça n'engage que moi.

Shqdow a écrit :
Coment placer un div absolute et un table élastique (de la même taille) l'un sur l'autre SANS les imbriquer dans le code ? Florent à l'air de dire que c'est impossible sous IE6

C'est effectivement impossible en HTML+CSS (sans utiliser JavaScript en prime) sous IE6. La solution pour ce cas de figure était d'avoir un conteneur en position:relative parent du tableau et adoptant les dimensions de ce dernier, et dedans un élément en position:absolute;top:0;right:0;bottom:0;left:0;.

Cela dit, je ne vois pas trop d'où vient la contrainte de ne pas mettre le fond sur un DIV entourant le tableau. C'est pour le fun?
Modifié par Florent V. (25 Jun 2010 - 19:56)
Florent V. a écrit :

Cela dit, je ne vois pas trop d'où vient la contrainte de ne pas mettre le fond sur un DIV entourant le tableau. C'est pour le fun?


Bonjour.

D'abord, si je place le div #fond en tant que parent de mon tableau, mon tableau prendra ses propriétés, et donc ses filtres de transparence, ce qui me gène énormément (bordures et texte transparents)

Ensuite, je trouvais évidemment intéressant de savoir faire ça entre deux frères.
Modifié par Shqdow (26 Jun 2010 - 18:16)
Florent V. a écrit :
Nan mais de toute façon on n'est PAS sur un truc hyper chic à la base.

Ha bah si c'est pour une grande enseigne dont le directeur va passer souvent Smiley lol Bon j'arrête de charrier, les gouts et les couleurs tout ça ^^ (pas taper Smiley langue )

J'avoue que dans ce cas je comprend pas pourquoi tu t'embête avec ta div alors que tu peux mettre directement un fond dans un tableau qui sera flexible du coup, c'est bien ça le but non ? Un tableau flexible avec un fond semi transparent qui s'étale en hauteur/largeur ?

Solution 1 filtre png transparent: Tu crée ton image avec ta transparence png la genre 2x2 px et tu la colles en background à ton tableau :

table{
background:url(monsuperfondtoutmignontoutplein.png);
}

Par défaut elle va se répéter sur toute la hauteur / largeur de ton tableau. Joli sous FF, chrome et ses amis, un petit coup de JS pour le rendre transparent sous IE6 et voilà

Solution 2 : le grand découpage. Je pense que ton image de fond (le truc vert là), aussi grande soit elle, finira tôt ou tard par se répéter si ton tableau est TREEEEEES long (à moins que tu finisses sur un dégradé vers une couleur verte de fond ??). Comme proposé avant, tu fusionne sous photoshop ton image de fond et ton calque de transparence à l'endroit de ton tableau, avec la hauteur maxi jusqu'au point où ton fond va se répéter. Et là pareil : 

table{
background:url(monsuperfond_fusionnée.png);
}

L'image sera affichée en fonction de la taille du tableau, plus il sera long, plus on verra ton image. Il te reste plus qu'à positionner le tableau pour que ça "colle" avec le fond. Un peu de découpage, margins, etc mais bon, pas de JS pour cette solution (mais une potentiellement grosse image au chargement). Par contre tu risques de devoir faire quelques css alternatives pour le positionner correctement.
Hello,

Si l'organisation de la page est adaptée, tu peux tricher en mettant en fond de ton tableau une image qui contient également le fond d'origine afin de simuler la transparence. Plus de transparence, plus de problème Smiley smile

edit: rhooo... y'a deux pages et ça a déjà été proposé Smiley smile
Modifié par Nathan- (29 Jun 2010 - 17:38)
Pages :
Sujet clos
Aller à