Superposition d'image en CSS

Superposition d'image en CSS - HTML/CSS - Programmation

Marsh Posté le 04-03-2009 à 19:34:01    

Bonjours a tous!
J'ai un blog avec une list.
Dans chaque élément de la liste il y a des images (smiley) plus ou moin grosses.
Le prob c'est que ses images font déscendre le texte quand elle sont trop grosse et la petite image en début de list n'est plus alligné avec le texte...
http://img401.imageshack.us/img401/5131/cssimagesr.png
(J'ai accentué la taille de l'image pour voir le probleme mais il apparait un peu sur la ligne du dessus)
 
Je souhaiterai que ce ne soit pas l'image qui "indique" ou se trouve la ligne mais l'inverse. Un peu comme ça:
 
http://img26.imageshack.us/img26/194/cssimages02.png
 
Bon, peut être qu'il y a une autre solution, comme par exemple: le texte reste en haut et c'est l'image qui "descend" (c'est pas grave si les lignes qui suivent... sont plus bas, tant qu'elles restent aligné sur la petite flèche bleu...
 
Merci d'avance et bonne soiré ;)
 
 :hello:

Reply

Marsh Posté le 04-03-2009 à 19:34:01   

Reply

Marsh Posté le 04-03-2009 à 19:44:06    

Tu agrandis ton image de deux pixels vers le bas, et tu places en bottom plutôt que top dans ta css (peut-être que mettre en bottom uniquement suffira évidemment)

Reply

Marsh Posté le 04-03-2009 à 19:57:31    

Merci pour des réponses aussi rapide...

Citation :

Tu agrandis ton image de deux pixels vers le bas


Comment ça? En css ou directement dans le gif du smiley. Ou bien peut être parle tu de la flèche bleu.

Citation :

tu places en bottom plutôt que top dans ta css (peut-être que mettre en bottom uniquement suffira évidemment)


Tu dois faire référence à l'utilisation de l'attribut "position". Je n'en utilise pas. Mais quand j'essai ça ne donne rien de bon. Tu pensait peut etre l'utiliser sur le texte? Ou l'image?
 
Merci d'avance :)
 
 :hello:

Reply

Marsh Posté le 04-03-2009 à 20:17:15    

Positionner la flèche bleu en bas de la boite qui contient le texte, mais il faut que celui-ci soit toujours sur une ligne.
Tu dois bien sur remplacer element par ton sélecteur.

Code :
  1. element {background: url ('/path/to/images/bullet.gif') no-repeat bottom left;}


http://www.dustindiaz.com/css-shorthand/

Reply

Marsh Posté le 05-03-2009 à 00:04:11    

Merci pour la réponse!
J'y ai cru, j'ai éssayé mais:
 
http://img24.imageshack.us/img24/2938/csslist001.png
 
Cela dis, je vais laisser tomber, en effet, je n'ai pas trop envis que ces modifs me "nique" un peu le reste de mes listes qui elle, marche bien.
 
Donc voila, je te remercie beaucoup en tous cas pour tes réponses qui m'on quand même aider.
 
A bientôt et bonne continuation.
 
 :hello:

Reply

Marsh Posté le 05-03-2009 à 02:22:28    

Bonjour,
 
tu peux tenter avec un pourcentage mais ça sera pas correct dans tous les cas ...
 

element {background: url (/path/to/images/bullet.gif) no-repeat left 15%;}


Message édité par phosphoreloaded le 05-03-2009 à 02:26:54
Reply

Marsh Posté le 05-03-2009 à 10:50:26    

Ou alors, comme je disais, tu agrandis la taille de ton image de quelques pixels vers le bas !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed