Pages :
Salut, Smiley smile

tjrs sur cette satanée newsletter, j'ai qu' un fond d'un bloc et je l'ai hebergé.
Une chose que je ne peux plus remettre en question c'est ma construction: " mes directives sont : ya moyen de s'en sortir va de l'avant ne recommence rien"

J'ai donc une question: ma mise en page est par dessus ce fond ds un tableau avec cellules ds la hauteur sont fixes(mais il n'empeche que après reception quand on augmente la taille de la police a l'ecran tout se deforme mais bon), j'ai des spacer en fond de cellules.

..............Il faut que je l' heberge lui aussi?..................

J'ai l'impression qu'il y a aucune difference.

M.E.R.C.I Smiley smilie16 Smiley ecoute

<div align="center">


<html>
<head>
<title>Isletter_decoup</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16pt;
	font-style: normal;
	color: #0066CC;
	text-align: center;
	vertical-align: middle; font-weight: bold;}
	
td{font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	color: #000033;
	text-align: left;
	vertical-align: top; }

#Tableau_01{
	background-repeat: no-repeat;
	background-image: url(http://img110.imageshack.us/img110/7393/fond1pl.jpg);}
	
#Tableau_01 a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	letter-spacing: normal;
	text-align: center;
	vertical-align: sub;
	word-spacing: normal;text-decoration: none; border : 0 none inherit;}

#Tableau_01 a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	color: #FFFF00;
	letter-spacing: normal;
	text-align: center;
	vertical-align: sub;
	word-spacing: normal;text-decoration: none; border : 0 none inherit;}




</style>
</head>

<body>

