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.

Bonjour
J'ai du mal à y arriver du fait que c'est un sprite avec un architecture HTML assez différente de l'ancien site; J'ai essayé plusieurs choses en souhaitant privilégier une icone avant le titre avec une fonte

.titreModInfos::before{
 font-family: "Font Awesome 6 Free";
	content: "\f2d2"; 
	font-weight: 900;
	display: inline-block;
	width: 40px;
	text-align: center;
	margin-left: -40px;
}
.titreModInfos::before {
  content: ''; /* la valeur est vide, mais la propriété est nécessaire pour déclarer le pseudo-élément */
  display: inline-block;
  height: 2em;
  width: 2em;
  color: currentcolor; /* ça c'est un bonus */
  background-image: url('../images/_NMH/sprite.png');
  background-size: 1em 1em;
}

Pour infos l'HTML modifié est maintenant :

<div class="sidebar-left-position moduletable modulePanelPurple ico-utilitaire titreModInfos"> ...
            <h3 class="module-title">Informations</h3>        <ul class="mod-menu mod-list nav flex-column ">
...</ul>
</div>

Bonjour, si l'image en background est un sprite, c'est à dire une image composée de plusieurs petite icône, il te manque le positionnement de cette icône.
Un codepen ou un jsfiddle d'exemple pour voir le problème exactement.

Attention dans ton exemple ci dessus tu indiques deux sélecteur identique. Ce qui veux dire que le dernier écrase le précédant. CSS => Cascading Style Sheets (feuilles de style en cascade)

Édit un ancien article pour aider à la mise en place.
https://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
Modifié par casper2 (08 Sep 2025 - 17:08)

Bonjour

Comme je le disais, je souhaite privilégier les fontes qui semblent beaucoup plus souples avec une grand biblio.
Dans ce cas, il semble que qq chose d'affiche mais incorrectement (je l'ai fais bouger avec une autre valeur du margin-left)

HDcms a écrit :
Comme je le disais, je souhaite privilégier les fontes qui semblent beaucoup plus souples avec une grand biblio.

Exact, dans ce cas pourquoi dans votre code plus haut vous faite appelle à sprite.png??
Je vois que vous voulez utilisez Font Awesome, est-ce que la police est bien sur votre serveur?
https://docs.fontawesome.com/web/setup/get-started
Si oui :

    <div class="sidebar-left-position moduletable modulePanelPurple ico-utilitaire titreModInfos"> ...
            <h3 class="module-title"><i class="fa-solid fa-calendar-days"></i> Informations</h3>        <ul class="mod-menu mod-list nav flex-column ">
...</ul>
</div>

https://fontawesome.com/icons/calendar-days?f=classic&s=solid

au début j'essayais avec le sprite que j'avai retrouvé
Effectivement je croyais que mon cms joomla ou le thème incorporé nativement ces polices.
Il ne semble pas Je recherche

Bonjour,
Je n'utilise pas le cms joomla, peut être que ceci pourrait vous aider.
https://web-eau.net/tutoriels-joomla/extensions/ajouter-la-font-awesome-a-joomla
https://docs-next.joomla.org/docs/template-tips/joomla-standard-font-awesome-fonts/

Bonjour
Bon je suis arrivé a quelque chose après pas mal de temps et de galère.
La bibliothèque Font awesome v7 serait bien incluse
Il s'agissait d'erreur dans le css, pas bien identifié mais bon voici ce qui est actuellement

.titreModInfos h3.module-title::before {
content: '\f073';
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  background-size: 36px 36px;
  padding: 5px; 
}

J'ai essayé différentes choses dont

 
.titreModInfos h3.module-title::before {
  content: '\f073';
  font-family: "Font Awesome 7 Free";
  font-weight: 900; 
  padding: 5px;
  color: currentcolor; /* ça c'est un bonus */
  background-size: 1em 1em;
}

Je n'ai d'ailleurs pas compris l'idée du bonus ?

Surtout je n'arrive pas à augmenter la taille de l'icône ni à décaler l'ensemble à 5px du bord gauche

Modifié par HDcms (10 Sep 2025 - 11:56)

Bon il me semble avoir avancé avec

h3.module-title  {
  color: #fff;     
  background-color: #e9138b; 
  font-size: 1.14rem;
  font-weight: 700;
  margin: 0px; 
  padding-top: 20px;
  padding-right: 0px;
  padding-bottom: 20px;
  padding-left: 10px;
}

Bonjour
Encore moi; J'aurai besoin de vos avis car sur un site lié au thème, une personne m'a finalement proposé une solution mais je ne vois pas les avantages/inconvénients de chaque pour l'intégrer !

.titreModInfos h3.module-title::before { 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: var(--fa-display, inline-block);
    font-family: "Font Awesome 7 Free";
    content: '\f05a';
    font-feature-settings: normal;
    font-style: normal;
    font-synthesis: none;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-rendering: auto;
    width: 2em;
    font-size: 2em;
} 

Bonjour, je ne saurais dire les avantages/inconvénients.
Si tu ne connais pas une propriété, regarde la documentation MDN à son sujet.

Bonjour
Je pense qu'un avis selon l'expérience est plus important dans cette comparaison que la doc même si j'essayais de comprendre les 3 premières lignes!
comme je n'ai pas compris le bonus color: currentcolor; dont je ne vois pas de changement !