2 div séparés par un trait vertical pour siganture mail

2 div séparés par un trait vertical pour siganture mail - HTML/CSS - Programmation

Marsh Posté le 28-06-2018 à 14:50:40    

Bonjour à toutes et à tous,
 
Comme on dit quand je bloque je bloque.  Bon j'ai quand même la base pour mettre du div l'un à côté de l'autre.
 
C'est pour fait une signature mail html.
Au milieu d'un cadre css avec ombre, je voudrais deux cadres (j'utilise des div) un à gauche et l'autre à droite.
Voilà ce que j'ai fait.
 

Code :
  1. <div class="block">aaa</div>
  2. <div class="block">bbb</div>
  4. <br clear="both" />
  5. Blablablabla


 

Code :
  1. .block {
  2. float:left;
  3. width:285px;
  4. height:60px;
  5. margin-top: 25px;
  6. margin-bottom:10px;
  7. }


 
Mais je voudrais au centre de ma signature en guise de séparateur un trait vertical de la hauteur du bloc.
J'ai essayé un 'div central' avec un css différent du block mais pas de résultat valable.
 
Merci d'avance pour votre aide.
 

Reply

Marsh Posté le 28-06-2018 à 14:50:40   

Reply

Marsh Posté le 28-06-2018 à 17:59:53    

Peut-être que je ne comprends pas la question, mais pourquoi tu ne donnes pas une border-right au premier div
 
https://codepen.io/anon/pen/KerxpQ

Reply

Marsh Posté le 29-06-2018 à 12:39:34    

Bonjour David,
 
Merci pour ta réponse.   Ben si tu as tout compris.
Je sais j'ai bloqué sur le truc.
 
En fait j'étais parti sur l'idée de 3 div pour être certain que ce soit centré.
 
C'est parfait merci.  J'ai ajouté un margin-right pour que ça ne colle pas à "bbb"
 
Merci beaucoup

Reply

Marsh Posté le 30-06-2018 à 11:27:50    

Re bonjour,
 
