Padding & background-image

Auteur
brudao	# 19 Mar 2010 - 12:47:07
5 Posts	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)
5 Posts
magentix	# 19 Mar 2010 - 12:59:05
10 Posts	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); }`
10 Posts
Heyoan	# 19 Mar 2010 - 12:59:30
Modérateur 8101 Posts	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. Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
Modérateur 8101 Posts
brudao	# 19 Mar 2010 - 13:17:03
5 Posts	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.
5 Posts
Heyoan	# 19 Mar 2010 - 13:36:37
Modérateur 8101 Posts	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. Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
Modérateur 8101 Posts