Déplacement vertical d'un texte et alignement tableaux

Gouffe · le 7 novembre 2011

Bonjour,

Je me suis lancé dans le html/css récemment dans le but de lancer une newsletter. Pour l'instant je ne m'en sors pas trop mal,mais je rencontre deux soucis majeurs que je n'ai pas pu régler malgré de nombreuses recherches...

Le premier : selon les navigateurs, l'alignement de l'affiche du film et du texte à droite varie en fonction des navigateurs (voir capture ci dessous). Comment régler le problème?

Deuxième soucis:

J'aimerais pouvoir décaler le texte "Espace CE: Arbre de noël vers le haut, hors les valeurs négatives ne fonctionnent pas dans un padding-top, comment faire?

Quelqu'un aurait il une idée pour m'aider? Je suis frustré d'avoir réussi à faire tout ca et rester bloquer sur ces problème somme toute assez "basiques".

Merci!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><META http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body>    <div style="font-family:'Helvetica', 'Arial'">        <table style="margin-left:auto;margin-right:auto;width:732px">            <tr>                <td>                    <table style="margin-left:auto;margin-right:auto;width:732px" cellpadding="2" cellspacing="2">                        <tbody>                            <tr>                                <td style="width:184px">                                    <table style="margin-left:auto;margin-right:auto" cellpadding="2" cellspacing="2">                                        <tbody style="font-size:12px">                                            <tr><td style="padding-bottom:10px"><img alt="Logo grac" src="http://i.imgur.com/CdnuT.png"></td></tr>                                            <tr style="color:#F03863"><td style="border-top:2px solid #aaaaaa">Groupement Régional</td></tr>                                            <tr style="color:#F03863"><td style="border-top:1px solid #aaaaaa;border-bottom:2px solid #aaaaaa">d'Actions Cinématographiques</td></tr>                                        </tbody>                                    </table>                                </td>                                <td style="width:354px"></td>                                <td style="width:180px"><img alt="Newsletter Juillet 2011 No 22" src="http://i.imgur.com/XltPW.png"></td>                            </tr>                        </tbody>                    </table>                </td>            </tr>            <tr>                <td>                    <table style="width:732px;margin:auto" cellpadding="2" cellspacing="2">                        <tbody style="font-size:12px">                            <tr>                                <td style="width:458px">                                    <table style="border-top:2px dotted lightgrey;border-bottom:2px dotted lightgrey;height:540px" cellpadding="2" cellspacing="1">                                        <tbody>                                            <tr><td><h1 style="font-size:24px">Coup de coeur</h1></td></tr>                                            <tr>                                                <td>                                                    <table>                                                        <tbody>                                                            <tr>                                                                <td>                                                                    <img src="http://i.imgur.com/0vrqy.png" width="194" height="253">                                                  </td>                                                                <td style="font-size:12px">                                                                    <p>Réalisé par Pierre Schoeller<br>                                                                   Avec Olivier Gourmet, Michel Blanc, Zabou Breitman, plus</p>                                                                   <p>Long-métrage français<br>                                                                    Genre :Drame<br>                                                                     Durée : 01h52min<br> Année de production : 2011<br>                                                                     Distributeur : Diaphana Distribution</p>                                                 <p>"<em>Parce que Pierre Schoeller s'amuse avec brio à démonter ces mécanismes, "L'Exercice de l'Etat" repose en partie sur cette sensation, si plaisante pour le spectateur, d'accéder enfin à une réalité qui lui échappe</em>." Le Monde</p>                                                                   <p><b><br>                                                                      </b>                                                                    </p>                                                                </td>                                                            </tr>                                                        </tbody>                                                    </table>                                                </td>                                            </tr>                                            <tr style="width:458px">                                                <td>                                                    <p style="text-align:justify;width:458px;font-size:12px"> Le ministre des Transports Bertrand Saint-Jean est réveillé en pleine nuit par son directeur de cabinet. Un car a basculé dans un ravin. Il y va, il n’a pas le choix. Ainsi commence l’odyssée d’un homme d’Etat dans un monde toujours plus complexe et hostile. Vitesse, lutte de pouvoirs, chaos, crise économique… Tout s’enchaîne et se percute. Une urgence chasse l’autre. A quels sacrifices les hommes sont-ils prêts ? Jusqu’où tiendront-ils, dans un Etat qui dévore ceux qui le servent ? </p>                                                    <p>                                                        <a href="

