+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu] Prob. CSS sur Safari (/showthread.php?tid=7872)
Pages :
1
2
[Résolu] Prob. CSS sur Safari - MeTaLLiQuE - 09-09-2017
Bonsoir,
Bon... J'ai un petit soucis avec Safari
Normalement (et ça fonctionne partout...) le rendu doit être :
![[Image: 743233Capture.png]](https://img11.hostingpics.net/pics/743233Capture.png)
Or... Sur mon macbook pro, l'avatar, le pseudo et l'icône de messagerie ne sont pas centré, tout est collé à gauche...
Ca fait plusieurs heures qu'on y travail avec mon camarade et rien n'y fait...
Voici le code HTML :
Code :
<div class="online">
<ul>
<li><span class="avat"><img src="anges.png" alt=""></span>PSEUDO <span class="messenger"><a href="profil/pseudo" title="Contacter ce joueur"><img src="blank.gif" alt="blank.gif" width="24" height="24"></a></span></li>
</ul>
</div>... et le code CSS :
Code :
.online {
width:261px;
height:201px;
background:url(../img/sprite_game.png) no-repeat;
background-position:-449px -280px;
position:fixed;
right:-331px;
bottom:106px;
padding:27px 40px 27px 30px;
}
.online ul {
list-style:none;
}
.online ul li {
display:flex;
display:-webkit-flex; /* Safari */
justify-content:space-evenly;
-webkit-justify-content:space-evenly; /* Safari 6.1+*/
color:#c9b988;
text-shadow:#000 1px 1px;
text-alig,:center;
height:29px;
line-height:29px;
border-bottom:transparent 1px solid;
border-image:url(../img/liner.png) 1;
}
.online ul li span.avat img {
height:20px;
width:20px;
border-radius:20px;
border:#d7c299 3px solid;
}
span.messenger {
background:url(../img/sprite_icons.png)no-repeat;
background-position:-387px -233px;
height:29px;
}Merci
RE: Prob. CSS sur Safari - Xenos - 10-09-2017
Salut,
regarde ce que l'inspecteur d'élément de Safari te dit. Sinon, si t'as des vendor prefixes pour Safari, c'est que Flex est mal implémenté dans ta version. Dans ton cas sinon, tu peux lâcher le flex et utiliser un block + margin auto ou un contenu inline-block + text-align center sur le parent.
PS: Ah ben il me semblait bien que space-evenly, je ne l'avais pas souvent vu: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Browser_compatibility C'est bien une question de non-implémentation (sur Webkit aussi apparemment)
PPS: D'ailleurs, Safari n'a pas besoin de préfixe. De toute façon, la maxime, c'est "le vendor préfixe est puant, si t'en as besoin, c'est qu'un truc ne va pas".
RE: Prob. CSS sur Safari - MeTaLLiQuE - 10-09-2017
Salut,
Bon, j'ai enlevé les vendors donc ça ne vient pas de là. Je ne comprends pas pourquoi ça fonctionne sur tous les navigateurs (sur Windows) et arrivé sur Mac ça merdouille...
l'inspecteur d'élément de Safari ne me dit rien de plus...
Je suis en pleine galère...
RE: Prob. CSS sur Safari - Xenos - 10-09-2017
Je te redis: d'après le MDN, ta propriété space-evenly n'est pas implémentée chez safari (bon, cela dit, elle n'est pas non plus implémentée chez Webkit, donc soit webkit fallback sur une propriété différente de Safari, soit Webkit l'a implémentée entre temps et le MDN n'est pas 100% à jour ce qui pourrait impliquer que Safari l'a également implémenté entre temps).
Le plus simple, c'est de te faire une page de test en virant tous les autres éléments, et en ne gardant que ton menu. Puis, de là, tu regardes quelles valeurs sont implémentées pour justify-content chez Safari. Suivant le résultat, t'avises: soit osef (c'est une option: le navigateur finira bien par l'implémenter un jour) soit tu laisses le flex de côté pour revenir sur un display block+margin ou text-align center.
RE: Prob. CSS sur Safari - Ter Rowan - 11-09-2017
j'ai pas la solution idéale cependant, pour ce cas précis, deux remarques
1) le flex du li va travailler sur ses enfants. Or (peut être) que le texte PSEUDO n'étant pas dans une balise (span par exemple) et bien safari ne le voit pas comme un enfant du li au sens "flexible" du coup une rupture dans l'analyse, du coup les trois à gauche
2) pourquoi faire du flex dans ce cas précis ? Tu as deux images d'une petite taille fixe et un texte centré entre les deux. Quel intérêt au flex ? En supposant que tu réduises la taille de l'écran au point qu'elle ne suffise plus à manipuler la ligne entière que verras tu de différent ?
pourquoi pas juste un texte qui aurait une taille (donc un span qui l'entoure) width = calc( 100% - taille img1 - taille img2) avec le bon padding du li ?
RE: Prob. CSS sur Safari - niahoo - 11-09-2017
Bonne remarque pour l'élément texte.
Pour le reste, flex est intéressant car ça fonctionne simplement, tu peux changer tes icones sans avoir à modifier les tailles dans ton calc(), tu n'as pas a gérer les paddings, margins, etc.
RE: Prob. CSS sur Safari - MeTaLLiQuE - 11-09-2017
+1 niahoo
Je n’ai toujours pas pu isoler le code pour faire des tests supps par manque de temps.
Je reviendrai apporter une réponde dès que j’aurais effectué des tests
RE: Prob. CSS sur Safari - Xenos - 12-09-2017
Tu peux aussi simplement mettre tes deux images en background-image, alignées en center right et center left, no-repeat, et poser un padding latéral sur ton élément. C'est parfaitement fonctionnel aussi, surtout sachant que les images semblent décoratives et non sémantiques (ie: pas besoin de les mettre dans le HTML en img). + text-align center et t'as réglé ton problème. Tu pourras même virer ces images en responsive sur les écrans peu larges.
RE: Prob. CSS sur Safari - Ter Rowan - 12-09-2017
t as mal lu le code Xenos, au moins l'icone de droite est un lien hypertexte, ce n'est pas de la déco. Je pense que le premier est l'avatar donc devrait aussi porter de l'info (image + alt descriptif)
N'empêche, je suis pas sûr que perso j'utiliserai le flex. Y a peut être une manière plus automatique que le calc (des float maybe ?) mais le flex pour ça bof
A noter je trouve génial le flex comme invention (bon hormis les instructions qui sont incohérentes en terme de nommage)
C est juste que dans ce cas précis je trouve pas ça top
RE: Prob. CSS sur Safari - Xenos - 13-09-2017
En effet, mais dans ce cas, je trouve plus cohérent, point de vue UX, de juste poser le lien sur le pseudo plutôt que sur l'image d'enveloppe (et tu résouds ton soucis de positionnement en passant en le rendant inexistant).
Flex a des propriétés qui peuvent sembler incongrues, mais qui correspondent bien au concept de "ligne principale/ligne secondaire" et qui sont repris dans "grid". Je ne trouve pas leurs nommages trop problématique au bout du compte.
Float, non, c'est très chiant à gérer car la hauteur de l'élément n'est plus prise en compte dans le calcul du parent, donc, ça va te miner ailleurs. Je pense que dans ton cas, tu devrais même pouvoir faire un simple "text-align-last:justify" ('pas oublier le "-last"; je ne sais plus sa compatibilité en revanche) sur le parent contenant les 2 images + pseudo, et utiliser un "display: inline(-block?)" pour ses 3 enfants direct. Logiquement, cela te fera l'alignement voulu (les 3 éléments seront répartis sur tout la ligne).