28111 sujets

CSS et mise en forme, CSS3

[Résolu] Besoin d'aide sur border-radius

Bonjour, j'essaye de créer des modèles de mails automatiques sous GLPI et je rencontre une difficulté en CSS.

Actuellement j'ai des rectangles contenant des suivis GLPI.

https://image.noelshack.com/fichiers/2017/05/1486023263-bulles1.jpg


Et j'aimerai que ça soit sous forme de bulles.

https://image.noelshack.com/fichiers/2017/05/1486023263-bulles2.jpg

J'ai donc en HTML (avec les balises GLPI ne soyez pas surpris des ##) : 

<div class="suivis">##FOREACHfollowups##<br />
<div class="suivi">
<div>
<h2>Message de ##followup.author##, le ##followup.date##:</h2>
<br />##followup.description##</div>
</div>
<div class="spacer"> </div>
##ENDFOREACHfollowups##</div>


Et en css j'ai : 

div.suivis a {
    padding: 5px 15px 5px 15px; 
}

div.suivi div {
    border: 1px solid #888888;
    background-color: #eeeeee;
    color: #555555;
    padding: 10px;
    border-radius: 15px 50px;
}


J'ai essayé plusieurs choses, enlever le border, le changer, plein de truc, sans résultat ... Impossible d'avoir les bulles, ou est mon erreur s'il vous plait ?

Merci d'avance !
Modifié par Freezon344 (02 Feb 2017 - 09:18)
Modérateur
Bonjour,

Et bien à première vue rien n'a l'air suspect et tout est bien fait. Vous avez pu vérifier le HTML et le CSS généré ?
Oui, les border sont carrés. Alors je me demande si GLPI ne restreint pas le CSS pour l'envoi de mail automatique. Je vais essayer ce même bout de code sur une page HTML simple et on verra bien ... Je me casse la tête dessus depuis un bon moment, également pour l'opacity.



EDIT:

J'ai fais le test sur une page html basique.

<html>
						<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                         <title>[GLPI #0004425] Nouveau suivi / TEST MAIL</title>
                         
	<style type="text/css">
        div.suivis a {
    padding: 5px 15px 5px 15px; 
}

div.suivi div {
    border: 1px solid #888888;
    background-color: #eeeeee;
    color: #555555;
    padding: 10px;
    border-radius: 15px 50px;
}                   
    </style>
                        </head>
                        <body>
						<div class="suivis"><br />
<div class="suivi">
<div>
<h2>Message de trjjrjr</h2>
<br />rjgjfgj</div>
</div></div>
</body></html>


Ca marche. Donc je pense que GLPI restreint la chose...
Modifié par Freezon344 (02 Feb 2017 - 09:58)
Je ne connais pas GLPI, mais en effet border-radius n'a pas toujours été supporté dans les e-mails, comme c'est le cas de opacity.

Je te conseille ce lien, pour vérifier le support des propriétés CSS dans les principaux clients mails : https://www.campaignmonitor.com/css/
Meilleure solution
Hello Smiley smile

mob a écrit :
Je ne connais pas GLPI, mais en effet border-radius n'a pas toujours été supporté dans les e-mails, comme c'est le cas de opacity.

Je te conseille ce lien, pour vérifier le support des propriétés CSS dans les principaux clients mails : https://www.campaignmonitor.com/css/


Je ne connaissais pas ce lien, Génial Smiley smile
Merci
mob a écrit :
Je ne connais pas GLPI, mais en effet border-radius n'a pas toujours été supporté dans les e-mails, comme c'est le cas de opacity.

Je te conseille ce lien, pour vérifier le support des propriétés CSS dans les principaux clients mails : https://www.campaignmonitor.com/css/


Merci ! La Solution est là, j'ai essayé sur une autre plateforme et ça marche ! Merci beaucoup ! Je n'aurai jamais cru que ceci pouvait être la cause !


Du coup, une fois les bordures correctement réalisé, comment j'adapte pour que tout corresponde à cela. Car actuellement dans mon mail, j'ai la bordure tout autour et arrondi, mais l'intérieur dépasse, reste carré et ne s'adapte pas. Merci d'avance.
Modifié par Freezon344 (02 Feb 2017 - 10:48)
Et du coup, j'ai une bordure pour afficher un message qui prend toute la largeur de la page, comment je peux la rétrécir afin qu'elle ne prenne pas toute la largeur et que je puisse la centrer ?

Merci d'avance !
Le meilleur moyen avec les emails est de définir un conteneur principal avec une largeur fixe.

Tu t'attaques à un très gros morceaux avec l'intégration d'e-mail, et l'apprentissage est très rude. Il serait peut-être intéressant pour toi de te baser sur des templates existants pour comprendre le fonctionnement et éviter les erreurs.

Tu trouveras par exemple des templates de base, testés et éprouvés, ici.
En faite, dans l'entreprise on utilise Outlook 2013 ou 2016 sur bureau, et en faite c'est lui qui restreint énormément le CSS, ce qui fait que mes problèmes viennent tous de là. Donc en faite, j'ai changé mon design, c'est brut et moche, mais je peux pas me permettre de perdre du temps à faire un super design avec des bordures et des polices, pour qu'au final on puisse les lires que sur GMAIL ou Outlook.com et pas sur outlook 2013/2016 qui est utilisé par 99% des employés.

Je vous remercie à tous pour votre aide. Je peux aider si des gens veulent faire des mails auto sous GLPI, je suis là Smiley cligne
Modifié par Freezon344 (03 Feb 2017 - 10:10)
Freezon344 a écrit :
En faite, dans l'entreprise on utilise Outlook 2013 ou 2016 sur bureau, et en faite c'est lui qui restreint énormément le CSS, ce qui fait que mes problèmes viennent tous de là. Donc en faite, j'ai changé mon design, c'est brut et moche, mais je peux pas me permettre de perdre du temps à faire un super design avec des bordures et des polices, pour qu'au final on puisse les lires que sur GMAIL ou Outlook.com et pas sur outlook 2013/2016 qui est utilisé par 99% des employés.
Je vous remercie à tous pour votre aide. Je peux aider si des gens veulent faire des mails auto sous GLPI, je suis là Smiley cligne

Je confirme le fait que sous Outlook c'est particulièrement galère de faire une mise en page qui tienne la route, même en utilisant des déclarations CSS simples.
Nous avons dû créer récemment au bureau un envoi de mail depuis ServiceNow. Tout était OK sous le concepteur de ce logiciel, fonctionnant en ligne à partir d'un navigateur web, et par contre complètement déstructuré à l'arrivée lorsque le mail était réceptionné sous Outlook 2010.
Comme d'hab, Microsoft est à la ramasse sur le sujet.
sepecat a écrit :

Comme d'hab, Microsoft est à la ramasse sur le sujet.


Le soucis c'est que Microsoft est à moitié à la ramasse. Sur Outlook.com contrairement à Outlook 2013/2016, ça marche !
Sujet clos
Aller à