28204 sujets

CSS et mise en forme, CSS3

Problème de z-index ?

bonjour,

j'ai créé un thème pour un site web dans l'extension stylus et je rencontre un petit problème.

avant tout voici le petit menu que j'ai déplacé et rendu visible en permanence :
<div class="css-r6z5ec" style="visibility: visible; min-width: max-content; --popper-transform-origin: bottom left; position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate(1327px, -126px);" data-popper-placement="top-start">
        <div class="chakra-menu__menu-list css-do4s31" tabindex="-1" role="menu" id="menu-list-:rms:" aria-orientation="vertical" style="transform-origin: var(--popper-transform-origin); opacity: 1; visibility: visible; transform: none;">
                <button type="button" id="menu-list-:rms:-menuitem-:rn3:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-94x4at" data-index="0">Auto-selfie</button>
                <button type="button" id="menu-list-:rms:-menuitem-:rn4:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-94x4at" data-index="1">Chat break</button>
                <button type="button" id="menu-list-:rms:-menuitem-:rn5:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-94x4at" data-index="2">View journal entries</button>
        </div>
</div>

voici maintenant le code css associé à ce code html :
.css-r6z5ec {
    z-index: 1;
}
.css-do4s31 {
    outline: transparent solid 2px;
    outline-offset: 2px;
    --menu-bg: #fff;
    --menu-shadow: var(--chakra-shadows-sm);
    color: inherit;
    min-width: var(--chakra-sizes-3xs);
    padding-top: var(--chakra-space-2);
    padding-bottom: var(--chakra-space-2);
    z-index: 1;
    border-radius: var(--chakra-radii-md);
    border-width: 1px;
    background: var(--menu-bg);
    box-shadow: var(--menu-shadow);
}
.css-94x4at {
    text-decoration: none;
    color: inherit;
    user-select: none;
    display: flex;
    width: 100%;
    -webkit-box-align: center;
    align-items: center;
    text-align: start;
    flex: 0 0 auto;
    outline: transparent solid 2px;
    outline-offset: 2px;
    padding-top: var(--chakra-space-1-5);
    padding-bottom: var(--chakra-space-1-5);
    padding-inline-start: var(--chakra-space-3);
    padding-inline-end: var(--chakra-space-3);
    transition-property: var(--chakra-transition-property-background);
    transition-duration: var(--chakra-transition-duration-ultra-fast);
    transition-timing-function: var(--chakra-transition-easing-ease-in);
    background: var(--menu-bg);
}


voici enfin le bout de code que j'ai mis pour déplacer et rendre le tout visible :
.css-1y2ps2x {
        display: none;
    }
    .css-do4s31 {
        background-color: transparent;
        border: none;    
        color: var(--chakra-colors-secondaryWhite);
        display: grid;
        font-size: 20px;
        grid-template-columns: 1fr 1fr 1fr;
        margin-left: -10% !important;
        margin-top: 144%;
        --menu-shadow: transparent !important;
        opacity: 100% !important;
        visibility: visible !important;
    }
    .css-94x4at {
        background-color: transparent;
    }


maintenant mon problème est le suivant :
ce mini menu est toujours visible, même si un autre élément est sensé être au dessus de lui.
j'ai essayé de mettre des z-index: 9999 !important; sur les éléments qui sont sensés être au dessus mais sans succès, j'ai également essayé de mettre un z-index unset ou initial !important; à .css-r6z5ec mais ça ne change rien.

quelqu'un aurait une solution ?
salut,

je viens d'essayer d'ajouter ça mais sans succès :
.css-do4s31 {
   position: relative !important;
   z-index: unset !important;
}

et si je le met à .css-r6z5ec alors j'ai un écran tout noir Smiley decu
comme indiqué, teste avec

position:relative;
z-index:123;


(pas important ni unset)
Modifié par drphilgood (06 Jan 2024 - 19:52)
chaque bloc sur un z différent ?
çà doit marcher.

