Problème de css :(

Bonjour

Dans un ‹ custom-buttoncard › j’appelle un template pour positionner les jauges de cartouches

le code de mon template est le suivant :

 carte_cartouches_imprimante:
    styles:
      custom_fields:
        barre_imprimante_noire_bk:
          - opacity: 90%
          - position: absolute
          - top: 50%
          - left: 0%
          - width: 40%
          - transform: translate(-50%, calc(-50% + 10px))
          - z-index: 1
          - '--ha-card-border-width': 0px
        barre_imprimante_noire_pgbk:
          - opacity: 90%
          - position: absolute
          - top: 50%
          - left: 0%
          - width: 50%
          - transform: translate(-50%, calc(-50% + 10px))
          - z-index: 2
          - '--ha-card-border-width': 0px
        barre_imprimante_cyan:
          - opacity: 90%
          - position: absolute
          - top: 50%
          - left: 35%
          - width: 40%
          - transform: translate(-50%, calc(-50% + 10px))
          - z-index: 1
          - '--ha-card-border-width': 0px
        barre_imprimante_photo_blue:
          - opacity: 90%
          - position: absolute
          - top: 50%
          - left: 60%
          - width: 40%
          - transform: translate(-50%, calc(-50% + 10px))
          - z-index: 1
          - '--ha-card-border-width': 0px
        barre_imprimante_yellow:
          - opacity: 90%
          - position: absolute
          - top: 75%
          - left: 0%
          - width: 40%
          - transform: translate(-50%, calc(-50% + 10px))
          - z-index: 1
          - '--ha-card-border-width': 0px
        barre_imprimante_noire_magenta:
          - opacity: 90%
          - position: absolute
          - top: 75%
          - left: 35%
          - width: 40%
          - transform: translate(-50%, calc(-50% + 10px))
          - z-index: 1
          - '--ha-card-border-width': 0px

et le code du buttoncard :

    type: custom:button-card
    entity: sensor.canon_ts8200_series
    name: Imprimante
    icon: mdi:printer
    label: |
      [[[
        if (states['sensor.canon_ts8200_series'].state == "unavailable")
          return "Éteint"
        if (states['sensor.canon_ts8200_series'].state == "printing")
          return "Impression"
        if (states['sensor.canon_ts8200_series'].state == "stopped")
          return "Arrêt"
        if (states['sensor.canon_ts8200_series'].state == "idle")
          return "Veille"
        return states['sensor.canon_ts8200_series'].state
      ]]]
    template:
      - base
      - base_large
      - carte_cartouches_imprimante
      - state_imprimante
    custom_fields:
      barre_imprimante_noire_bk:
        card:
          type: conditional
          conditions:
            - entity: sensor.canon_ts8200_series
              state_not: unavailable
          card:
            type: custom:bar-card
            name: cartouche_black_bk
            entities:
              - entity: sensor.canon_ts8200_series_black_bk
                color: rgb(30,30,30)
            entity_row: true
            direction: null
            unit_of_measurement: '%'
            max: 100
            positions:
              value: inside
              name: 'off'
              indicator: 'off'
            height: 17px
            width: 100%
            icon: 'off'
            style: |-
              bar-card-value {
                font-size: 11px;
                font-weight: bold;
                color: var(--text_on);
              }
      barre_imprimante_noir_pgbk:
        card:
          type: conditional
          conditions:
            - entity: sensor.canon_ts8200_series
              state_not: unavailable
          card:
            type: custom:bar-card
            name: cartouche_black_pgbk
            entities:
              - entity: sensor.canon_ts8200_series_black_pgbk
                color: rgb(30, 30, 30)
            entity_row: true
            direction: null
            unit_of_measurement: '%'
            max: 100
            positions:
              value: inside
              name: 'off'
              indicator: 'off'
            height: 17px
            width: 100%
            icon: 'off'
            style: |-
              bar-card-value {
                font-size: 11px;
                font-weight: bold;
                color: var(--text_on);
              }
      barre_imprimante_cyan:
        card:
          type: conditional
          conditions:
            - entity: sensor.canon_ts8200_series
              state_not: unavailable
          card:
            type: custom:bar-card
            name: cartouche_cyan
            entities:
              - entity: sensor.canon_ts8200_series_cyan
                color: rgb(0, 255, 255)
            entity_row: true
            direction: null
            unit_of_measurement: '%'
            max: 100
            positions:
              value: inside
              name: 'off'
              indicator: 'off'
            height: 17px
            width: 100%
            icon: 'off'
            style: |-
              bar-card-value {
                font-size: 11px;
                font-weight: bold;
                color: var(--text_on);
              }
      barre_imprimante_magenta:
        card:
          type: conditional
          conditions:
            - entity: sensor.canon_ts8200_series
              state_not: unavailable
          card:
            type: custom:bar-card
            name: cartouche_magenta
            entities:
              - entity: sensor.canon_ts8200_series_magenta
                color: rgb(255, 0, 255)
            entity_row: true
            direction: null
            unit_of_measurement: '%'
            max: 100
            positions:
              value: inside
              name: 'off'
              indicator: 'off'
            height: 17px
            width: 100%
            icon: 'off'
            style: |-
              bar-card-value {
                font-size: 11px;
                font-weight: bold;
                color: var(--text_on);
              }
      barre_imprimante_photo_blue:
        card:
          type: conditional
          conditions:
            - entity: sensor.canon_ts8200_series
              state_not: unavailable
          card:
            type: custom:bar-card
            name: cartouche_blue
            entities:
              - entity: sensor.canon_ts8200_series_photo_blue
                color: rgb(0, 48, 143)
            entity_row: true
            direction: null
            unit_of_measurement: '%'
            max: 100
            positions:
              value: inside
              name: 'off'
              indicator: 'off'
            height: 17px
            width: 100%
            icon: 'off'
            style: |-
              bar-card-value {
                font-size: 11px;
                font-weight: bold;
                color: var(--text_on);
              }
      barre_imprimante_yellow:
        card:
          type: conditional
          conditions:
            - entity: sensor.canon_ts8200_series
              state_not: unavailable
          card:
            type: custom:bar-card
            name: cartouche_yellow
            entities:
              - entity: sensor.canon_ts8200_series_yellow
                color: rgb(255, 255, 0)
            entity_row: true
            direction: null
            unit_of_measurement: '%'
            max: 100
            positions:
              value: inside
              name: 'off'
              indicator: 'off'
            height: 17px
            width: 100%
            icon: 'off'
            style: |-
              bar-card-value {
                font-size: 11px;
                font-weight: bold;
                color: var(--text_on);
              }
    tap_action:
      action: more-info
    double_tap_action:
      action: toggle

et ca donne cela en resultat :

Capture d’écran 2023-01-11 à 22.26.15

je ne comprends pas ou cela peche ?

Je peux orienter horizontalement ou verticalement ca ne me derange pas, mais la je n’arrive meme pas à les positionner les unes / autres ?

pouvez vous m’aider?

merci

J’avais fait cette carte :

Si tu veux t’en inspirer :+1:

2 « J'aime »

Merci je vais regarder