Difficulté d'un habillage graphique avec HTML

Bonjour
j'ai migré un vieux site vers un site plus moderne. Le problème est que le HTML semble différent car je n'arrive pas à arriver au résultat graphique suivant :


J'arrive actuellement à :


avec

.modulePanelPurple h3.module-title{
    border: 2px dotted;
    background-color: #e9138b; 
}
h3.module-title  {
    color: #fff;    
}

<div class="sidebar-left-position moduletable modulePanelPurple ico-agenda"> ...	
            <h3 class="module-title">Mon utilitaire</h3> ...      
</div>

je n'arrive pas à inclure et positionner l'image ainsi qu'à décaler le titre
Voici sur les éléments à priori utilisable dans le titre et son container




Le code est généré par le cms , est-ce qu'on peut faire avec ?
Modifié par HDcms (04 Sep 2025 - 09:32)

Bonjour, pour créer un espace à l'intérieur d'une boite, tu peux utiliser les marges internes soit padding.
https://developer.mozilla.org/fr/docs/Web/CSS/padding

quelque chose comme :

        h3.module-title {
            color: #fff;
            padding: 8px 30px;
        }

En ce qui concerne l’icône, impossible de dire comme ça, sans connaitre comment ton CMS inclus les icônes. Généralement c'est avec les pseudo class :after ou :before
https://developer.mozilla.org/fr/docs/Web/CSS/::after
https://developer.mozilla.org/fr/docs/Web/CSS/::before
Modifié par casper2 (04 Sep 2025 - 13:01)

Bonsoir
Ok merci effectivement pour le 1er, cela faisait longtemps que je ne m'étais pas remis au css

Pour le 2ème c'est un icone interne mais que je n'ai pas encore retrovué ce soir, que je peux atteindre avec une url comme

background: url('../img/sprite.png');

Est-ce que cela peut te suffire pour me proposer une ligne ?

Bonsoir, oui cela peut suffire.
Quelque chose comme :

        .modulePanelPurple h3.module-title {
            border: 2px dotted;
            background-color: #e9138b;
        }

        h3.module-title {
            color: #fff;
            padding: 10px 60px;
            background-image: url(images/calendrier-64.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position:  10px;
        }

Me donne :

Modifié par casper2 (04 Sep 2025 - 20:48)

Bonsoir,

Dans ce cas-là c'est bien un pseudo-élément qui fera l'affaire. Vous pourriez faire par exemple :

h3.module-title::before {
  content: ''; /* la valeur est vide, mais la propriété est nécessaire pour déclarer le pseudo-élément */
  display: inline-block;
  height: 1em;
  width: 1em;
  color: currentcolor; /* ça c'est un bonus */
  background-image: url('../img/sprite.png');
  background-size: 1em 1em;
}

Ce n'est pas la seule manière de faire, mais en voilà une. Il y a surement des réglages CSS à faire mais, si le chemin relatif de l'icône est bon, vous devriez déjà avoir quelque chose.