Bonjour
 
 
--------- (résolu ici - probleme de background plus bas) ---------
J'ai une page, qui contient des titres. Jusque là, rien d'anormal.
Ce sont donc des titres h2, et je voudrais leur mettre une tite puce devant, pour faire joli.
 
Alors j'ai essayé plusieurs techniques, mais la puce que je veux utiliser est assez haute, et tous mes essais me donnent ceci :
 

 
Ce qui est particulièrement moche.
 
Alors que je voudrais avoir plutôt ça :
 

 
voire ça :
 

 
Ce qui n'est pas beaucoup plus joli, mais un peu quand-même.
 
J'ai essayé plusieurs possibilités après mes recherches (mettre la puce en background avec un padding-left, mettre le titre en display:list-item avec list-style-image) mais aucune ne me donne la possibilité de centrer verticalement le texte par rapport à la puce (ou alors je suis un peu con, ce qui est fort probable également).
 
 
---------------------------------------
 
Second problème :
 
J'ai une image de fond que je voudrais placer en bas de page.
Mon HTML est, plus ou moins, comme suit :

Et mon CSS comme ceci :

 
Problème : sur FF, mon image de fond apparaît en bas de la fenêtre, alors qu'elle devrait apparaître en bas du contenu (ce qu'elle fait sur IE). Du coup quand on scrolle, on a une image de fond au milieu de la fenêtre, c'est plutôt super moche.
 
J'ai essayé de mettre un hr avec clear: both avant la fermeture du div conteneur, mais rien n'y fait.
Comment mettre cette image de fond en bas du contenu et non pas de la fenêtre sous FF ?
 
 
 
Avez-vous une solution (en fait deux, du coup) pour mon esprit tourmenté ?
 
Merci !

En background et position centrée ?

en background, le problème, c'est que non seulement ça met le soulignement (border-bottom), mais en plus c'est coupé en haut et en bas. Je peux jouer avec les padding, mais le soulignement reste. Et le top, ça serait que le papillon déborde un peu en-dessous, que son bas soit au niveau de l'accroche en dessous, sinon ça fait trop d'espace autour du titre. Si jamais j'arrive à me faire comprendre...
 
 
Ah oui, et j'ai mis à jour mon post, j'ai un autre problème d'images de fond.

Fout un span dans ton h1, et met le soulignement sur le span

T'as qu'à rêgler la hauteur de ton bloc

heu...
ouais c'est une idée.

Oui, c'était con comme précision, parce que en fait c'était pas un problème.
 
N'empêche que j'aimerais bien qu'il n'y aie pas autant d'espace autour du titre, et j'aimerais bien aussi que le papillon déborde en-dessous.
Je suis en train de me demander, un tit span vide en position absolue par rapport au titre en position relative, avec des positions négatives, ça pourrait le faire, non ?
 
 
 
Et j'ai toujours mon problème de background
 
vous voulez des images ?

Je résume : En gros, tu veux une puce spéciale pour le titre qui déborde sur le paragraphe en dessous en faisant se décaler latéralement le début des premiéres lignes du texte du paragraphe qui le suit.
 
 
En métant une image sous forme de bloc aligné à gauche suivit par le titre et l'autre paragraphe, ca marchera. Je sais pas s'il y a une solution en tout css.

Non, ça ne décale rien du tout latéralement.
Regarde les screens que j'ai posté : la première image (ce que j'obtient), c'est un screen, et on voit qu'il y a largement la place, en-dessous de l'image, qu'elle descende sans rien toucher.

Quand t'as dit qu'il y avait trop d'espace autour de ton titre, je pensais que tu voulais que l'image dépasse sous le début du paragraphe qui suit le titre. C'est pas le cas?

sisi, mais elle ne décale rien latéralement, puisqu'elle a largement la place de descendre sans rien toucher, étant donné que rien n'est en-dessous d'elle.

tiens, ce que je voudrais :

up, surtout pour mon probleme de background (la puce je vais me démerder mais le background j'en chie)

http://gatsu.ftp.free.fr/Modele/puce/page.html
 
j'ai gardé un code très propre.
 
je pense que ton bloc avec la puce va se répéter non ?
 
donc un simple empilement d'éléments :  
<div>
<h2></h2>
<h3></h3>
<p></p>
</div>
 
ensuite j'ai juste colé la puce en background du div
puis stylé les autres éléments avec des border, margin et padding
 
et pour l'arbre je l'ai mis en background de l'élément HTML qui reste toujours constant sur tout l'écran normalement.
 
à moins que je me trompe un peu.
voili voilou

Merci, mais le problème de puce est résolu
 
j'ai fait ça :
<h2><span></span>label du titre</h2>
 
et j'ai mis le h2 en position relative, et le span en absolu, avec un top et un left négatifs, ainsi qu'une hauteur et une largeur.
 
Quoi que ta solution n'était pas mal non plus.
 
 
Non, maintenant c'est mon problème de background qui m'énerve