<!-- ImageReady Slices (Isletter_decoup.psd) -->
<table id="Tableau_01" width="801" height="1351" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="800" height="101" colspan="10">
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="101" alt=""></td>
	</tr>
	<tr>
		<td  colspan="5" rowspan="2"><img src="http://img337.imageshack.us/img337/7947/spacer8ym.gif" alt="" width="390" height="130" border="0">
	  </td>
		<td width="380" height="47" colspan="3"><h1 align="center"></h1>
	  </td>
		<td  colspan="2" rowspan="2"><img src="http://img337.imageshack.us/img337/7947/spacer8ym.gif" width="30" height="130" alt="">
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="47" alt=""></td>
	</tr>
	<tr>
		<td width="380" height="83" colspan="3">
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="83" alt=""></td>
	</tr>
	<tr>
		<td width="205" height="334" colspan="3" rowspan="3">
	  </td>
		<td colspan="3"><img src="http://img337.imageshack.us/img337/7947/spacer8ym.gif" alt="" width="200" height="38" border="0" usemap="#Map">
	  </td>
		<td width="200" height="38" >
	  </td>
		<td width="195" height="38" colspan="3">
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="38" alt=""></td>
	</tr>
	<tr>
		<td width="595" height="96" colspan="7">
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="96" alt=""></td>
	</tr>
	<tr>
		<td width="22" height="985" rowspan="13">
	  </td>
		<td width="556" height="237"  colspan="5" rowspan="3" >
						<p>Voici le premier num&eacute;ro d&rsquo;IS Letter, la lettre &eacute;lectronique mensuelle d&rsquo;InterSyst&egrave;mes. <br>
							Ce support est destin&eacute; &agrave; vous fournir des informations concises et pertinentes sur nos logiciels et leurs &eacute;volutions.<br>
							Rappelons en effet que nous offrons la gamme la plus &eacute;tendue de solutions, architectur&eacute;es essentiellement autour d'OrthoExpert.<br>
							Nous esp&eacute;rons que ce support vous soit utile, fort de son contenu diff&eacute;rent.<br>
							<br>
							Si vous ne souhaitez plus, &agrave; l&rsquo;avenir, recevoir IS Letter, il vous suffit de nous le signaler par retour de ce mail.</p>
					</td>
		<td width="17" height="985" rowspan="13">
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="200" alt=""></td>
	</tr>
	<tr>
		<td width="65" height="785" rowspan="12">
	  </td>
		<td width="77" height="15"><a href="mailto:intersystemes@intersystemes.fr?subject=Demande de documentation sur le logiciel OrthoExpert&body=Merci de bien vouloir me faire parvenir les documents relatifs à OrthoExpert à l'adresse suivante:">
	    <div align="center">+d'infos</div><a/> 
		<td width="63" height="785" rowspan="12">
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="15" alt=""></td>
	</tr>
	<tr>
		<td width="77" height="289" rowspan="3">
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td width="556" height="71"  colspan="5">
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="71" alt=""></td>
	</tr>
	<tr>
	  <td width="556" height="237" colspan="5" rowspan="3">Vous attendiez un logiciel qui vous procure vitesse et flexibilit&eacute; ? Con&ccedil;u dans le respect et l'&eacute;coute des praticiens et de leurs &eacute;quipes, OrthoExpert est, depuis 8 ans une solution exemplaire. En effet, si, depuis notre venue sur ce march&eacute;, OrthoExpert est l&rsquo;application la plus install&eacute;e en France, c&rsquo;est bien s&ucirc;r, parce que ce logiciel permet de concevoir et d'automatiser un grand nombre de t&acirc;ches (actions, comportements, synth&egrave;ses) comme aucun autre produit du march&eacute; ne le fait &agrave; ce jour.
						
						<p>Notre souhait est de poursuivre le d&eacute;veloppement de ce puissant outil en allant toujours plus avant dans la satisfaction de vos demandes. Nous y travaillons avec acharnement, chaque jour, pour am&eacute;liorer notre offre.<br>
							Pl&eacute;biscit&eacute; par vos confr&egrave;res utilisateurs pour ses performances et son adaptabilit&eacute;, OrthoExpert devrait sans aucun doute vous s&eacute;duire. Contactez-nous pour en savoir plus.</p>
					</td>
		<td>
			<img src="images/spacer.gif" width="1" height="196" alt=""></td>
	</tr>
	<tr>
		<td width="77" height="16"><a href="mailto:intersystemes@intersystemes.fr?subject=Demande de documentation sur le logiciel OrthoExpert&body=Merci de bien vouloir me faire parvenir les documents relatifs à OrthoExpert à l'adresse suivante:">
	    <div align="center">+d'infos</div><a/> 
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td width="77" height="291" rowspan="3">
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td width="556" height="69" colspan="5">
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="69" alt=""></td>
	</tr>
	<tr>
		<td  width="556" height="237" colspan="5" rowspan="3">Quickceph, &eacute;diteur am&eacute;ricain du logiciel de c&eacute;phalom&eacute;trie, nous a choisi en d&eacute;but d'ann&eacute;e pour le repr&eacute;senter en France, dans les pays Francophones d'Europe et en Afrique du nord.<br>
						Nous sommes fiers de cette reconnaissance de notre comp&eacute;tence dans votre m&eacute;tier et nous avons la satisfaction de renforcer notre catalogue avec ce produit majeur.<br>
						Quickceph vous est ainsi propos&eacute; aux conditions habituelles de la soci&eacute;t&eacute; Quickceph, avec, si vous le d&eacute;sirez, un manuel et un support en France, en Fran&ccedil;ais.<br>
						Pour en savoir plus, n'h&eacute;sitez pas &agrave; nous contactez.</td>
		<td>
			<img src="images/spacer.gif" width="1" height="197" alt=""></td>
	</tr>
	<tr>
		<td width="77" height="15"><a href="mailto:intersystemes@intersystemes.fr?subject=Demande de documentation sur le logiciel OrthoExpert&body=Merci de bien vouloir me faire parvenir les documents relatifs à OrthoExpert à l'adresse suivante:">
	    <div align="center">+d'infos</div><a/> 
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="15" alt=""></td>
	</tr>
	<tr>
		<td width="77" height="159" rowspan="3">
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td width="556" height="100" colspan="5">
	  </td>
		<td>
			<img src="images/spacer.gif" width="1" height="100" alt=""></td>
	</tr>
	<tr>
		<td width="556" height="34" colspan="5"><img src="http://img259.imageshack.us/img259/1116/realrooll272rq.gif"></td>
		<td>
			<img src="images/spacer.gif" width="1" height="34" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="65" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="77" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="63" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="22" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="163" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="15" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="200" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="165" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html></div>


