all html : Le portail des webmaster

liste des forums liste des discussions Participer à la discussion

Message publié le mardi 29 avril 2008 à 14 h 42 par djodjolyon.

Bonjour,
Je viens de faire un modèle html pour un email mais j'ai toujours un problème d'affichage. Le modèle s'affiche différemment dans firefox et internet explorer.
Bien que ça sera utilisé pour des email j'imagine qu'il risque quand même d'y avoir des problèmes...
Le problème viens du texte avec "photographe...." et mes contacts. Je n'ai pas réussi à le positionner comme je voulais (j'ai mis des espaces et un point de la couleur du fond pour décaler le texte du bord)! Y a-t-il une solution pour qu'il y ait des marges entre le bord de ma cellule et le texte?
Je pense que si c'est possible, ça résoudra mon problème.
Sinon comment résoudre ce problème s'il n'ai pas possible de mettre des marges?

Voila le lien : http://howelljonathan.free.fr/Mail/email_francais.html

Merci d'avance

• participer

Message publié le mardi 29 avril 2008 à 20 h 11 par elizabeth. les pieds sur terre et la tête dans les étoiles

il y a très souvent des problèmes d'interprétation entre explorer et firefox....
ton lien est cassé, je n'ai pas pu le suivre.

pour faire ma newsletter, ou un e-mail avec une mise en page, j'ai installé fck-editor.
c'est gratuit et simple à installer.
l'avantage, c'est que t'as l'impression d'avoir word devant toi.
tu peux faire des tableaux, mettre des styles, des photos, etc.
c'est très bien fait.

maintenant, pour t'aider sur ton code tel qu'il est aujourd'hui, ça serait bien que tu vérifies le lien...

@ +

p'tite fée

• participer

Message publié le mardi 29 avril 2008 à 21 h 48 par djodjolyon.

Merci p'tite fée...
Désolé pour le lien. J'ai essayé de bidouiller dans la journée pour trouver la solution... Du coup ça il ne fonctionnait plus. C'était normal.
Voila le nouveau lien : http://howelljonathan.free.fr/Forum/email_francais.html

J'ai réussi à ce que l'affichage soit correct sur firefox mais il ne l'est toujours pas sur ie!!!

• participer

Message publié le mercredi 30 avril 2008 à 13 h 16 par Dr_von_scott.

Salut,

Malheureusement, dans l'etat, ta page ne pourras jamais avoir le meme rendu sur IE et Firefox.

1 - Tu utilise des attributs de balises qui sont encore supportées par IE mais plus valides.

dans tes lignes <tr> et <td>
- background
- valign
- align
- heignt
- bgcolor

Tu peux toujours utiliser ces attributs, mais en css. Tu peux donc les placer dans un attribut style=

Ce qui donne pour cette ligne par exemple
<td><table width="679" border="0" align="center" cellpadding="0" cellspacing="0">

<td><table style="width: 679px; border: 0px; text-align:center;" cellpadding="0" cellspacing="0">

la ligne du dessous devient quant a elle
<tr background="http://howelljonathan.free.fr/Forum/bandeau-email-2.jpg">

<tr style="background: url("http://howelljonathan.free.fr/Forum/bandeau-email-2.jpg");">

2 -
Pourquoi deux <span> pour le meme paragraphe ?? Lequel le navigateur doit'il prendre ?
<span class="Style26 Style42"><span class="Style43">Jonathan Howell / Photographe indépendant</span></span>

<span class="Style26 Style42 Style43">Jonathan Howell / Photographe indépendant</span>

Le Style26 n'existe pas
Style42 => color: #E0DFE3;
Style43 => color: #FEFEFE;
Quel couleur doit'il choisir ??

Une fois que ta page sera valide, tu auras deja beaucoup moins de soucis de compatibilité.

• participer

Message publié le mercredi 30 avril 2008 à 19 h 45 par elizabeth. les pieds sur terre et la tête dans les étoiles

bon, ben tu m'as grillée, Dr_von_scott !!
bises !

p'tite fée

• participer

Message publié le mercredi 30 avril 2008 à 20 h 58 par djodjolyon.

Re bonjour...
J'ai bien progresser cet aprem en refaisant tout le code! J'ai appris pas mal de choses sur les css, etc. Quel galère quand même :-)
Merci pour tes précieuses indication Dr von scott.
J'ai corrigé tout ce que tu m'a dit il me semble!
Est-ce que vous pouvez rejeter un oeil dessus s'il vous plait?
J'ai fait pas mal de ménage sur la page. Ca sera certainement plus simple maintenant!

P'tite fée, je suis allé voir fck-editor. Je préfère bosser sur dreamwaver pour le moment. Je le connait un petit peu donc ça évite de tout recommencer à zéro. Merci quand même pour l'info. Ca pourra peut être servir pour plus tard


