Mise en forme d'un arrière plan

Mise en forme d'un arrière plan

par jaclam » Lun Jan 02, 2012 9:49 am

Bonjour

Tout nouveau sur ce forum car tout nouveau dans le domaine du CSS que je découvre avec beaucoup de plaisir.
Voici mon premier cas :
Feuille CSS
h2 {
color: blue;
background-color: yellow;
padding: 3px 20px 3px 20px;
}

mark{
color: white;
background-color: #e9967a;
padding: 3px 20px 3px 20px;
}

Dans mon code HTML :
<h2> Ceci est le titre 2 </h2>
<mark> Arrière plan délimité </mark>

Résultat à l'affichage :
mon titre h2 présente un background non ajusté à la taille du texte, alors que "mark" le permet. Et cela m'amène d'un coup plusieurs questions :
- Comment dois-je faire pour aligner l'arrière plan au texte dans mon titre h2 ?
- la fonction "mark" est-elle bien adaptée pour définir un titre de paragraphe ou de liste ?
- puis-je définir autant de "mark" que je souhaite (mark2, mark3,...) ?
- et enfin quelle est la différence entre "mark" , "class" et "id" ?

Merci par avance de vos précieux conseils...
... et bonne année à tous

Re: Mise en forme d'un arrière plan

par zakariadza » Mar Jan 03, 2012 3:09 pm

Vous pourriez faire ainsi:

<h2><span style="color:blue; background-color:yellow; padding: 3px 20px 3px 20px;">Ceci est le titre 2</span></h2>

Sinon vous pourriez régler le width du <h2> comme vous le souhaitez.

Re: Mise en forme d'un arrière plan

par jaclam » Mer Jan 04, 2012 1:33 pm

Vous pourriez faire ainsi:

<h2><span style="color:blue; background-color:yellow; padding: 3px 20px 3px 20px;">Ceci est le titre 2</span></h2>

Sinon vous pourriez régler le width du <h2> comme vous le souhaitez.

Merci beaucoup
En effet, ça marche comme ça, mais je ne comprends pas pourquoi : en effet, votre commande que je viens de copier directement dans mon code HTML ressemble aux instructions que j'avais mises dans ma feuille Css. ?
Où est l'astuce ? C'est le "SPAN" ?

Merci en tout cas

Re: Mise en forme d'un arrière plan

par zakariadza » Sam Jan 14, 2012 5:27 pm

Rebonjour,
En fait, ça fait au moins dix jours que vous avez posté votre réponse, et je crois que vous avez trouvé la solution, mais ça m'empêche pas de répondre en tous cas ;)
En fait, la background-color du h2 s'ajuste pas correctement parce que les règles css appliquées sur ce dernier touchent toute la ligne où est placé le <h2>, c'est pourquoi qu'on doit faire un span à l'interieur que pour lequel le background-color ne s'applique qu'à l'écriture elle-même.
En ce qui concerne le <mark>, je vous déconceille de l'utiliser pour colorier le fond, car ce n'est pas vraiment fait pour ça.
Merci et bonne journée.