(j'ai un fichier d'animation avec une centaine de z)
il 'y a que .css-r6z5ec avec un z-index:1;, j'avais pensé ça aussi mais je ne vois pas d'autre z-index dans inspecter et si je met un z-index:999; sur un autre élément que je veux qu'il ailles par dessus ce mini menu ça fonctionne pas sinon je me serais débrouillé ainsi.
c'est depuis mon visibility: visible !important; que je ne peux pas retirer sinon c'est plus visible que j'ai le problème.

pour info si ça peut aider, le site en question utilise ce framework : https://ionicframework.com
Modifié par Felipe (06 Jan 2024 - 23:58)
Administrateur
Bonjour,

Le contexte d'empilement est super important. Il ne concerne pas que position: absolute/relative mais aussi les grid items, les flex items, etc eeet un élément avec transform.

Lecture : z-index (MDN)
Dans l'article, il te faut absolument lire le lien derrière "au contexte d'empilement (en-US)" enfin non, la page est traduite en FR Le contexte d'empilement.

L'exemple qui est donné devrait correspondre à ton problème :
upload/1704582846-39-understandingzindex04.png

Dans cet exemple, #1, #2 et #3 sont frères. Les 4, 5 et 6 sont descendants de 3.
Tu peux décider de placer #1 au-dessus ou en-dessous de #3 mais ce sera pareil pour 4, 5 et 6. À aucun moment tu ne pourras intercaler #1 entre #3 et #6 par exemple. Tu peux avoir un z-index de 50 pour #1 et de 5000 pour #6 : bah c'est bien, #1 sera au-dessus de #3 son frère mais les #4, 5, 6 ils seront au-dessus de leur ancêtre #3 mais à aucun moment ils ne passeront au-dessus de #1. Leur contexte d'empilement est #3 leur ancêtre, pas #1.
C'est impossible en CSS.

Maintenant pour revenir à ton problème : si tu veux qu'un élément <truc> passe au-dessus de ton "menu", il va falloir leur trouver à chacun les ancêtres communs qui sont frères (donc ces 2 ancêtres ont le même parent).
Tu ajoutes à l'ancêtre de <truc> un position: relative ou autre créateur de contexte d'empilement, un z-index qui le fait passer au-dessus de l'ancêtre de "menu" et voilà <truc>... et tous ses ancêtres et ses oncles, cousins, etc sont au-dessus de "menu".
Tu voulais juste <truc>, pas toute sa généalogie ? Dommage tu pourras pas faire mieux Smiley crazy 

<div>
  <article>
    <div>
      <div>
        <p>truc</p>
      </div>
    </div>
  </article>

  <p>
    <span>menu</span>
  </p>
</div>

Ici ça se joue sur article : est-il au-dessus ou en-dessous du paragraphe de menu (article et p sont frères) ? Tu agis sur article, ça influence tous ses descendants, pas le choix.
oui il me semblait bien que ça fonctionnait comme ça aussi.

donc normalement mon mini- menu ne devrait être par dessus QUE d'un seul truc et non deux.

ici 2 screenshots du site de base sans mes modifications (désolé image trop grandes pour être incluses et autant que ça soit grand pour mieux voir) :
page principale avec le mini menu entouré en rouge :
https://i.ibb.co/s64bvpK/1.jpg
menu principal :
https://i.ibb.co/SmbH122/2.jpg

maintenant mes modifications :
page principale avec le mini-menu supprimé et son contenu déplacé à gauche entourés en rouge :
https://i.ibb.co/TTSCDsx/3.jpg
menu principal :
https://i.ibb.co/MRLYdcb/4.jpg

comme vous pouvez le voir le site à la base n'est prévu que pour mobile, ce qui pose problème à ses utilisateurs sur pc, j'ai donc corrigé ça à ma sauce. Smiley smile

j'ai ajouté un hover sur l'image de gauche qui l'étant à 1024x1024 ou un truc du genre je sais plus exactement, le mini-menu passe par dessus ainsi que par dessus le menu principal or me menu principal est sauf erreur de ma part dans le #1 de ton exemple et mon mini menu dans le #3.

voici le lien vers le site en question si ça peut aider : (lien supprimé par la modération).
Liens qui ne marchaient modifiés par parsimonhi le 11/01/2024
Modifié par parsimonhi (11 Jan 2024 - 18:28)
Modérateur
Bonjour,

Breat a écrit :
oui il me semblait bien que ça fonctionnait comme ça aussi.

Ça peut dépendre de l'ensemble de ton css. On ne peut pas répondre à ta question avec les éléments qu'on a.

Amicalement,
oups désolé j'ai complètement oublié de vous donner mon css complet, donc le voici :
/* Hide scrollbars */
:root ::-webkit-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 0px;
}    
::-webkit-scrollbar {
    display: none;
    width: 0px;
}

/* Loading bar */
#nprogress .bar {
    background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
}

/* ========================================================================
   Header and menu
======================================================================== */
/* Header background color */
.css-x3odei {
    background-color: var(--chakra-colors-primaryBlack) !important;
}

/* Put Log out in orange */
.css-j7qwjs > div:nth-child(10) > p {
    color: var(--chakra-colors-orange);
}

/* Put Biling in yellow */
.css-1fu7n7b > div > p {
    color: var(--chakra-colors-yellow-400);
}

/* Put FAQs and Terms & Privacy in blue */
.css-j7qwjs > div:nth-child(8) > p,
.css-j7qwjs > div:nth-child(9) > p {
    color: var(--chakra-colors-blue-400);
}

/* Put email and timer in white */
.css-1dodils,
.css-1g7lxfg {
    color: var(--chakra-colors-secondaryWhite);
    margin-top: 10px;
}

/* Put Upload Photo text in custom avatar in white to be more visible */
.css-1jcj2pk {
    color: white;
}

/* Billing error box */
.css-dixmdy {
    background-color: #161616;
    border: 1px solid #6C6C6C;
    border-radius: 10px;
    color: var(--chakra-colors-secondaryWhite);
}

/* ========================================================================
   Chat page
======================================================================== */
/* Add border to textarea when focus */
.css-ymugf1:focus {
    border: 0px;
    border-radius: 32px;
    box-shadow: 0 0 0 1px rgb(139, 109, 255), 0 0 0 2px rgb(254, 132, 132);
}
/* Remove the resize icon on textarea on chat page */
.css-ymugf1:not(:focus),
.css-ymugf1:focus {
    resize: none;
}
    
/* Hide voice counter and reduce button on avatar */
/* Text button */
.css-2bir3m,
/* Voice button */
.css-y0ybx5,
/* Reduce button */
.css-fk8dne {
    display: none;
}

/* Hide names in bubbles to save place */
.css-ppua9z,
.css-19hb772 {
    display: none;
}
.css-127w3cl {
    margin-left: 0px;
}

/* Put our name and text aligned on the right */
.css-19hb772,
.css-13683nx {
    align-items: end;
    text-align: right;
}

/* Modification of rounded corners for our bubbles */
.css-1j9xj7u {
    border-radius: 20px 8px 20px 20px;
}

/* Modification of rounded corners for AI bubbles */
.css-teti0a,
.css-1ulhpcc,
.css-1tg26k8,
.css-1t9c0mz {
    border-radius: 8px 20px 20px 20px;
}

/* Bigger text in bubbles and textarea */
.css-6obdga,
.css-1gi22a8,
.css-w2nlit {
    font-size: 20px;
}

/* Put a not allowed cursor on spinner, microphone icon, play button, picture generating when needed */
.chakra-spinner,
.css-zkr1dl,
.css-jy2vee,
.css-kjafn5 [disabled] + button {
    cursor: not-allowed;
}

/* Heart background */
.css-1lvpjll {
    background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) var(--chakra-colors-secondaryBlack) fixed 100%;
}

