28172 sujets

CSS et mise en forme, CSS3

[Résolu] Ombrage

Bonjour à tous
Il y a quelque temps, grâce à votre aide, j'ai pu définir un ombrage au dessous d'une boîte par

.shadowed {
    position:relative;
    margin-bottom:1.5em !important;
}
.shadowed::after {
    content: "";
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    height:1.25em;
    background:radial-gradient(ellipse at top, rgba(0,0,0,0.2) 30%, transparent 70%);
}

Cela n'a plus l'air de fonctionner sous Chrome mais si ça marche toujours sous FireFox
Voir :
https://tests.osirisnet.net/tombes/pharaons/toutankhamon/e_toutankhamon_01.htm#abstract1
la première boîte doit avoir un ombrage, pas la seconde.

Une idée de ce qu'il faut faire pour corriger ça ? (sachant que "ne pas utiliser Chrome" n'est pas une réponse acceptable Smiley cligne )
Bonjour,
Commence par isoler ton code du reste de ton site (avec un codePen par exemple), ceci afin de vérifier s'il ne s'agit pas d'un écrasement de la règle par tes autres styles. Ce qui me semble assez probable.
PapyJP a écrit :
Bonjour à tous
Il y a quelque temps, grâce à votre aide, j'ai pu définir un ombrage au dessous d'une boîte...

Je me souviens très bien de ce topic, j'y avais participé. T'as vu si c'est pas cool : gcyrillus te fournit même le support Smiley cligne
Modifié par Olivier C (13 Dec 2020 - 08:55)
Olivier C a écrit :

Je me souviens très bien de ce topic, j'y avais participé. T'as vu si c'est pas cool : gcyrillus te fournit même le support Smiley cligne

... et de plus pendant la nuit! C’est un rêve !!!
Merci 1000 fois!!!
Modifié par PapyJP (13 Dec 2020 - 09:12)
Faute de mieux, je laisse les inserts avec overflow:hidden sauf s'ils sont ombrés.
Dans le contexte, ça devrait aller.
Modérateur
Maintenant , c'est overflow:visible!important qui met le bazar et ça c'est pas moi qui te la fait faire Smiley cligne

retire cette règle et garde le display:table;table-layout fixed
le table-layout:fixed c'est pour qu'il garde la largeur de 80% que tu lui as assigné ... en display:table, le conteneur peut s’élargir pour s'adapter au contenu.

voir https://developer.mozilla.org/fr/docs/Web/CSS/table-layout Smiley cligne
Modifié par gcyrillus (13 Dec 2020 - 12:34)
gcyrillus a écrit :
Maintenant , c'est overflow:visible!important qui met le bazar et ça c'est pas moi qui te la fait faire Smiley cligne

retire cette règle et garde le display:table;table-layout fixed
le table-layout:fixed c'est pour qu'il garde la largeur de 80% que tu lui as assigné ... en display:table, le conteneur peut s’élargir pour s'adapter au contenu.

Bon! Difficile de faire quelque chose dans un site en fonctionnement.
Je vais refaire un environnement de test pour qu'on y voie plus clair.
Modifié par PapyJP (13 Dec 2020 - 15:56)
Après tests, ça semble fonctionner correctement.
je ne sais pas pourquoi le table-layout:fixed ne marchait pas ce matin.
Merci infiniment pour ton aide.
Sujet clos
Aller à