Problème de caractères sur iWeb

[fimflo]

Je reviens sur mon nouveau site... (http://www.artiflo.ch) avec lequel j'ai un souci en page d'accueil. Selon le navigateur utilisé, les caractères du texte en dessous du nom n'apparaissent pas comme je le souhaiterais. Sur Safari pas de problème (tiens donc !) alors qu'avec Firefox par exemple les caractères apparaissent plus étroits (normalement le texte est justifié sous le nom Artiflo). Le caractère utilisé n'est pas reconnu par tous les navigateurs (Gulim), raison pour laquelle je l'ai déjà transformé en image dans tout le site (merci Koeklin). Et ce n'est qu'à cet endroit que cela ne joue pas. J'ai essayé à plusieurs reprises de modifier la taille de l'image, sans succès. Merci pour votre éclairage et bonne journée !
Florence

 

[AurelienS]

Bonjour,
je vois les mêmes caractères, alignés pareil, dans Safari et Chrome.
Mais en plus quand je regarde en détail, les caractères dont vous parlez (sous Artiflo) sont juste une grande image : ils ne devraient pas apparaître différemment en fonction du navigateur !

 

[fimflo]

Effectivement, l'image ne devrait pas être visible différemment selon les navigateurs. Avez-vous essayé d'accéder au site via Firefox ?

 

[Johannès]

<img src="[URL="http://forums.macg.co/view-source:http://www.artiflo.ch/Artiflo/Accueil_files/shapeimage_2.png"]Accueil_files/shapeimage_2.png[/URL]" alt="Créations  en argile polymère Vente directe   Marchés  Ateliers créatifs" style="height: 372px; left: 0px; margin-left: 5px; margin-top: 12px; position: absolute; top: 0px; width: 343px; " />

je décompose pour bien voir le style appliqué à cette image

<img 
src="Accueil_files/shapeimage_2.png" 
alt="Créations  en argile polymère Vente directe   Marchés  Ateliers créatifs"
style="
height: 372px;  width: 343px;
left: 0px; margin-left: 5px; 
margin-top: 12px;  top: 0px;
position: absolute;" 
/>

contradictions :
marge left 0 ou 5px ?
marge top 0 ou 12px ?
comment il fait le navigateur ??? cela vient peut-être de là

left: 0px; margin-left: 5px; 
margin-top: 12px;  top: 0px;

supprime donc left:0 et top:0 pour voir

 

[Five 4 U]

Il y a une différence entre top et margin-top, l'un est la position de l'élément, l'autre l'habillage du texte autour de celui-ci. Le navigateur saura faire la différence entre les deux.

Pour faire un test, remplacer top par margin-top ici :
http://w3schools.com/css/tryit.asp?filename=trycss_position_top

 

[fimflo]

"supprime donc left:0 et top:0 pour voir" : merci pour le conseil, par contre je ne trouve pas à quel endroit cela se trouve dans l'inspecteur...
dans le message reçu par mail,tu notes aussi "et dans l'attribut alt de l'image enlève les
qui ne correspond à rien de connu ce sera plus propre" : j'enlève quoi, et par quel chemin encore une fois ? Merci !

 

[Five 4 U]

Oublie le conseil de supprimer ces lignes-là, ce n'est pas quelque chose qui est possible avec iWeb

 

[fimflo]

Five4U : OK. Il me semblait bien mais merci quand-même...

 

[Johannès]

je ne connais pas iweb mais il me semblait qu'on pouvait éditer le code source ou les css quand même.


oui, top est margin-top ne sont pas vraiment la même chose mais pour ma part je ne l'utilise jamais en même temps car c'est source de conflit suivant les navigateurs.

- "top" positionne un élément un élément avec une utilisation de la propriété "position" par rapport à l'élément parent
- "margin-top" positionne un élément par rapport à la distance externe de l'élément parent.

Maintenant si on ne teste pas en commençant par là, d'où viens la différence ???
​

---------- Nouveau message ajouté à 13h29 ---------- Le message précédent a été envoyé à 13h27 ----------

Il y a une différence entre top et margin-top, l'un est la position de l'élément, l'autre l'habillage du texte autour de celui-ci. Le navigateur saura faire la différence entre les deux.

Pour faire un test, remplacer top par margin-top ici :
http://w3schools.com/css/tryit.asp?filename=trycss_position_top

oui mais si tu enlèves la position "absolute"