Transformer du texte en image

[Savagnin]

Bonjour, bonsoir...

Sur mon site que je suis en train de faire avec GoLive, j'ai 2 blocs textes (sans liens)... Pour éviter d'être embêté par des histoires de compatibilité, d'affichage et de CSS, est-ce que je peux en faire des blocs images ? Cela me semblerait plus simple, non ?

Merci d'avance !

 

[kaviar]

Ce ne sera pas forcément plus simple mais ce qui est sur c'est que cela va alourdir ta page et en augmenter le temps de chargement.

 

[molgow]

L'utilisation d'images pour du texte peut se justifier par exemple pour un titre. Autrement, si c'est pour un bloc de texte, ce n'est vraiment pas une bonne idée. Il faut se demander pourquoi tu voudrais faire ça ?
- une police d'écriture spéciale ? mauvaise idée, il y a des polices de bases et elles sont là pour être utilisées. L'utilisation d'une autre police n'apporte rarement quelque chose. C'est souvent plus difficile de lire (ex.: police de type "script", etc.)
- pour faciliter la présentation ? euh vraiment une mauvaise idée !! avec une telle logique, pourquoi ne pas construire ses pages web sur Illustrator et faire 1 page - 1 image... :rolleyes:
Pense également que dans tous les cas, l'utilisation d'une image empêche l'utilisateur d'agrandir le texte. Beaucoup de gens souffrent de problèmes de vues, faibles ou importants, nécessitant d'augmenter la taille du texte.

 

[Savagnin]

Ben, en fait, je pose la question parce que j'ai créé une CSS pour le texte dont je vous parle avec 2 styles différents ("h1" et "h2" comme ils disent...). Dans Safari ,dans Firefox, dans IE, dans Netscape sous Mac, pas de souçis, mais - évidemment - c'est quand je regarde mon site sur PC (Internet Explorer+windows 98) que le texte prends plus de place que prévu et chasse mes blocs en bas...
Alors, je cherche comment résoudre ce problème...

Voilà voilà...

 

[heliotrope]

Salut,

je rejoins l'opinion de molgow et kaviar.
Et je rajouterai que substituer des images a du texte detourne le web de son utilisation primaire qui est de diffuser de l'information indexee. Une image ne sera pas indexe par les moteurs de recherche (du moins pas le contenu) ce qui n'est pas sans desagrement.

Sinon si tu y tiens vraiment, il y a d'autres moyens que de recourir a une image pour utiliser une police particuliere. tu peux utiliser flash et incorporer les polices de ton choix pour que celles-ci s'affichent meme si elles sont absente du systeme du visiteur.

p.s: desole pour les caracteres accentues mais clavier qwerty

edit: tu as poste entre temps
pour controler la taille d'affichage tu peux pour tes titres remplacer le texte par une image sans nuire a l'indexation