[#]
Modifié par scrabz (02 Sep 2005 - 14:39)
J'ai pas le courage de lire le code, mais voici comment je pratique pour faire cela.


Je fabrique une page xHTML / CSS représentant le gabarit de la newsletter.

tu met les styles dans le doc Xhtml pour qu'il soient présents sans le header.

Si possible conforme çà ne mange pas de pain. Ensuite je découpe le gabarit en deux parties. le header et le footer en régle générale la dernière ligne de mon header et un <div id="content"> et la première du footer </div> pour fermer la zone de contenu.

Ensuite je fais deux Subs ASP

j'ai çà dans un fichier ASP sur le serveur et toutes les images présentent dans ce template sont elles aussi sur le serveur. Dans le template remplace les chemins des images par "http://www.tonsite.com/repdesimages/nomdelimage.jpg" par exemple

après je ne sais pas comment du génère ta news, mais en ASP y'a des composants pour le mail j'ai donc une section de mon backoffice ou je peux saisir le texte de la news, sélectionner d'éventuelles groupes de destinataires. ensuite une requete SQL récupère les adresses, nom et autre de chaque utilisateurs puis génère un mail en suivant le mode ci-dessous :

header
le contenu saisi dans le back
footer

et hop çà part.

tu me suit ?

la question est de savoir avec quoi du expédie le mail
Euh... Ce ne serait pas en tableau, on repèrerait plus aisément les éléments de contenu ; ici, en y regardant un peu rapidement, on ne repère que les "spacers"... sur lesquels je ne m'étendrai pas...
Modifié par Macpom (30 Aug 2005 - 15:21)
Ernstein> Ou lala tu maitrises bien mieux que moi, en fait tu vas comprendre: tout ça :SQL xHTML et ASP connait de nom mais a part des noms bien choisis de super heros je vois pas a quoi ça sert, j'en suis vraiment pas là! Merci.

Macpom> Je t'en prie étend toi, le truc c'est que cette NL je l'ai dessiné sur illustrator alors que je ne connaisais pas internet. Il s'avere que la conception de celle ci est une grossiere erreur mais on ne m'autorise pas a faire machine arriere, directive: "demerde toi" et c'est ce que je m'efforce de faire.

Merci.
Scrabze Smiley bawling
il faut donc que tu réalise un gabarit xHTML et CSS pour que le look de ta maquette soit fonctionnelle niveau client mail...


peux tu poster un visuel ?
Ok, bon...
1° Puisque tu évoques les Super-Héros, sache que, comme Dark Wador, Illustrator t'a pourri ton code... Même s'il t'a donné un visuel.
2° Effectivement, donne nous un lien ou un visuel, on pourra mieux y voir, et peut-être t'aider à rattraper le coup.
3° Pour m'étendre un peu (mais pas beaucoup,sinon vais m'endormir), nous préférons travailler autour (ou à partir) du contenu, ça nous est plus facile, parce que ça nous semble plus logique. Ensuite, puisque tu as du contenu ET du visuel, peut-être est-il possible de rattraper le contenu et le visuel sans en passer par les tableaux (dont en plus apparaissent à chaque fois des dimensions, imbrications etc.).
Pour une extension plus appropriée sur les tableaux, plutôt que de redire ce qui existe déjà, voici un lien :
http://www.cybercodeur.net/weblog/presentations/seybold/index.html
En fait le code complet de ma newsletter est celui qui est plus haut,

l'image est là:
http://img110.imageshack.us/img110/7393/fond1pl.jpg

C'est plus la bonne mais ça reviens au même.

Vous m'epatez les amis, j'ai fait un fond ds illustrator, rajouter les visuels ds photoshop(ceux que vs ne verrez pas= emplacement blancs), et a partir de photoshop, j'ai fait un pov' jpeg. Moi newbie perturbé quand entendre illustrator bousillé mon code.?.?.?

Merci les gars.
S.
Smiley cligne Smiley cligne
perso je réfléchirais en terme de zone

upload/319-fond1pl.jpg


regarde l'image


tu va devoir faire le code toi même (mais c'est aussi pour çà que tu es la, non ? : ) )

donc le header pourrait être


<div id="header">

</div>


tu donne ensuite un style à #header

par exemple sa dimenssion, l'image de fond correspondant à ton gabarit

et tu passe au suivant.

dans ton cas il va certainement y avoir un bloc flottant...

regarde la FAQ du site si tu ne connais pas.
ok... Bon, au moins, on y voit plus clair...
Tu as un "en tête" (/header), un menu sur la gauche (apparemment), un menu en ligne au dessus du contenu, et le contenu lui même (conteneur).
<edit>De cette disposition, tu développe tes différentes "div" ou boîtes (il en existe des modèles dans la partie tutoriels du site).
Tu découpes tes images en fonction de cette disposition, elles se glisseront en "background", ou en images, selon les cas et les nécessités, en sachant que tu vas avoir "logo / titre" à coté d'une image "date / numéro de la lettre. Cette deuxième image peut être superposée à la première, en partie droite, mais sera à refaire à chaque édition...
Ca te fait le bandeau du haut.
Tu te trouves une couleur de fond qui couvrira la page quelque soit sa taille pour le reste, voir "enveloppera" le header dans des résolutions plus grandes.
(Au passage, fais attention à la résolution et à la taille d'écran que tu utilises, je soupçonne déjà quelque problèmes par là aussi, vue la taille de tes "boîtes" de menus - ou images ? ).
Ensuite, tu fais le même type de découpages pour ta partie gauche et pour tes boutons de menus. (Au passage, fais attention dans l'ordonnancement de tes dégradés, s'ils se suivent, c'est plus "visuel").
Voilà pour un début...
Modifié par Macpom (30 Aug 2005 - 16:25)
Merci,

je prend bonne note de tout ces conseils mais cette lettre part dans 1 ou 2 jrs, j'aurai pas le temps de me risquer à faire tout ça(j'ai du papier aussi).

En fait le dernier problème qui me reste est que je ne parvient pas a fixer mes tailles de cellules (surement a cause de golive qui me vire toutes les unités px du code).
Maintenant plus je comprend des choses et plus je deprime avec cette NL car c'est ni fait ni a faire, faire un fond en "dur" c'est vraiment une connerie, quand tout bouge pour x raisons et bah ya rien qui suit car c'est du dur, ducoup c'est risible et on voit plus mes boutons placés en dessous des visuels etc...
Mais la prochaine, c'est evident que je vais la reconstruire a l'aide de conseils de samaritains tels que vous. Merci

Au fait, header content div et tout le tintouin, c'est bien du positionnement je ne me trompe pas?
Parceque c'est fortement deconseillé pour les NL.
quand je te parle de header c'est le nom que je donne pour le début d'un gabarit à mon duv haut. rien à voir avec <head> d'un doc xhtml.

tu sais je crois réellement qu'il ne faut pas plus d'une demi journée pour faire un gabarit clean pour cette newsletter...


enfin c'est toi qui voit...


bon courage
Ernstein,

si je comprend bien tu veux me faire faire des div positionnées en CSS.?

C'est déconseillé, et je sais pourquoi j'ai commencé par là.
Maintenant j'ai fait l'erreur de faire un fond en dur en 1 seule image(qui est placé en bckgrnd du tableau entier), ducoup je fais un tableau dont le découpage correspond a l'emplacement des textes et autres éléments "déssinés sur le fond", c'est comme ça que je positionne mes cellules sur mon fond.

C'est ni fait ni a faire mais c'est trop tard, la lettre par demain ap.demain max., et ce n'est pas de ma decision.

J'ai tout appris tout seul, c'est a dire pas grand chose et je commençais a aimer Dream, version expirée oblige donc passage a golive et je m'arrache les cheveux.

Cela dit je vous remercie (toi et Macpomme) pour votre soutien tout au long de la journée.

Excuse la redondance: "c'est bien du positionnement de div en CSS dont tu parlais?

Merci les gars.
S.
ah mais c'est du mail, pas de la page web... Je réalise, donc...
ok... Smiley corde
Modifié par Macpom (30 Aug 2005 - 18:03)
Merci Ernstein,

chui déprimé j'avance pas d'un cachou.

Chui en train de tapper des 0,01em qui veulent plus baisser la taille du texte qui est toujours trop grande, me reste plus qu'a essayer les pourcentages.

T'as tout pigé Macpom. Et je confirm cette .X de NL part demain.

Smiley bawling J'en peu plus j'me casse...
Bonne soirée à tous
Scrabz
scrabz a écrit :

Chui en train de tapper des 0,01em qui veulent plus baisser la taille du texte qui est toujours trop grande, me reste plus qu'a essayer les pourcentages.



heu ..... ta pas une rélge en haut de page qui vient mettre la zouille ?
Salut poto!

c'est sympa de l'avoir tésté sur ton poste.

>Non le texte n'est pas trop petit, simplement hier je me suis gavé de doc. sur les polices et j'ai lu qu'il était mieux d'utiliser les em ou pourcent donc j'essayait.
De toutes façon ce point est réglé(directives...)pour moi.
Ya juste un dernier truc qui me turlupine alors je vais créer un nouveau sujet.
Merci vieux.
>On viens de m'informer, il faut renseigner ds body une taille de font et les em seront proportionnels a ça! J'essaye
S. Smiley biggrin
Modifié par scrabz (31 Aug 2005 - 10:56)
scrabz a écrit :
Il s'avere que la conception de celle ci est une grossiere erreur mais on ne m'autorise pas a faire machine arriere

Je vois quand même un gros blocage concernant cette newsletter : pour des raisons de sécurité, les images sont de plus en plus souvent bloquées par les clients mail modernes. Et là avec les images de fond et le spacer.gif j'ai bien peur que le rendu, voire la lecture, deviennent catastrophique.

Au minimum indique un lien pour pouvoir consulter la newsletter si les images (ou le html) sont désactivés.
Pages :