[résolu] Titres avec puces... la cata d'une débutante

Bonjour,
Je suis graphiste print, et je monte des charte web parfois que je rends sous photoshop ou illustrator. Pour la première fois, je dois le faire en css.
Bref... Là je sature totalement et je n'arrive plus à réflêchir. Je bute sur quelque chose qui doit vous sembler simple : des titres dans des blocs qui ont une puce devant eux.
J'en suis arrivée à changer mes titres en liste (LOL... Vous devez déjà hurler...) pour y appliquer la puce. Mais voici que celle-ci est collée au titre alors que je voulais "doser" l'espace entre les deux...
Je vais m'offrir une pause, là, car je craque littéralement alors que le reste s'est bien passé. J'y ai passé un nombre d'heures indéfinissable, mais c'est normal pour une première. Je suis au bout et je cale sur ça.
Merci si vous avez une idée simple là-dessus. J'ai pourtant le bouquin "CSS2..." sur les genoux !

Entki
Modifié par entki (22 Sep 2007 - 11:21)

Voilà ce à quoi j'avais pensé pour faire apparaître mon idée car un intégrateur va reprendre l'ensemble ensuite (c'est moche, je sais... mais je sèche cruellement):

#conteneur ul {
margin: 0;
padding: 8px 0 0 50px;
font-size: 8pt;
color: #483C43;
list-style-image: url(puce_titre.gif);

<div id="conteneur"><ul><li><em>Ils </em><strong>recrutent</strong></li></ul></div>
				</div>

Sinon, j'ai troucé ça, en effet, en fouillant bien dans le forum :

<img align="absmiddle" src="/tonImage.jpg"> tonTexte

Mais je cherche encore pour le faire en css...
Modifié par entki (21 Sep 2007 - 16:17)

Bonjour entki,

S'il ne s'agit pas d'une liste d'éléments, l'élément ul n'a rien à faire là.
Il s'agit à priori tout simplement d'un titre (dont je ne connais pas le niveau, disons que c'est un sous-titre) dont la syntaxe s'écrira en xhtml tout simplement:

<h2>Ils recrutent</h2>

Ensuite, tu peux lui attribuer en CSS une image de fond pour simuler la puce et un padding-left de la valeur que tu désires pour créer le décalage:

h2 {background:url('image.png') no-repeat 0 50%; padding-left:20px;}

J'ai obtenu le rendu !!!!
Mon code est-il viable ??

<div id="conteneur2"><h3><em>Ils </em><strong>recrutent</strong></h3></div>

et

#conteneur2 {
margin: -10px 0 0 30px;
font-size: 6pt;
letter-spacing: 1px;
color: #483C43;
background: url(puce_titre.gif) no-repeat 0 50%; 
padding-left:20px;
}
#conteneur2 h3{
font: lighter 130% Verdana;
}

Modifié par entki (21 Sep 2007 - 16:43)

Hello !

Tu te complique la vie avec le div.
Plus simple :

<h3 id="conteneur2"><em>Ils </em><strong>recrutent</strong></h3>

Ca t'obligera probablement à adapter la feuille de style css.
J'ai rapidement testé en local, et apparement pas de problème.
Par contre faudra voir si ca passe correctement sous IE6.

Quelques remarques :
- Attention avec les pourcentages pour les polices, surtout pour un élément de design. Dans le cas d'un titre, à la limite ca peu être pratique (le titre suivant le redimensionnement du texte)
- Plutot que d'aligner le tout via la position du background, laisse le background dans le coin supérieur-gauche (par défaut), utilise le padding pour aligner le texte avec la "puce", puis les margin pour aligner le tout avec le reste du texte.
- Tu peux également utilise "height" pour spécifier la hauteur de ton titre, mais dans ce cas, réduit les padding verticaux d'autant.
Si ta puce est déjà alignée avec le titre, mais que l'image est "coupée" parce que le texte du titre ne prend pas assez de place verticalement, tu peux augmenter la hauteur (height) du titre, jusqu'à ce que cela te convienne.

Résumé :
margin, padding, background: url() no-repeat, voir height devraient largement suffire.

Pour voir la taille de ton titre et la comparer avec ton image (afin de voir si elle est bien affichée en entier), utilise cette astuce :

background: red url() no-repeat);

L'image sera affichée par dessus le rouge, et tu pourra facilement voir si le titre est suffisamment haut ou pas.

Rappel dans la foulée :
padding-top : 4px; padding-bottom: 4px; height: 2px;
Donnera une hauteur totale à ton bloc de 10px. Donc attention lorsque tu utilisera des padding top et bottom pour aligner verticalement ton texte via à vis de la "puce" (du background, donc), car cela augmentera également la taille du bloc (donc décalera le contenu supérieur et/ou inférieur, etc...)

PS : J'utilise le terme "puce" au niveau "graphique" et pas "technique".
Techniquement, il s'agit bien évidement d'un "simple" background.