"target="_blank" style="font-style:italic;color:#ed1548;text-decoration:none;font-size:12px">Voir la bande annonce</a> </p><p> <a href="http://www.grac.asso.fr/dansnosalles2.pl?script=detail_film&id_film=4493'>http://www.grac.asso.fr/dansnosalles2.pl?script=detail_film&id_film=4493"target="_blank" style="font-style:italic;color:#ed1548;text-decoration:none;font-size:12px">Où passe ce film</a><br> </p> </td> </tr> </tbody> </table> </td> <td style="width:254px;background-color:#ebeae8;margin:0;padding:0"> <span><img src="http://i.imgur.com/S1t4s.png" alt="Agenda" style="margin-left:10px;margin-bottom:15px"></span> <table style="font-size:20px;font-weight:bold;margin:7;padding:5"> <tbody> <tr style="height:80px"> <td><img src="http://i.imgur.com/Sdq9J.png"></td> <td><a href="

"target="_blank" style="color: #F03863; text-decoration: none">Drive</a></td> </tr> <tr style="height:80px"> <td><img src="http://i.imgur.com/Sdq9J.png"></td> <td><a href="

"target="_blank" style="color: #F03863; text-decoration: none"> Tintin</a></td> </tr> <tr style="height:80px"> <td><img src="http://i.imgur.com/Sdq9J.png"></td> <td><a href="

"target="_blank" style="color: #F03863; text-decoration: none"> De bon matin</a></td> </tr> <tr style="height:80px"> <td><img src="http://i.imgur.com/Sdq9J.png"></td> <td><a href="

"target="_blank" style="color: #F03863; text-decoration: none">Les intouchables</a></td> </tr> <tr style="height:80px"> <td><img src="http://i.imgur.com/Sdq9J.png"></td> <td><a href="

" style="color:#F03863;text-decoration:none" target="_blank">Drive</a></td> </tr> </tbody> </table> <table style="background-color:white;height:15px;width:101%"> <tbody><tr><td></td></tr></tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td> <table style="border-bottom:2px lightgray dotted"> <tr> <td width="215" style="width:215px;font-size:16px"> <p><img alt="Evenement: Ciné Plein air" src="http://i.imgur.com/FZmOn.png"></p> <p style="text-align:justify; font-size:12px">L'occasion idéale pour voir ou pour revoir de grands films, à la tombée de la nuit et de profiter des longues soirées d'été...</p> <p><img src="http://i.imgur.com/RVikR.png" alt="Cinéma en plein air" align="absmiddle""></p> <p><a href="http://www.grac.asso.fr/index.pl'>http://www.grac.asso.fr/index.pl"target="_blank" style="color:#ed1548;text-decoration:none;font-size:14px"><em>Consultez vos séances!</em></a></p> </td> <td width="500" style="padding-left:40px;padding-top:0px"><h1 style="font-size:24px;top:-20px">Espace CE: Arbre de Noël</h1> <p style="text-align:justify;font-size:12px">Les salles de réseau GRAC, vous proposent d'organiser:<br> <b>une projection privée d'un film en avant première de votre choix!</b><br> Agrémentée, si vous le souhaitez, d'un goûter et de distribution de cadeaux.</p> <p><img alt="Péllicule de cinema montrant diverses affiches" src="http://i.imgur.com/ZtcO4.png"></p> <p style="color:#ed1548"> <a href="http://www.grac.asso.fr/index.pl'>http://www.grac.asso.fr/index.pl"target="_blank" style="color:#ed1548;text-decoration:none;font-size:14px"><em>Toutes les infos sur notre site internet.</em></a></p> </td> </tr> </table> </td> </tr> <tr> <td> <table> <tr> <td style="text-align:center; font-size:14px"> <p style="color:#666666"> N'hesitez pas à transmettre cette newsletter à vos proches, votre CE ou des salariés de votre entreprise. </p> <p style="color:#666666"> 24 rue Emilie Decorps – 69100 Villeurbaine – Tél : 04 78 42 78 97 – Fax : 04 78 42 79 22 <br> <a style="color:#ed1548;text-decoration:none;font-size:14px" href="mailto:Cheques-cinema@grac.asso.fr" target="_blank">Cheques-cinema@grac.asso.fr</a> – <a style="color:#ed1548;text-decoration:none;font-size:14px" href="http://www.grac.asso.fr" target="_blank"> www.grac.asso.fr</a> </p> <p style="font-size:10px"></p> </td> <td> <a href="https://www.facebook.com/pages/GRAC/274994409193641"><img alt="Facebook icon" src="http://i.imgur.com/6V1Ah.png"></a> </td> </tr> </table> </td> </tr> </table> </div> </body></html>

Shhu · le 8 novembre 2011

Salut,

Sans table c'est plus pratique :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><META http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body> <div style="font-family:Helvetica, Arial;font-size: 12px;">        <!-- Conteneur de la news -->       <div style="width:732px;margin:0 auto">               <!-- Bloc logo header -->               <div style="float:left;width:184px">                       <img style="margin-top:20px" alt="Logo grac" src="http://i.imgur.com/CdnuT.png" />                       <div style="border-top:2px solid #aaaaaa;color:#F03863;margin-top:10px">                               Groupement Régional                       </div>                       <div style="border-top:1px solid #aaaaaa;border-bottom:2px solid #aaaaaa;color:#F03863">                               d'Actions Cinématographiques                       </div>               </div>               <!-- Bloc date & numero header -->               <div style="float:right">                       <img alt="Newsletter Juillet 2011 No 22" src="http://i.imgur.com/XltPW.png" />               </div>               <div style="position:relative;overflow:hidden;clear:both">                       <!-- COUP DE COEUR -->                       <div style="border-top:2px dotted #ccc;border-bottom:2px dotted #ccc;width:458px;padding:0 5px;">                           <h1 style="font-size:24px;font-weight:normal;font-family:'Trebuchet MS', Verdana">Coup de coeur</h1>                           <img style="float:left;margin:0 5px 5px 0" src="http://i.imgur.com/0vrqy.png" width="194" height="253">                            <p>                               Réalisé par Pierre Schoeller<br />                                Avec Olivier Gourmet, Michel Blanc, Zabou Breitman, plus                           </p>                           <p>                               Long-métrage français<br />                                Genre :Drame<br />                                Durée : 01h52min<br />                                Année de production : 2011<br />                                Distributeur : Diaphana Distribution                           </p>                           <p>                               "<em>Parce que Pierre Schoeller s'amuse avec brio à démonter ces mécanismes, "L'Exercice de l'Etat" repose en partie sur cette sensation, si plaisante pour le spectateur, d'accéder enfin à une réalité qui lui échappe</em>." Le Monde                           </p>                           <p style="text-align:justify;clear:left;">                                Le ministre des Transports Bertrand Saint-Jean est réveillé en pleine nuit par son directeur de cabinet. Un car a basculé dans un ravin. Il y va, il n’a pas le choix. Ainsi commence l’odyssée d’un homme d’Etat dans un monde toujours plus complexe et hostile. Vitesse, lutte de pouvoirs, chaos, crise économique… Tout s’enchaîne et se percute. Une urgence chasse l’autre. A quels sacrifices les hommes sont-ils prêts ? Jusqu’où tiendront-ils, dans un Etat qui dévore ceux qui le servent ?                            </p>                           <p>                                <a href="

"target="_blank" style="font-style:italic;color:#ed1548;text-decoration:none;font-size:12px">Voir la bande annonce</a> </p> <p> <a href="http://www.grac.asso.fr/dansnosalles2.pl?script=detail_film&id_film=4493'>http://www.grac.asso.fr/dansnosalles2.pl?script=detail_film&id_film=4493"target="_blank" style="font-style:italic;color:#ed1548;text-decoration:none;font-size:12px">Où passe ce film</a> </p> </div>  <div style="position:absolute;top:0;right:0;width:254px;background:#ebeae8;height:100%"> <img src="http://i.imgur.com/S1t4s.png" alt="Agenda" style="margin:0 0 15px 10px;" /> <div style="line-height:41px;padding-left:20px;"> <div style="margin-bottom:10px;"> <a href="