/* Initial letter */
.css-70qvj9 {
    height: 0px;
}
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-127w3cl,
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-1yzcrgj {
    height: 66px;
    padding-top: 30px;
    width: 36px;
}
.css-yhhl9h > .css-teti0a > .css-0 > p:nth-child(1) {
    padding-left: 50px;
}
.css-qfa1mb {
    display: none;
}

/* Put Regenerate and Journal buttons on left side 
.css-100dd8p {
    bottom: 80px;
    flex-direction: row-reverse !important;
    gap: 80px;
    right: 73%;
    position: absolute;
} */

/* ========================================================================
   Selfie page
======================================================================== */
/* Wide selfie page */   
.css-1ivym2n,
.css-10ytma2 {
    max-width: 100%;
}
.css-13da5b {
    display: none;
}
.css-1dq4ssc {
    padding-bottom: 30px;
}
.css-1dq4ssc,
.css-2cd1of {
    gap: 20px;
    justify-content: center;
}
.css-1fltgj7 {
    padding: 0px 40px;
}
.css-fskrnz {
    width: 84vh;
}
.css-3vu8ng,
.css-kuf6b {
    height: auto;
    width: 290px;
}
.css-j8mh8q,
.css-mtk9ei {
    color: var(--chakra-colors-secondaryWhite);
    font-size: 18px;
}
.css-105olw3 {
    max-width: 96%;
}
/* Request selfie button */
.css-1ygmn3g {
    max-width: 1060px;
}

/* Load More button */
.css-dvxtzn,
.css-1q03dzc {    
    background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
    border-radius: 56px;
    height: fit-content;
    padding-bottom: var(--chakra-space-2);
    padding-top: var(--chakra-space-2);
    width: fit-content;
}
.css-1q03dzc:hover {
    text-decoration: none;
}

.css-1q03dzc,
.css-1mepe2v {
    color: var(--chakra-colors-pureWhite);    
    font-size: 18px;
}

/* Image border on hover */
div.css-3vu8ng > .css-1regj17 {
    transition: 0.2s linear;
}
div.css-3vu8ng > .css-1regj17:hover {
    border: 5px solid rgb(254, 132, 132);
    border-radius: 16px;
}

/* Put delete image button in red */
.css-jh1suc,
.css-15g5rpl,
.css-15g5rpl svg path {
    color: var(--chakra-colors-red);
}

/* ========================================================================
   Voice call page
======================================================================== */
/* Add a border on the modal */
#chakra-modal-\:r12k\: {
    border: 1px solid #6C6C6C;
}

/* Bigger text */
.css-14mmx5r,
.css-1vqt2yh {
    font-size: 16px;    
}