Bon ben voilà ça va pas :(
 
Tout se passe très très bien quand je teste en mettant en ligne le fichier mais dès que je le mets dans roundcube (la société utilise ce web mail) j'ai l'impression que le css n'est pas pris en compte ou en partie.
 

Code :
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Document sans nom</title>
  7. </head>
  8. <style>
  9. /* This code is tested with latest version of Firefox and Chrome */
  10. .box {
  11.   position: relative;
  12.   width: 400px;
  13.   height: 160px;
  14.   background-color: #fff;
  15.   box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
  16.   border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
  17. margin-top: 50px;
  18. }
  19. .box:before {
  20.     position: absolute;
  21.     width: 100%;
  22.     height: 80%;
  23.     border-radius: 10px / 100px;
  24.     z-index: -1;
  25.     top: 10%;
  26.     bottom: 10%;
  27.     content: "";
  28.     box-shadow: 0 0 15px rgba(0,0,0,0.6);
  29.     }
  31. .logo {
  32.  position: absolute;
  33.  margin-top: -30px;
  34.  margin-left: 30px;
  36. }
  38. .block {
  39.  float:left;
  40.  width:180px;
  41.  margin-top: 20px;
  42.  margin-left: 10px;
  43.  margin-bottom:5px;
  44. }
  46. .block:nth-child(1) {
  47.   border-right: 1px solid;
  48.   margin-right:10px;
  50.  -webkit-border-image:
  51.   -webkit-gradient(linear, 0 100%, 0 0, from(white), to(#66b4fe)) 1 100%;
  52. }
  54. .blockdown {
  55.  float:left;
  56.  width:100%;
  57.  margin-top: -15px;
  58.  margin-left: 0px;
  60. }
  62. img {
  63.   vertical-align:middle;
  64. }
  65. .social {
  66.  margin-left: 10px;
  67.  margin-top: -5px;
  69. }
  71. li {
  72.     float: left;
  73. margin-top: 12px;
  74.  list-style-type: none;
  76. }
  78. li a {
  79.     display: block;
  80. color: aqua;
  81.     text-align: center;
  82.     padding: 8px;
  83.     text-decoration: none;
  85. }
  87. </style>
  88. <body>
  89. <div class="box">
  90. <div class="logo">
  91.  <img src="logo-dark.png" height="50" width="320">
  92. </div>
  93. <div>
  94.  <div class="block">
  95.   <p>Joe doe<br>
  96.   CTO & Co founder</p>
  97.   <p><img src="signature/images/smartphone.jpg"  height="15" width="15"/> + 00 00 0 0 0</p>
  99.  </div>
  102.  <div class="block">
  103.  <p align="right">Joe doe<br>
  104.   CTO & Co founder</p>
  105.   <p align="right"><img src="signature/images/smartphone.jpg"  height="15" width="15"/> + 0 00 0 0 0</p>
  106.  </div>
  107. </div>
  109. <div>
  110.  <div class="blockdown">
  111.  <p align="center">
  112.  <span id="twitterIcon"><a href="#"><img src="https://s3.amazonaws.com/rkjha/signature-maker/icons/twitter_circle_color-20.png" width="20px" height="20px" title="Twitter"></a></span>
  113.  <span id="facebookIcon"><a href="#"><img src="https://s3.amazonaws.com/rkjha/signature-maker/icons/facebook_circle_color-20.png" width="20px" height="20px" title="Facebook"></a></span>
  114.  <span id="gplusIcon"><a href="#"><img src="https://s3.amazonaws.com/rkjha/signature-maker/icons/google_circle_color-20.png" width="20px" height="20px" title="Google"></a></span>
  115.  <span id="linkedinIcon"><a href="#"><img src="https://s3.amazonaws.com/rkjha/signature-maker/icons/linkedin_circle_color-20.png" width="20px" height="20px" title="Linkedin"></a></span>
  116.  <span id="instagramIcon"><a href="#"><img src="https://s3.amazonaws.com/rkjha/signature-maker/icons/instagram_circle_color-20.png" width="20px" height="20px" title="Instagram"></a></span>
  117.  <span id="dribbleIcon"><a href="#"><img src="https://s3.amazonaws.com/rkjha/signature-maker/icons/dribbble_circle_color-20.png" width="20px" height="20px" title="Dribbble"></a></span>
  118.  <span id="youtubeIcon"><a href="#"><img src="https://s3.amazonaws.com/rkjha/signature-maker/icons/youtube_circle_color-20.png" width="20px" height="20px" title="Youtube"></a></span>
  119.  <span id="vimeoIcon"><a href="#"><img src="https://s3.amazonaws.com/rkjha/signature-maker/icons/vimeo_circle_color-20.png" width="20px" height="20px" title="Vimeo"></a></span>
  120.  <span id="githubIcon"><a href="#"><img src="https://s3.amazonaws.com/rkjha/signature-maker/icons/github_circle_black-20.png" width="20px" height="20px" title="Github"></a></span>
  121.  <span id="blogIcon"><a href="#"><img src="https://s3.amazonaws.com/rkjha/signature-maker/icons/wordpress_circle_color-20.png" width="20px" height="20px" title="Wordpress"></a></span></p>
  122.  </div>
  125. </div>
  126. </div>
  127. </body>
  128. </html>


 
Il me transforme tout ce code en  
 

Code :
  1. <div class="box">
  2. <div class="logo"><img src="logo-dark.png" width="320" height="50" /></div>
  3. <div>
  4. <div class="block">
  5. <p>Joe doe<br /> CTO &amp; Co founder</p>
  6. <p><img src="signature/images/smartphone.jpg" width="15" height="15" /> + 00 00 0 0 0</p>
  7. </div>
  8. <div class="block">
  9. <p align="right">Joe doe<br /> CTO &amp; Co founder</p>
  10. <p align="right"><img src="signature/images/smartphone.jpg" width="15" height="15" /> + 0 00 0 0 0</p>
  11. </div>
  12. </div>
  13. <div>
  14. <div class="blockdown">
  15. <p align="center"><span id="twitterIcon"><a href="#"><img title="Twitter" src="https://s3.amazonaws.com/rkjha/signature-maker/icons/twitter_circle_color-20.png" width="20px" height="20px" /></a></span> <span id="facebookIcon"><a href="#"><img title="Facebook" src="https://s3.amazonaws.com/rkjha/signature-maker/icons/facebook_circle_color-20.png" width="20px" height="20px" /></a></span> <span id="gplusIcon"><a href="#"><img title="Google" src="https://s3.amazonaws.com/rkjha/signature-maker/icons/google_circle_color-20.png" width="20px" height="20px" /></a></span> <span id="linkedinIcon"><a href="#"><img title="Linkedin" src="https://s3.amazonaws.com/rkjha/signature-maker/icons/linkedin_circle_color-20.png" width="20px" height="20px" /></a></span> <span id="instagramIcon"><a href="#"><img title="Instagram" src="https://s3.amazonaws.com/rkjha/signature-maker/icons/instagram_circle_color-20.png" width="20px" height="20px" /></a></span> <span id="dribbleIcon"><a href="#"><img title="Dribbble" src="https://s3.amazonaws.com/rkjha/signature-maker/icons/dribbble_circle_color-20.png" width="20px" height="20px" /></a></span> <span id="youtubeIcon"><a href="#"><img title="Youtube" src="https://s3.amazonaws.com/rkjha/signature-maker/icons/youtube_circle_color-20.png" width="20px" height="20px" /></a></span> <span id="vimeoIcon"><a href="#"><img title="Vimeo" src="https://s3.amazonaws.com/rkjha/signature-maker/icons/vimeo_circle_color-20.png" width="20px" height="20px" /></a></span> <span id="githubIcon"><a href="#"><img title="Github" src="https://s3.amazonaws.com/rkjha/signature-maker/icons/github_circle_black-20.png" width="20px" height="20px" /></a></span> <span id="blogIcon"><a href="#"><img title="Wordpress" src="https://s3.amazonaws.com/rkjha/signature-maker/icons/wordpress_circle_color-20.png" width="20px" height="20px" /></a></span></p>
  16. </div>
  17. </div>
  18. </div>


 
Avez vous une idée comment résoudre ce problème ?  Et du coup je n'ai pas l'effet d'ombre du cadre.  Bref j'ai rien en mise en page.
 
Merci d'avance


Message édité par charliedaps le 30-06-2018 à 11:30:08
Reply

Marsh Posté le 01-07-2018 à 00:57:51    

J'ai trouvé +/- la solution excepté ma fameuse séparation. (border right comme conseillé par David)
 

Code :
  1. <div style="float:left;width:180px;margin-top: 20px;margin-left: 10px;margin-bottom:5px; :nth-child(1) border-right: 1px solid;margin-right:10px;-webkit-border-image:  -webkit-gradient(linear, 0 100%, 0 0, from(white), to(#66b4fe)) 1 100%;">
  2.   <p>John Doe<br>
  3.   CTO & Co founder</p>
  4.   <p><img style="vertical-align:middle;" src="signature/images/smartphone.jpg"  height="15" width="15"/> + 00 0 00 00 </p>
  6.  </div>


 
Je suppose que c'est cette partie qui n'est pas prise en compte
 

Code :
  1. :nth-child(1) border-right: 1px solid;margin-right:10px;-webkit-border-image:  -webkit-gradient(linear, 0 100%, 0 0, from(white), to(#66b4fe)) 1 100%;


 
Comment puis je faire ?
 
Merci pour votre aide


Message édité par charliedaps le 01-07-2018 à 00:59:48
Reply

Marsh Posté le 02-07-2018 à 14:29:45    

Malheureusement les css dans le client Mail, que ce soit les différents Webmails ou Outlook /Thunderbird / etc., n'est souvnet que partiellement pris en charge (ca pourra être joli sur ton Roundcube, mais ton destinataire qui le verra avec un autre logiciel verra les blocs les uns en dessous des autres car les float ne seront pas reconnus.
 
Du coup on reste le plus souvent avec des css "inline" (<div style="font-size:14px;"> ) et des colonages fait en tableau...
 
Tu peux voir un peu ce qui est supporté ou pas sur ce genre de site :
https://www.campaignmonitor.com/css/
 
Regarde le code source d'une newsletter ou d'une signature un peu élaboré pour t'inspirer !


---------------
D3
Reply

Marsh Posté le 02-07-2018 à 16:26:17    

Bonjour mechkurt,
 
Merci pour ta réponse.  
En fait il me reste ce souci de trait le reste est bon.
J'ai eu quelques idées mais pas eu le temps de mettre en place.

Reply

Marsh Posté le 02-07-2018 à 20:51:22    

Comme dit précédemment, mieux vaut éviter le CSS dans les mails et il vaut donc mieux utiliser des tableaux, même si ces derniers sont à éviter habituellement.
 
Ex :

Code :
  1. <table height="60">
  2.   <tr>
  3.     <td width="285" align="center">aaa</td>
  4.     <td width="1" bgcolor="#FF0000"></td>
  5.     <td width="285" align="center" valign="top">bbb</td>
  6.   </tr>
  7. </table>
  8. <br>
  9. Blablablabla


Ceci sera surement compatible avec la plupart des clients mail, néanmoins il faut noter que cet exemple n'est pas correct en HTML 5.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 03-07-2018 à 09:25:46    

Bonjour MaybeEijOrNot,
 
Merci pour ce code et les conseils.  Je vais l'appliquer à mon code.
 
Bonne journée.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed