Padding & background-image

Bonjour,

J'ai un soucis de mise en page en CSS suivant:

J'ai un <div> avec une image en arrière-plan. quand je fait un padding, l'image s'agrandit.
je veux faire un padding sur la hauteur pour positionner mon texte qui se trouve dans le div.
Voici le code.

#contenu { float:left; width: 900px; height: 25px; padding-top: 5px; text-align: center;
background-image:url(img.jpg); }

merci
Modifié par brudao (19 Mar 2010 - 12:49)

Le bloc s'élargit de 5px en hauteur (avec le padding).

Donc 25 - 5 = 20

Soit :

#contenu { float:left; width: 900px; height: 20px; padding-top: 5px; text-align: center; 
background-image:url(img.jpg); } 

Salut,

pas sûr de bien comprendre mais quelque remarques :
* lorsque tu ajoutes un padding à un élément (ici un DIV ?) qui possède déjà une hauteur (height), la hauteur apparente sera augmentée d'autant : il s'agit du modèle de boîte.
* par défaut une image en background css a une valeur de background-repeat égale à repeat : donc sa taille n'augmente pas mais elle est répétée verticalement et horizontalement.

Au passage je doute que tu aies besoin de faire flotter cet élément.

j'ai oublié d'ajouter que ça fonctionne sous internet explorer. c'est sous firefox que le problème se pose.
quand je retranche le padding de la taille(25-20), c'est a dire que je fixe maintenant le height à 20, ça fonctionne maintenant sous firefox mais sous internet explorer, l'image est reduite.

On peut donc en conclure que tu n'utilises pas un doctype en bonne et due forme et que IE bascule donc en mode Quirks.