"target="_blank" style="color: #F03863; text-decoration: none;"><img style="float:left;margin-right:10px;" src="http://i.imgur.com/Sdq9J.png"> Drive</a> </div> <div style="margin-bottom:10px;"> <a href="http://www.youtube.com/watch?v=c-Dg963lD8"target="_blank" style="color: #F03863; text-decoration: none"><img style="float:left;margin-right:10px;" src="http://i.imgur.com/Sdq9J.png"> Tintin</a> </div> <div style="margin-bottom:10px;"> <a href="

"target="_blank" style="color: #F03863; text-decoration: none"><img style="float:left;margin-right:10px;" src="http://i.imgur.com/Sdq9J.png"> De bon matin</a> </div> <div style="margin-bottom:10px;"> <a href="

"target="_blank" style="color: #F03863; text-decoration: none"><img style="float:left;margin-right:10px;" src="http://i.imgur.com/Sdq9J.png"> Les intouchables</a> </div> <div style="margin-bottom:10px;"> <a href="

"target="_blank" style="color: #F03863; text-decoration: none"><img style="float:left;margin-right:10px;" src="http://i.imgur.com/Sdq9J.png"> Drive</a> </div> </div> </div> </div>  <div>  <div style="width:215px;float:left;"> <img src="http://i.imgur.com/FZmOn.png" alt="Evenement: Ciné Plein air" /> <p style="text-align:justify;"> L'occasion idéale pour voir ou pour revoir de grands films, à latombée de la nuit et de profiter des longues soirées d'été ... </p> <div style="text-align:center"> <img src="http://i.imgur.com/RVikR.png" alt="Cinéma en plein air" /> </div> </div>  <div style="width:500px;float:right;"> <h1 style="font-size:24px;font-weight:normal;font-family:'Trebuchet MS', Verdana">Espace CE: Arbre de Noël</h1> <p style="text-align:justify;"> Les salles de réseau GRAC, vous proposent d'organiser:<br /> <b>une projection privée d'un film en avant première de votre choix!</b><br /> Agrémentée, si vous le souhaitez, d'un goûter et de distribution de cadeaux. </p> <div style="text-align:center"> <img src="http://i.imgur.com/ZtcO4.png" alt="Péllicule de cinema montrant diverses affiches" /> </div> <p style="color:#ed1548"><a href="http://www.grac.asso.fr/index.pl'>http://www.grac.asso.fr/index.pl"target="_blank" style="color:#ed1548;text-decoration:none;font-size:14px"><em>Toutes les infos sur notre site internet.</em></a></p> </div> <div style="clear:both"></div> </div>  <div style="text-align:left;border-bottom:2px dotted #ccc;border-top:2px dotted #ccc;margin:15px 0;padding:10px 0"> <a style="float:right;" href="https://www.facebook.com/pages/GRAC/274994409193641"><img alt="Facebook icon" src="http://i.imgur.com/6V1Ah.png"></a> <div> N'hesitez pas à transmettre cette newsletter à vos proches, votre CE ou des salariés de votre entreprise.<br /> 24 rue Emilie Decorps – 69100 Villeurbaine – Tél : 04 78 42 78 97 – Fax : 04 78 42 79 22<br /> <a style="color:#ed1548;text-decoration:none;font-size:14px" href="mailto:Cheques-cinema@grac.asso.fr" target="_blank">Cheques-cinema@grac.asso.fr</a> – <a style="color:#ed1548;text-decoration:none;font-size:14px" href="http://www.grac.asso.fr" target="_blank"> www.grac.asso.fr</a> </div> </div> </div></body></html>

Connexion

Déplacement vertical d'un texte et alignement tableaux

Messages recommandés

Gouffe

Lien vers le commentaire

Partager sur d’autres sites

Shhu

Lien vers le commentaire

Partager sur d’autres sites

Archivé

Naviguer

Activité