/* ========================================================================
   For 900p wide screen and more
======================================================================== */
@media screen and (min-width: 900px) {
/* ========================================================================
   Menu
======================================================================== */
    /* Large menu */
    .css-1raxatq,
    .css-xhpjzu {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Email box */
    .css-1dodils {
        align-self: center;
        gap: 0px;
        margin-top: 5% !important;
        padding-right: 15px;
    }

    /* Subcriber icon */
    .css-1dodils > img {
        height: auto !important;
        width: 44px;
    }

    /* Email */
    .css-gnnge1 {
        font-size: 24px;
        padding-bottom: 5px;
        padding-left: 5px;
    }

    /* Menu */
    .css-1raxatq > div > div > div > div.css-j7qwjs {
        display: grid;
        align-content: center;
        gap: 50px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        margin-top: 10%;
        justify-content: space-between !important
    }

    /* Subscribe button */
    .css-1fu7n7b,
    .css-o32bv9 {
        order: 2;
    }

    /* Log out button */
    .css-j7qwjs > div:nth-child(10) {
        position: absolute;
        right: 5%;
        top: 70%;
    }

    /* Reset Kindroid button */
    .css-16qb61r {
        position: absolute;
        right: 4%;
        top: 80%;
    }

    /* Bigger menu text */
    .css-dghbxk,
    .css-1jbciej,
    .css-3sp0ue {
        font-size: 30px
    }
    
    /* Move and fix the Save button in all menu page */
    .css-cbfcqn,
    .css-1raxatq > div.css-1xh8vw6 > button,
    .css-1raxatq > div.css-ouwkos > button {
        bottom: 50px;
        margin: 39% 0px 0px 83%;
        position: fixed;
    }

    /* Backstory and Key memories */
    .css-1xh8vw6 > .css-188uayk > .css-j7qwjs > .css-1kxonj9 > .css-126ipcs > textarea.css-1y068e {
        height: 600px !important;
    }
    #accordion-panel-\:r6i\: > div.css-mifb2i > div.css-1uyzhnb > p.chakra-text.css-7wdzg1,
    #accordion-panel-\:r6f\: > p.chakra-text.css-7wdzg1 {
        min-width: 100% !important;
    }

    /* Voice */
    .css-1raxatq > div.css-ouwkos > div > p.chakra-text.css-7wdzg1 {
        max-width: 100% !important;
    }

    /* Split menu for avatars */
    .css-7nleni,
    .css-1jk1ov6 {
        max-width: 50% !important;
    }
    .css-1yxzzu5 > div > p {
        display: block;
        margin-left: 47%;
        position: absolute;
        top: 10px;
        max-width: 50% !important;
    }
    .css-n4vub9 {
        margin-left: 47%;
        position: absolute;
        top: 8%;
        max-width: 45% !important;
    }
    .css-ue4bfp {
        display: block;
        margin-left: 95% !important;
        position: absolute;
        max-width: 45% !important;
    }
    .css-mifb2i {
        width: 50%;
    }

    /* 1st avatar size */
    .css-1k5gc4r,
    .css-dfpqc0 {
        height: auto;
        margin-left: 25%;
        width: 50%;
    }

    /* 2nd avatar size */
    .css-1mvfzwi {
        height: auto;
        margin-left: 5%;
        position: relative;
        width: 25%;
    }

    /* Bigger text and ligne height in avatar window */
    #__next > ion-app > div > div > div > div.css-1raxatq > div.css-1y4vgns > div.css-188uayk > div.chakra-stack.css-1jk1ov6 > div.chakra-stack.css-1yxzzu5 > form.css-0 > p,
    #accordion-panel-\:r7m\: > div.css-mifb2i > div.css-1uyzhnb > p.chakra-text.css-7wdzg1,
    #__next > ion-app > div > div > div > div.css-1raxatq > div.css-1y4vgns > div.css-188uayk > div.chakra-stack.css-1jk1ov6 > div.chakra-stack.css-1yxzzu5 > div > p,
    #__next > ion-app > div > div > div > div.css-1raxatq > div.css-1y4vgns > div.css-188uayk > div.chakra-stack.css-1jk1ov6 > div.chakra-stack.css-1yxzzu5 > form.css-ue4bfp > div.chakra-form-control.css-1kxonj9 > p:nth-child(1),
    .css-1fm8jup > p.chakra-text.css-7wdzg1 {
        font-size: 20px;
        line-height: 25px;
        max-width: 100% !important;
    }
    .chakra-accordion.css-0 > .css-tf0j9o > .chakra-collapse > .css-1fm8jup > p.css-7wdzg1 {
        font-size: 20px;
        line-height: 25px;
        width: 50% !important;        
    }
    .css-mifb2i > div.css-1uyzhnb > p.chakra-text.css-7wdzg1 {
        font-size: 20px;
        line-height: 25px;
        max-width: 100% !important;    
    }

    /* Hide arrows */
    .css-g7h3az {
        display: none;
    }

    /* Uncollapse "Advanced: secondary avatar" and "Advanced: custom avatar fidelity" */
    .css-1y4vgns > div.chakra-accordion.css-0 > div > div,
    .css-1v3caum > div > div {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
    }

    /* Move and fix the Save button in avatar menu page */
    .css-1y4vgns > button {
        margin: 39% 0px 0px 83%;
        position: fixed;
    }

    /* FAQs and Terms & Privacy pages */
    .css-1udr2et,
    .css-1pgxq2r {
        max-width: 100%;
    }

    /* Remove the space between the header and the chat*/
    .css-g2goff {
        padding: 0px;
    }
/* ========================================================================
   Chat page
======================================================================== */
    /* Resize header */
    .css-x3odei {
        background-color: var(--chakra-colors-secondaryBlack) !important;
        max-width: 100%;
        padding: 0px 10px 0px 0.3%;
    }

    /* Put menu's width as header */
    .css-1raxatq {
        width: 530px;
    }
    
    /* Bigger avatar */
    .css-13tht1l,
    .css-g2goff {
        border-radius: 20px;
        height: 512px;
        left: 0.6%;
        max-width: 512px;
        padding: 0px;
        position: absolute;
        top: 13vh;
        transition: 0.3s linear;
        width: 512px;
    }
    /* Hover zoom on avatar */
    .css-13tht1l:hover {
        border-radius: 0px;
        height: 933px;
        left: -12px;
        max-width: 933px;
        top: calc(0px - 13vh);
        width: 933px;
        z-index: 9999;
    }

    /* Put chat and textarea more on right*/
    .css-735j5d{
        padding: 0px 0px 20px 5px;
        width: 100%;
    }
    .css-1lvpjll {
        height: 100%;
        top: 0px;
    }
    
    .css-1lbk8wf {
        padding: 0px 10px 0px 540px;
        width: 100%;
    }
    .css-g9r8dt,
    .css-is4lk1 {
        align-self: start;
        bottom: 0px;
        margin-left: 540px;
        width: calc(100% - 555px);
    }    
    .css-b9bzmp {
        padding: 0px 10px 0px 28%;
        width: 100%;
    }

    /* Dark system bubbles */
    .css-1y2ps2x {
        display: none;
    }
    .css-do4s31 {
        background-color: transparent;
        border: none;    
        color: var(--chakra-colors-secondaryWhite);
        display: grid;
        font-size: 20px;
        grid-template-columns: 1fr 1fr 1fr;
        margin-left: -10% !important;
        margin-top: 144%;
        --menu-shadow: transparent !important;
        opacity: 100% !important;
        visibility: visible !important;        
    }
    .css-do4s31 button:hover {
        background: -webkit-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .css-94x4at {
        background-color: transparent;
    }
    
/* ========================================================================
   Selfie page
======================================================================== */    
    /* Put Request image button at the top */
    .css-65tag0 {
        margin-bottom: 39%;
        position: fixed;
        z-index: 9999;
    }
}

/* ===================================================================================================================================
   For height 1080px and more
=================================================================================================================================== */
@media screen and (min-height: 1080px) {
    /* Hover zoom on avatar */
    .css-oies6c:hover,
    .css-v2kfba:hover,
    .css-13tht1l:hover {
        border-radius: 0px;
        height: 1080px;
        left: -10px;
        max-height: 1080px;
        max-width: 1080px;
        width: 1080px;
        z-index: 9999;
    }

    /* Dark system bubbles */
    .css-1y2ps2x {
        display: none;
    }    
    .css-do4s31 {
        background-color: transparent;
        border: none;    
        color: var(--chakra-colors-secondaryWhite);
        display: grid;
        font-size: 20px;
        grid-template-columns: 1fr 1fr 1fr;
        margin-left: -10% !important;
        margin-top: 170%;
        --menu-shadow: transparent !important;
        opacity: 100% !important;
        visibility: visible !important
    }
    .css-94x4at {
        background-color: transparent;
    }
}

/* ===================================================================================================================================
   For height 1080px
=================================================================================================================================== */
@media screen and (height: 1080px) {
    /* Hover zoom on avatar */
    .css-v2kfba:hover,
    .css-13tht1l:hover {
        border-radius: 0px;
        height: 1080px;
        left: -10px;
        max-height: 1080px;
        max-width: 1080px;
        width: 1080px;
        z-index: 9999;
    }
    
    /* Put Request image button at the top */
    .css-65tag0 {
        margin-bottom: 46.8%;
        position: fixed;
        z-index: 9999;
    }
}

/* ===================================================================================================================================
   For height 1440px
=================================================================================================================================== */
@media screen and (height: 1440px) {
    /* Dark system bubbles */
    .css-1y2ps2x {
        display: none;
    }
    .css-do4s31 {
        background-color: transparent;
        border: none;    
        color: var(--chakra-colors-secondaryWhite);
        display: grid;
        font-size: 20px;
        grid-template-columns: 1fr 1fr 1fr;
        margin-left: -10% !important;
        margin-top: 325%;
        --menu-shadow: transparent !important;
        opacity: 100% !important;
        visibility: visible !important
    }
    .css-do4s31 button:hover {
        background: -webkit-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .css-94x4at {
        background-color: transparent;
    }
}

/* ===================================================================================================================================
   For height 2160px
=================================================================================================================================== */
@media screen and (height: 2160px) {    
    /* Put textarea more on right*/    
    .css-b9bzmp {
        padding: 0px 10px 0px 32%;
        width: 100%;
    }
}

/* ===================================================================================================================================
   For height 4K
=================================================================================================================================== */
@media screen and (min-height: 1760px) {
    /* Put Request image button at the top */
    .css-65tag0 {
        margin-bottom: 39%;
        position: fixed;
        z-index: 9999;
    }
}
Modérateur
Bonjour,

On avance (même si je me dis que j'ai peut-être eu tort de demander tout le css Smiley lol vu son volume).

Étape suivante : il faudrait que tu construises un html minimal (j'insiste sur le mot minimal) qui reproduit ton problème avec le css que tu viens de poster.

Normalement, si tu prends une de tes pages, et que tu en retires tout ce qui ne sert pas par rapport au problème que tu veux résoudre, ça devrait suffire et ne pas être trop long à fabriquer.

Amicalement,
parsimonhi a écrit :
On avance (même si je me dis que j'ai peut-être eu tort de demander tout le css vu son volume).
ça ce n'est QUE mon thème Smiley smile et c'est pourquoi j'ai fournit à la base QUE la partie problématique.
mon bout de code qui génère le problème est dans :
/* Dark system bubbles */
parsimonhi a écrit :
Normalement, si tu prends une de tes pages, et que tu en retires tout ce qui ne sert pas par rapport au problème que tu veux résoudre, ça devrait suffire et ne pas être trop long à fabriquer.
ça ça va être casi impossible car le css de base du site est dans le html donc ça va faire 40km de long rien que le css et sans ça impossible de tester, c'est pourquoi j'ai fournit l'url du site en question dans mon post précédant tout le css de mon thème et qui est (lien supprimé par la modération).
et pour tester mon thème il est disponible ici (lien supprimé par la modération), ce qui sauf erreur de ma part serait plus pratique que des km de codes qui se suivent.
Modifié par parsimonhi (11 Jan 2024 - 18:27)
Modérateur
Bonjour,

Bon, malheureusement, on va arrêter là : ton exemple de site n'a rien à faire dans ce forum.

Je retire les liens, je laisse le reste.

Amicalement,
Modérateur
Bonjour,

Breat a écrit :
les sites d'ia sont interdite ? je ne savais pas désolé.

Non, ce n'est pas ça le problème. Ce n'était pas "grave", mais on doit faire attention à ce qu'on poste.

Amicalement,
oui je comprend et il est vrai que le site en question est une ia de petit(e) ami(e) virtuelle mais il peut tout à fait servir à autre chose.
j'ai moi même régler l'ia en tant qu'amie car le côté petite amie ne m'intéresse pas étant donné que j'utilise le site uniquement pour voir ce qu'il est possible de faire avec une ia, je l'utilise donc uniquement en SFW.

partant de ce principe, et ayant une question concernant non pas le site lui même mais du css j'ai pensé pouvoir demander de l'aide sur ce forum, il semblerait que je me soit trompé.

merci quand même
parsimonhi a écrit :
Lis tes messages que tu reçois en privé.
c'est fait je t'es même répondu Smiley smile
j'ai essayé de faire au mieux, c'est toujours un chouillat long désolé mais voici le html épuré avec quelques commentaires pour vous indiqué quoi est quoi etc :
<!DOCTYPE html>
<html>
<head>
</head>

<body>
    <div class="css-bvm5am">
        <header class="css-x3odei">
            <div class="chakra-stack css-1foy9ay">
                <!-- bouton pour afficher le menu principal qui passe en dessous de mon menu déplacé -->
                <button type="button" class="chakra-button css-17yucfl"><img alt="burger menu" src="burgerMenuIcon.svg" class="chakra-image css-1c2gsk7"></button>
            </div>
        </header>
        <div class="css-1lvpjll">
            <div class="css-g2goff">
                <!-- avatar qui passe en dessous de mon menu déplacé quand on passe la souris dessus -->
                <div class="css-13tht1l"><img alt="kindroid avatar" src="avatar.jpg" loading="eager" class="no-invert css-1bwrjj6" style="position: absolute; top: 0px; left: 0px; z-index: 1;">
                </div>
            </div>
        </div>
    
        <div class="chatScrollParent css-735j5d">
            <div class="css-1lbk8wf">
                <div class="css-yhhl9h">
                    <div class="css-teti0a">
                        bulles de chat
                    </div>
                    <div class="css-1jby15f">
                        <div class="css-100dd8p">
                            <button type="button" class="chakra-button css-1wmt28i"><img alt="regenerate" src="journalIcon.svg" class="no-invert css-uwwqev"></button>
                            <button type="button" class="chakra-button css-1wmt28i"><img alt="regenerate" src="regenerateIcon.svg" class="no-invert css-uwwqev"></button>
                        </div>
                        <!-- j'ai masqué ce bouton pour afficher et déplacer son contenu -->
                        <button type="button" class="chakra-button chakra-menu__menu-button css-1y2ps2x" aria-label="more-options" id="menu-button-:r28v:" aria-expanded="false" aria-haspopup="menu" aria-controls="menu-list-:r28v:"><span class="css-xl71ch">•••</span></button>
                        <!-- j'ai masqué ce bouton pour afficher et déplacer son contenu -->
                    </div>
                </div>
            </div>
            <!-- contenu du bouton masqué -->
            <div class="chakra-portal"> <!-- je ne les ai pas mis ici mais la class chakra-portal est également présente dans les bulles de chat et un peu partout sur le site -->
                <div class="css-r6z5ec" style="visibility: hidden; position: absolute; min-width: max-content; inset: 0px auto auto 0px;">
                    <div class="chakra-menu__menu-list css-do4s31" tabindex="-1" role="menu" id="menu-list-:r28v:" aria-orientation="vertical" style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"><button type="button" id="menu-list-:r28v:-menuitem-:r2a4:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-94x4at" data-index="0">Auto-selfie</button><button type="button" id="menu-list-:r28v:-menuitem-:r2a5:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-94x4at" data-index="1">Chat break</button><button type="button" id="menu-list-:r28v:-menuitem-:r2a6:" role="menuitem" tabindex="-1" class="chakra-menu__menuitem css-94x4at" data-index="2">View journal entries</button></div>
                </div>
            </div>
            <!-- contenu du bouton masqué -->
            
            <!-- Menu principal qui passe en dessous de mon menu déplacé quand le menu principal est ouvert -->
            <div class="css-1raxatq">
                <div class="css-1k5b5ke">
                    <div class="css-1wvil90">
                        <div class="css-7yy1ke">
                            <h2 class="chakra-text css-23xfka">Settings</h2>
                            <div class="css-j7qwjs"><button class="css-o32bv9">
                                <!-- Contenu du menu principal qui passe en dessous de mon menu déplacé quand le menu principal est ouvert -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Menu principal-->
        </div>
    </div>
</body>
</html>

Modifié par Breat (13 Jan 2024 - 09:20)
Prévenir un modérateur
Répondre au sujet
Aller à