26157 sujets

CSS et mise en forme, CSS3

Bonjour toutes et tous,
Je rencontre un problème d'intégration avec deux pseudos éléments (before et after) en position absolue (l'un contient un un SVG, l'autre un background-color) : un espace très fin vient se positionner entre les deux, alors que je ne le souhaite pas.
J'ai réalisé ce CodePen : https://codepen.io/anon/pen/zpjGKN
Merci d'avance pour vos idées, pour ma part je tourne en rond.

Marie
Hello,


Et ceci ne focntionne pas ?

section:before {
    left: 0px;
....
}
Administrateur
Hello,

A priori le problème vient de ton background SVG sur le :before, parce que si tu remplaces "background-image: url('https://mariecomet.fr/wp-content/uploads/celuila.svg');" par "background: pink", ça fonctionne et les deux blocs sont bien collés.
Salut,
Au début j'avais en effet un problème sur mon tracé initial, mais c'est résolu.
Je remarque que si je change section { height: 300px } par section { height : 299px }, le décalage disparait.
J'ai également essayé d'intégrer directement mon SVG dans mon HTML, même résultat.
Bonjour,

Je rejoins Raphaël : le problème est dans le svg (mais pas que dans le svg).

Il est probable que ce soit dû aux arrondis effectués par les navigateurs. Chrome sur Mac OS dessine l'espace très fin avec une couleur plus claire, Safari le dessine avec une ligne complètement transparente, et Firefox sort un résultat nickel sans espace du tout.

Quand on regarde le svg, on voit que le chemin du path va jusqu'en bordure du bord droit du viewport du svg mais pas au delà (c'est le H214 qui s'y trouve qui nous le dit, 214 correspondant au min-x + width du viewport à savoir 138.7 + 75.3 = 214). Or le svg lui-même est un peu tarabiscoté : le min-x du viewport ne vaut pas 0 (personnellement, je me serais débrouillé pour que ce min-x soit 0). Et ensuite, le svg est en background, lui-même plus ou étiré du fait du css, et de plus se retrouvant dans un :before lui-même plus ou moins étiré. Du coup, le dernier pixel sur le bord droit du svg a selon les navigateurs et les circonstances une couleur plus ou moins claire.

Si on remplace H214 par H215 dans le path du svg, ça semble suffire pour qu'il n'y ait plus cet effet de bord (le path du svg débordant alors du bord droit du viewport). C'est la solution que je retiendrais pour faire au plus court.

Il y a surement d'autres manières de faire, mais une solution via le css me semble en tout cas assez aléatoire (sauf à faire en sorte que le background en css soit décalé vers la droite de 1 pixel). La solution de mettre le height à 299px me semble fonctionner par hasard sous Chrome et Safari (cela change légèrement les proportions et donc les calculs d'arrondis). Si on met le height à 301px, on résout là encore le problème avec Chrome, mais pas avec Safari.

Note : du coup, le css peut être pas mal allégé (beaucoup d'efforts redondants ont été fait pour que le background svg aille jusqu'au bord de son conteneur).

Amicalement,
Modifié par parsimonhi (11 Jan 2018 - 22:52)
Bonjour,
Merci pour cette réponse détaillée.
J'ai donc modifié le SVG pour que d'une part le x et le y du viewBox soient à 0, et je l'ai également "sorti" du plan de travail dans Illustrator pour qu'il dépasse sur la droite.
Ca fonctionne en partie, mais pas en responsive une fois sur deux.
Je commence à croire que je ne pourrais pas trouver de solution pour que cela fonctionne à 100%.

Auriez-vous une idée pour réaliser ce que je souhaite faire -cette vague- autrement qu'avec un SVG?

Merci,
Marie.
Modifié par mariecomet (12 Jan 2018 - 11:11)
Bonjour,

Qu'est-ce qui ne fonctionne pas ?

Tu as toujours l'espace très fin, ou bien est-ce un autre problème ?

Amicalement,
Modifié par parsimonhi (12 Jan 2018 - 21:34)
Bonjour,
Oui j'avais toujours l'espace, même en faisant les modifications que tu m'avais données.
J'ai finalement trouvé une alternative en faisant un SVG très long, pour toute la forme, au lieu d'un SVG sur ::before + un background sur ::after.
Merci de ton aide en tout cas,

Bon week-end,
Marie.
Modifié par mariecomet (13 Jan 2018 - 09:11)