Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1710 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2317446
charliedap​s
Posté le 28-06-2018 à 14:50:40  profilanswer
 

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.
 

mood
Publicité
Posté le 28-06-2018 à 14:50:40  profilanswer
 

n°2317458
David Bori​ng
Posté le 28-06-2018 à 17:59:53  profilanswer
 

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

n°2317481
charliedap​s
Posté le 29-06-2018 à 12:39:34  profilanswer
 

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

n°2317522
charliedap​s
Posté le 30-06-2018 à 11:27:50  profilanswer
 

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
n°2317538
charliedap​s
Posté le 01-07-2018 à 00:57:51  profilanswer
 

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
n°2317562
mechkurt
Posté le 02-07-2018 à 14:29:45  profilanswer
 

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
n°2317574
charliedap​s
Posté le 02-07-2018 à 16:26:17  profilanswer
 

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.

n°2317587
MaybeEijOr​Not
but someone at least
Posté le 02-07-2018 à 20:51:22  profilanswer
 

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.
n°2317597
charliedap​s
Posté le 03-07-2018 à 09:25:46  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[VBA/HTML] insérer une image dans un mail[Excel] macro outlook ne traite jamais dernier mail sauf si un seul
AMP formulaire - Send Mailenvois mail par macro sous excel
vba outlook envoi de mailPb lecture mail envoyé via PHP
Formulaire PHP réponse mail accentTrouver la vrai adresse mail d'une redirection d'email
Signature Windows mail : ajouter adresse internet + lien 
Plus de sujets relatifs à : 2 div séparés par un trait vertical pour siganture mail

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.147 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR