[résolu] mettre une image derriere le texte

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

dj.dom a écrit :Non, ça fonctionne normalement avec FireFox et NVU, car eux savent afficher les png transparents. Il n'y a que IE qui a besoin de tout ça...
Ben alors, on est d'accord finalement, bref...
Si tu as besoin de

Code : Tout sélectionner

class="png" border="0" 
avec les dimensions de l'image derrière à rajouter, et que tu veux un background image de ta cellule (ou de n'importe quel bloc) par css -vu qu'i y'a pas d'autre moyen d'avoir un background image d'un bloc donné, que par le css- je vois pas comment tu peux faire.
Comment attribuer ces caractéristiques à une image qui est dans le css, je sais pas. J'ai l'impression que c'est pas possible. Ta solution ne devrait pas être utilisable dans css, par contre il faut creuser du côté du lien de calimo, IE7 de D Edwards, c'est du sérieux.
Ou alors, il faut travailler ton image dés le départ, on peut peut-être tricher pour simuler la transparence à ce gros balourd de IE?
On peut la voir, ton image?
dj.dom a écrit :C'est génant que j'utilise un tableau ?
C'est pas gênant, le code est lourd, c'est justifié que pour mettre des données, comme dans un tableau Excel, moi, je les utilise jamais, j'obtiens le même effet avec un ensemble de divs (par exemple).
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

dj.dom a écrit :Non, j'utilise ça : http://www.pim.asso.fr/pages_externes/t ... _a_ie.html

J'ai regardé le code de plus près et je pense que ça ne marche que lorsqu'on utilise <img ...> ... :( Donc je ne sais pas comment je vais faire...
En effet.
La solution est simple, utilise IE7 qui fonctionne même en background-image :wink:
dj.dom a écrit :C'est génant que j'utilise un tableau ?
Disons qu'ils sont prévus pour structurer des données de type tabulaires. Les utiliser pour la mise en forme, c'est les détourner de leur utilisation première.
Ça pose de gros problèmes pour certaines personnes handicapées, notamment les personnes mal voyantes qui utilisent un lecteur d'écran qui va continuellement dire "Tableau à X lignes X colonnes". Quand il y en a beaucoup d'imbriqués, le lecteur va passer son temps à lire ça, c'est dommage :(

À lire également : http://cybercodeur.net/weblog/presentat ... index.html (et aussi sa version anglaise car le site semble actuellement inaccessible) :wink:

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.5) Gecko/20060719 Firedragon Firefox/1.5.0.5
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

2 questions :
- IE7 est une bibliothèque Javascript, or certains utilisateurs désactivent JS et je ne sais pas comment lecteurs d'écran et synthétiseurs vocaux ou interfaces pour non-voyants se débrouillent avec JS, mal, je crois?
- IE7 semble fonctionner (si j'ai bien compris) par des liens vers des scripts JS, depuis le site vers le serveur, or certains utilisateurs préfèrent consulter un site hors connexion?

Un lien Alsacréations semble appuyer le 1er point (opinions controversées) :
http://forum.alsacreations.com/topic.ph ... &s=Edwards
Dernière modification par Mongo Bob le 31 juil. 2006, 23:07, modifié 1 fois.
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Mongo Bob a écrit :2 questions :
- IE7 est une bibliothèque Javascript, or certains utilisateurs désactivent JS
Ben tant pis pour eux, ils auront la version "normale" non améliorée.
C'est typiquement le rôle de javascript : apporter un "plus" (ici la transparence dans IE) :wink:
Mongo Bob a écrit :et je ne sais pas comment lecteurs d'écran et synthétiseurs vocaux ou interfaces pour non-voyants se débrouillent avec JS, mal, je crois?
Faut dire qu'avec la transparence… :lol:
Mongo Bob a écrit :- IE7 semble fonctionner (si j'ai bien compris) par des liens vers des scripts JS, depuis le site vers le serveur, or certains utilisateurs préfèrent consulter un site hors connexion?
Et ? Le script sera stocké dans le cache, et s'il est perdu, ben tant pis, ils auront l'image sans transparence, il n'y a pas mort d'homme non plus :wink:

Il faut bien voir qu'on ne parle ici que d'une amélioration relativement mineure, il n'est en aucun cas question de rendre la page totalement inaccessible :wink:

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.5) Gecko/20060719 Firedragon Firefox/1.5.0.5
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

Faut dire qu'avec la transparence…
La question était : est-ce que ça ne gêne pas leur fonctionnement! Rien d'autre... Toujours l'ironie...
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
dj.dom
Gecko
Messages : 88
Inscription : 22 juin 2006, 02:58

Message par dj.dom »

On peut la voir, ton image?
Voilà la page : http://dj.dom.free.fr/pro/musiques.htm
Bon là c'est encore brouillon mais vous voyez l'idée.
En effet.
La solution est simple, utilise IE7 qui fonctionne même en background-image
Merci de me confirmer que c'était ça, je n'étais pas sûr. Ok, je vais essayer IE7. Au fait, il y a beaucoup de monde qui désactive le java-script ?
Sinon, y'a t-il moyen de faire en sorte que IE utilise une autre couleur pour le fond des images png qu'il ne sait pas afficher ? Car sur ma page, un fond noir serait beaucoup moins génant qu'un fond gris...
Les utiliser pour la mise en forme, c'est les détourner de leur utilisation première.
Ca, ça ne me gêne pas : tu verrais les objets que j'utilise parfois en guise de pinceau pour obtenir certains effets dans mes peintures à l'huile... :wink: Et je connais une chanson dont l'un des instruments est en réalité un stylo bille cognant contre une bouteille de bière vide... :lol:
Par contre, ça alourdit vraiment beaucoup le chargement de la page ?
j'obtiens le même effet avec un ensemble de divs
Oui, je vois comment on fait avec des divs. Le probleme est que pour avoir mon menu fixe, je dois mettre tout le reste dans un même div, sinon ça devient compliqué... donc c'est beaucoup plus simple pour moi d'utiliser un tableau.
notamment les personnes mal voyantes qui utilisent un lecteur d'écran qui va continuellement dire "Tableau à X lignes X colonnes".
Ah oui, je vois, et je n'y aurai pas pensé.
Là je pense qu'on est dans un cas particulier. Je m'explique. Je suis graphiste-animateur et ça c'est le site où j'expose mon travail. Il n'y a quasiment aucun texte, juste des images. Et les quelques textes n'ont aucun interet pour une personne qui ne peut pas voir les images. Sauf la page en question, où je propose deux-trois musiques que j'ai faite, et bientot les musiques des deux séries animées que je réalise actuelement. Mais c'est pareil : pratiquement pas de texte. A la limite, ils pouraient avoir envie de venir écouter les musiques de cette page, mais il ne s'agit que d'extraits.
Si c'était un site de news, ou d'articles, bref des trucs qui interressent autant les non-voyants que les autres, oui je penserai à eux, mais là...


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

Au fait, il y a beaucoup de monde qui désactive le java-script ?
Selon calimo, le peu qui désactivent JS, tant pis pour eux, ils profiteront pas de la transparence. C'est un point de vue, y'a du bon sens, là-dedans.
Citation:
j'obtiens le même effet avec un ensemble de divs
Oui, je vois comment on fait avec des divs. Le probleme est que pour avoir mon menu fixe, je dois mettre tout le reste dans un même div, sinon ça devient compliqué... donc c'est beaucoup plus simple pour moi d'utiliser un tableau.
Non, c'est aussi simple de mettre tout le reste dans un même div (ou autre bloc), mais ça t'embête de changer de technique, ce que je comprends. :wink:
ça alourdit vraiment beaucoup le chargement de la page ?
Oui! Sauf pour les hauts débits adsl etc...


Maintenant que j'ai enfin découvert tes images, je me demande si t'aurais pas intérêt, au lieu de télécharger un machin aussi lourd que IE7, (aussi génial soit-il : parce qu'il faut admettre : ce Edwards est un fortiche!), à plutôt coller ton image sur un fond bleu uni de la nuance principale de celle de ton body. Bien sûr, ton body a un fonds à motifs, mais le raccord se ferait quand même pas mal (ou alors, tu fais un body à fonds uni et le tour est joué). Là, IE ne peut pas nous gêner : y'a plus de transparence à gérer (mal), y'a que une illusion de transparence, voir ci-dessous ton image recollée sur un fonds uni code #071e2c :
http://jlwebnet.free.fr/img/musiques-symphoniques2.png
Mais attention, ton image d'origine est beaucoup trop lourde, faut la réduire, là, j'ai 170Ko après un passage au png optimizer, c'est trop, t'en as une 2ème prévue qui doit faire à peu près le même poids, en plus.
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Mongo Bob a écrit :La question était : est-ce que ça ne gêne pas leur fonctionnement! Rien d'autre... Toujours l'ironie...
Ici, javascript est un "plus". C'est moche, mais c'est une limitation d'IE, et il n'y a pas d'autre moyen que ça pour le corriger :wink:
dj.dom a écrit :Au fait, il y a beaucoup de monde qui désactive le java-script ?
Environ 10%, parmi eux pas mal de monde utilisant des navigateurs comme Lynx ou peut-être aussi des lecteurs d'écran. Et puis, tant pis pour eux, tu n'y peux rien s'ils utilisent IE :wink:

dj.dom a écrit :Sinon, y'a t-il moyen de faire en sorte que IE utilise une autre couleur pour le fond des images png qu'il ne sait pas afficher ? Car sur ma page, un fond noir serait beaucoup moins génant qu'un fond gris...
Ça oui.
Dans Gimp, lorsque tu enregistre en png, tu peux cocher une case pour enregistrer la couleur de fond, et alors la couleur de fond est utilisée. Dans d'autres outils par contre, je ne sais pas :roll:


Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.5) Gecko/20060719 Firemarsupilami Firefox/1.5.0.5
dj.dom
Gecko
Messages : 88
Inscription : 22 juin 2006, 02:58

Message par dj.dom »

Dans Gimp, lorsque tu enregistre en png, tu peux cocher une case pour enregistrer la couleur de fond, et alors la couleur de fond est utilisée.
Ca veut dire que le png reste transparent mais que si un programme ne sait pas afficher la transparence il utilisera un fond contenu dans le fichier ? C'est cool. Apparement mon Photoshop n'a pas cette option... :?
Environ 10%
Je trouve ça beaucoup... Ca veut dire qu'une personne sur dix ne verra pas mon site correctement. Pourquoi ils font ça ? Par peur des virus en js et vbs ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)
Dernière modification par dj.dom le 03 août 2006, 04:43, modifié 1 fois.
dj.dom
Gecko
Messages : 88
Inscription : 22 juin 2006, 02:58

Message par dj.dom »

J'ai trouvé un moyen pour que mes graphismes prennent moins de place. Je les découpe en plusieurs images, et seuls les bords sont des png transparents, les autres sont des png 32 couleurs. Mon menu complet (images de OnMouseOver comprises) pèse désormais 333Ko contre 1,25Mo avant...
Par contre, j'ai un écart entre chaque image alors que je n'ai rien mis entre chaque <img>.
Regardez : http://dj.dom.free.fr/pro/musiques.htm
Vous pouvez me dire comment résoudre ce problème ?

Sinon, pour le sujet, je vais finalement faire comme pour mon menu. Pas de texte avec une image derriere, mais juste une image qui contient le texte, comme on m'avait suggéré au début. Je pensais que je ne pouvais pas car le texte contient des liens, mais non, il me suffit de découper en plusieurs image et d'attribuer le lien à celle qui correspond à la zone du texte. ( pourquoi n'y ai-je pas pensé dès le début ? :roll: )

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)
Humpfff
Tyrannosaurus Rex
Messages : 2451
Inscription : 05 avr. 2004, 13:23

Message par Humpfff »

comment résoudre ce problème ?
peut-être des histoires de padding et de margin à mettre à zéro. (m'enfin, je ne suis pas une référence en CSS.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.5) Gecko/20060731 Ubuntu/dapper-security Firefox/1.5.0.5
dj.dom
Gecko
Messages : 88
Inscription : 22 juin 2006, 02:58

Message par dj.dom »

Non apparement ce n'est pas ça, j'ai mis padding et margin à 0 et ça n'a rien changé. :?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)
Humpfff
Tyrannosaurus Rex
Messages : 2451
Inscription : 05 avr. 2004, 13:23

Message par Humpfff »

mouais t'es sûr parce que les CSS ça tient parfois à quelques subtilités selon que ton élément est de type bloc ou pas, etc ...
m'enfin, je m'arrête là car ça me dépasse.
par contre fait attention à ne pasparler de mêmes choses sur différents sujets car on y risque de s'y perdre :wink:

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.5) Gecko/20060731 Ubuntu/dapper-security Firefox/1.5.0.5
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Message par Asumbaa »

Salut,

Pour les espaces, tout simplement n'en mets pas dans le code source (au moins pas de sauts de ligne, et sans doute pas d'espaces pour IE)

Mais pour la zone dédiée au préchargement des images :

Code : Tout sélectionner

<div width: 0px; height: 0px;>
Il faut te décider entre HTML et CSS :wink:

Code : Tout sélectionner

<div style="width: 0px; height: 0px;">
ou

Code : Tout sélectionner

<div width="0" height="0">
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6
dj.dom
Gecko
Messages : 88
Inscription : 22 juin 2006, 02:58

Message par dj.dom »

Ca y'est, j'ai réglé le probleme des espaces entre mes images. Dans un soucis de lisibilité, je sautais des lignes entre mes <img>. Je les ai tous collé bout à bout et ça fonctionne ! C'est illisible mais tand pis.


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Ahrefs [Bot] et 3 invités