ex:
/*css
h1.titre1 {
width:Npx;
height:Npx;
background: url(monimagetitre1Bienvenueparminous.gif) no-repeat top left;
}

h1.titre1 span{
display:none;
}
/*html

<h1 classe="titre1"><span>Bienvenue parmi nous</span></h1>

 

[fissunix]

c'est quand je regarde mon site sur PC (Internet Explorer+windows 98) que le texte prends plus de place que prévu et chasse mes blocs en bas...

Hello,

Peux-tu donner le code de ta CSS pour qu'on puisse regarder ? As-tu essayé d'utiliser les barres de défilement avec des "overflow" (si cela est possible dans ton cas) ?

A+

 

[Savagnin]

Hello aussi...

Le code :

body {}
p {}
td {}
h1 { color: white; font-size: 0.7em; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 1em; text-align: left }
h2 { color: black; font-size: 0.6em; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 1.2em; text-align: left; margin: 0 0 0 5%; padding: 0 }


Je précise que c'est encore du chinois pour moi, puisque c'est GoLive qui fait tout le boulot ! (d'où coincé quand problème )

Merci !

 

[heliotrope]

Le mieux serait de poster l'url de ta page pour que l'on puisse lire le code source en entier html et css

 

[fredmac75]

Pour aller dans le sens de ce qui vient d'être dit, il est une raison qui me semble plus fondamentale encore, c'est le référencement.
Même si avec les CSS on peut avoir le beurre et l'argent du beurre...

 

[Savagnin]

aaaaah, bien dormi moi...
Bon, reprenons :
-d'abord, merci de vous soucier de mes souçis...
- l'url de la coupable : http://homepage.mac.com/franck.bas/pages/cursus.html

Hésitez-pas, si ça vous tente, à faire le tour du propriétaire, c'est le premier site que je "fabrique", et il y a peut-être des trucs à faire frémir un Webmaster !

A plus tard !

 

[Niconemo]

C'est normal que ça n'apparaisse pas pareil dans tous les navigateurs : comme tu ne définis pas très précisément des éléments comme le corps de texte dans ta CSS, les vavigateurs utilisent leur CSS par défaut (qui n'est pas la même pour tous). Ça se ressent généralement cruellement sur les tites (h1, h2, etc.) et aussi sur les espaces (margin) entre les paragraphes, les titres...)

Je rejoins les autres sur le fait que les images sont à bannir s'il s'agit simplement d'éluder des problèmes de mise en form du texte.

Edit:

Je vois que tu utilises l'em comme unité. L'em est une unité relative très bien à utiliser mais dure à maîtriser pour qui débute avec les feuilles de style en cascade. Tes h2 (titres 2) sont paramétrés à 0.6 em, c'est à dire 60%... mais 60% de quoi ?

Pour l'instant je te conseille d'utiliser les pixels (px) comme unité pour te faire la main. Tu reviendras aux em plus tard.


(le design est sympa au fait... tu aurais même pu tout faire en CSS)

 

[Savagnin]

Merci pour tout ces renseignements... Je m'y remet dès ce soir, notamment changer les em par des px pour voir...

C'est normal que ça n'apparaisse pas pareil dans tous les navigateurs : comme tu ne définis pas très précisément des éléments comme le corps de texte dans ta CSS, les vavigateurs utilisent leur CSS par défaut (qui n'est pas la même pour tous). Ça se ressent généralement cruellement sur les tites (h1, h2, etc.) et aussi sur les espaces (margin) entre les paragraphes, les titres...)

C'est compliqué de définir le corps du texte de ma CSS pour pas que ça bouge ????

(le design est sympa au fait... tu aurais même pu tout faire en CSS)

Peut-être mais j'ai déja du mal avec les CSS pour du texte, alors pour un site en entier !...

Merci en tous cas !

 

[Niconemo]

C'est compliqué de définir le corps du texte de ma CSS pour pas que ça bouge ?

Non c'est très simple avec les unités en px. Tout s'affichera pareil dans tous les navigateurs.
Il faut juste bien préciser la taille pour la balise body (qui gèrera le texte de base pour l'ensemble de la page) et pour tous styles que tu utilises (h1, h2, etc.). Le corps de texte se gère avec font-size

Ça c'est pour le corps de texte. Après il peu ya avoir des différences dans l'espace avant et après les syles. Si ça te paraît gênant, ça se règle en paramétrant le style avec margin-top et margin-bottom.

C'est comme pour le corps de texte, une fois paramétré, ça devrait s'afficher pareil sur tout navigateur digne de ce nom (y compris Explorer qui est limitequestion dignité )

Peut-être mais j'ai déja du mal avec les CSS pour du texte, alors pour un site en entier !...

C'est un des avantages des CSS : l'apprentissage peut être progressif. Commencer par le texte c'est très bien.

 

[Savagnin]

Ca veut dire que dans ma CSS qui suit :

body {}
p {}
td {}
h1 { color: white; font-size: 0.7em; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 1em; text-align: left }
h2 { color: black; font-size: 0.6em; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 1.2em; text-align: left; margin: 0 0 0 5%; padding: 0 }

je remplace après "font-size :" mes em par XXpx dans "h1" et "h2" en fonction de la taille que je souhaite...

Pour les espaces, "margin-top" et "margin-bottom", il faut que je les saisisse dans ma CSS avec l'unité que j'aurai choisi du type "margin-top: XXpx;" ? A la place de "margin : 0 0 0 5%" ?

Quand tu dis qu'il faut préciser la taille pour la balise "body", ça veut dire taper quelque chose dans "body {}" ? Si oui, quoi ?

Tant-pis, je vais passer pour un débile, mais IL FAUT QUE JE SACHE !!!

 

[heliotrope]

salut,

avant tout il va falloir que tu nettoies ton code car tu cumules css et balises pour la mise en forme

par exemple dans la page cursus :
<h1><font face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">Mars 1995 - Novembre 2005</font></h1>
il te faut conserver uniquement
<h1>Mars 1995 - Novembre 2005</h1>
puisque ta css decrit deja la font-family a utiliser

pour la balise body tu peux lui donner les attributs de ton choix mais par exemple tu decides de definir des attributs de texte on aura par exemple

body{
font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
font-size:12px;
color:white
}

sinon comme le fait justement remarquer molgow tu gagnerais en simplicite en ne recourant qu'aux css pour la mise en forme de ton site. L'emploi des css est un apprentissage assez lomg mais comporte de nombreux avantages dont la lisisbilite du code et la separation nette entre les informations et leur presentation.

Par exemple pour tanavigation tu aurais pu utiliser une liste (balise <ul><li></li></ul>) ce qui d'un point de vue semantique est plus en rapport avec l'element que tu decris. Ensuite avec les css tu decrivais leur mise en forme.

Mais pour un premier site c'est deja pas mal.

Peut etre pour la v2

 

[Savagnin]

Salut aussi!

body{
font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
font-size:12px; color:white}

Cette balise, elle sert à quoi en fait ?
Je demande ça parce que, pour le moment, dans le code source de ma CSS, je n'ai que "body {}", et Niconemo dit qu'il faut bien préciser la taille de cette balise...
Quand je tape tout ce que tu me dis dans la balise body, pour tester ce que ça fait, rien ne se passe, alors, je pose la question : à quoi sert-elle ?

En quoi elle va influencer l'affichage de ma page ?

En tous, merci déja à vous !!! J'ai fait des essai avec les "px" au lieu des "em", j'ai mis des "margin-top" et "margin-bottom" (à la place de "margin: 0 0 0 5%", j'ai bien fait ????)... Il n'y a plus que cette balise body qui me pose question

PS. Compris heliotrope, je ferai un peu de ménage aussi !

 

[heliotrope]

Une page html se decompose en 2 parties head et body.

la balise body correspond au conteneur "principal" de ce que tu donnes a voir a l'internaute. En gros, cela correspond a ce qui sera interprete dans la fenetre du navigateur pour l'affichage.

Si tu definis des attributs texte dans cette balise ils peuvent etre (a verifier car je suis pas sur a 100%) herites par les objets contenus dans le body.

 

[Niconemo]

En fait je conseille de préciser quelque chose comme :
font-size:11px;
dans la balise body pour déterminer le cops de texte de base (qui sera hérité par les paragraphes, etc.)

Ce n'est pas absolument nécessaire mais ça facilite le boulot.

Pour le margin :

margin: 0 0 0 5%;

revient au même que :

margin-top:0;
margin-right:0;
margin-bottom:0;
margin-left:5%;

c'est deux façons d'écrire la même chose

 

[Savagnin]

Merci, merci, merci !
Je fais tout ça et je vous tiens au courant !

A bientôt (sûrement... )

 

[Savagnin]

Ca Marche !!! Ca Marche !!!
J'ai tout fait ce que vous m'aviez dit, tout, et ça marche !!!

Je viens de le tester sous pc et mon texte reste bien là où je le voulais !

Merci encore !

J'ai plus qu'un petit souçi (une histoire de fou ), j'essaye de le régler tout seul comme un grand, et si je n'y arrive pas, je vous embêterai !

A la prochaine !