J'ai quelques questions à vous poser :
1) Je bosse avec Dreamwaver. J'ai travaillé en mode création au départ et c'est donc lui qui m'a édité le code dont les "span class" en double etc.
"Tu utilise des attributs de balises qui sont encore supportées par IE mais plus valides."
Comment parametrer le logiciel pour qu'il mette des style css comme j'ai maintenant? C'est possible?
Parce que je veux bien faire l'effort de comprendre le code mais pas de le connaitre sur le bout des doigt!!!! Je préfère bosser en mode création! C'est plus joli les images que les lignes, non?

2) Pour ce qui est de centrer un tableau en css, j'ai pas réussi!
En HTML ça donne ça : <table align="center"> et l'quivalent en css que j'ai trouvé sur le net est <style="text-align:center">
Seulement ça ne fonctionne pas puisque c'est pas du texte :-(
C'est quoi la commande?

3) Par rapport aux style css, j'ai vu qu'il y avait des espaces placés différemment dans la syntaxe des commandes
exemple : "font-style:italic" n'a pas d'espace, "text-align : center" à un espace avant et un espace après les deux points
Est ce qu'il est important de respecter ceci ou pas?
Je n'ai pas rencontré de problème en enlevant les espace mais on ne sais jamais...

4) 4ème et dernière question, comment régler le problème d'affichage entre ie et ff?
Malgré les modifications du code, j'ai toujours le même problème...

• participer

Message publié le jeudi 01 mai 2008 à 15 h 33 par djodjolyon.

Bonjour,
Journée qui commence pas trop mal...
J'ai changé le code de mon email encore une fois. J'ai enlevé la ligne de mon tableau pour mettre des balises div à la place.
Je suis allé sur le site du validateur W3C et : zéro erreurs. Petit miracle. Hier j'avais 15 erreurs.

Par contre firefox refuse toujours de m'afficher la page correctement (le texte avec mes contacts est censé se trouver juste en dessous des photos et firefox le met au centre.
C'est pas dramatique mais je serais plus que content si vous pouviez m'aider à y arriver!!
Je vous remet donc le lien (il est loin maintenant) :
http://howelljonathan.free.fr/Forum/email_francais.html

Merci encore pour l'aide que vous m'avez déjà apporté.

• participer

Message publié le vendredi 02 mai 2008 à 13 h 47 par Dr_von_scott.

Salut,

Ah, ca fait plaisir a voir.

Je vois que tu as bien appliqué les conseils et que tu as recherché par toi meme.
Du coup ton code est vraiment plus allégé, plus simple à maintenir.
Et meme qu'il est structuré avec des espaces pour le rendre lisible.

Allez en 2-3 petites choses à regarder :

<table style="width:100%; border:0px; background-color:#000000; background-color:#000000;" cellspacing="0">

Tu as deux fois background-color supprime en un.
PS : background-color est parfaitement correct mais tu peux utiliser background tout court
background: #000000; affichera une couleur
background: yellow; affichera une couleur
background: url('http://monurl'); affichera une image

Perso, du coup j'ai preféré ne garder que background tout court.

<table style="width:679px; border:0px;" align="center" cellpadding="0" cellspacing="0">

Allez je te laisse deviner ce qui n'est pas parfait dans cette ligne :p :p
Si tu trouve, tu pourras meme passer ta page en XHTML 1.0 Strict

Par contre pour ton probleme, moi je ne l'ai pas.
Les contacts sont bien alignés à droite sous IE et Firefox

• participer

Message publié le samedi 03 mai 2008 à 13 h 56 par Dr_von_scott.

Re,

J'ai oublié ta question sur les <table>, pour centrer une table, il faut jouer avec la marge

<table style="margin-left: auto; margin-right: auto;">

• participer

Message publié le samedi 17 mai 2008 à 21 h 34 par djodjolyon.

J'ai trouvé la solution pour le décalage!!! Sur un autre forum. J'ai un peu triché :-)
il fallait rajouter margin-top: 0; dans cette ligne
<div><p style="padding-top:130px; padding-right:10px; margin-top: 0;"><span class="Contact_1">Jonathan Howell / Photographe indépendant</span><br />

• participer

Message publié le dimanche 18 mai 2008 à 02 h 32 par djodjolyon.

Je suis passé en xhtml 1.0 strict!
Tout est résolu mainenant. Merci Dr von scott
Merci elizabeth aussi...

• participer

Message publié le dimanche 18 mai 2008 à 03 h 20 par djodjolyon.

Bon je remet le lien pour que vous puissiez voir le résultat!!!
http://howelljonathan.free.fr/Forum/email_francais.html

et les captures d'écrans
Capture IE
http://howelljonathan.free.fr/Forum/mail_IE.jpg

Capture Firefox
http://howelljonathan.free.fr/Forum/mail_FF.jpg

Ha on peut pas mettre d'image directement dans le post...
Tant pis!

Bonne nuit.
A bientôt pour de nouvelles aventures avec ces css... et ce xhtml!!!

• participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.