28173 sujets

CSS et mise en forme, CSS3

[Résolu] Padding : problème

Bonjour à tous,
Je suis en train d'essayer de faire des boutons en CSS avec Rollover. Ces boutons doivent donc faire une dimension de 80x27px, et contenir un texte. Au passage de la souris, l'arrière plan doit changer. La classe de ce bouton est "bouton". Le problème se situe entre IE et Firefox. Le code suivant fonctionne parfaitement avec Firefox, mais l'arrière plan des boutons est amputé sous IE. IE et Firefox n'intépretent pas de la meme façon la fonction padding.
Pour que ça fonctionne sous IE, il faut padding-top:5px; et height:27px; (au lieu de height 22px). Mais cette solution donne le résultat inverse sous Firefox, à savoir que ça me rajoute 5 pixels sous chaque bouton.
Comment faire pour arriver à un résultat homogène sur les 2 navigateurs, sachant que je souhaite qu'il y ait un espacement de 5 pixels entre le haut du bouton et le texte.
Code CSS
<style type="text/css">
div.bouton{
margin:0px;
padding-top:0;
  width : 80px;
  height : 27px;
  margin-left:3px;
  font-size : 10px;
  text-align: center; 
 vertical-align: middle;
 float:left;
}
.bouton a{
margin:0;
  width : 80px;
   height : 22px;
padding:5px;
 display : block;
  color: #808080;
  background : url('../img/2006/bg_bouton_off.gif') no-repeat;
  text-decoration: none;
}
.bouton a:hover {
margin : 0;
  width : 80px;
  height : 22px;
padding:5px;
   display : block;
vertical-align: middle;
  color : white;  
  background : url('../img/2006/bg_bouton_on.gif') no-repeat;
}
</style>

Code du bouton
<div style="background-color : red;" class="bouton"><a href="s">BOUTON</a></div>
.
Je précise que j'ai fait les essais avec un doctype 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


D'avance merci pour votre aide.
Modifié par le_fleau (27 Apr 2006 - 01:19)
T'as une URL ou l'on peut voir la chose ?

Sinon, .. attention, ça va peut être pas t'aider .. (je suis une tanche en CSS).

J'avais déjà fait des Roll over en css, .. et je ne m'y suis pas pris comme ça dutout.

En fait plutôt que de recharger un background (ça prend un peu de temps, l'affichage est pas instantané)... j'avais changé la position du background.

Ainsi ça donne ce genre de code:



#menu a:link , #menu a:visited{
float:left;
height:112px;
background-position:top;
text-decoration:none;

}
#menu a:hover{
background-position:bottom;


Si tu veux aller jeter un coup d'oeil, c'est là dessus .. je pense que c'est similaire à ce que tu recherches... des btns textes, ac un backG qui change au roll over.

http://www.olivierlivet.com/oli/projet_simerlab/ 
.bouton a:hover {
	/* Suivent ce commentaire des instructions CSS inutiles car déjà présentes à l'identique pour le style appliqué à [i].bouton a[/i]. On n'est pas obligé de tout repréciser, uniquement ce qui change. */
	margin : 0;
	width : 80px;
	height : 22px;
	padding:5px;
	display : block;
	/* Fin des instructions inutiles */
	
	vertical-align: middle; /* À quoi cela doit-il servir ? Ça me semble être une source d'erreurs potentielle. */
	
	/* Les instructions vraiment utiles, qui devraient marcher correctement */
	color : white;  
	background : url('../img/2006/bg_bouton_on.gif') no-repeat;
}


Et en corrigeant ça, qu'est-ce que ça donne.

PS: je suis aussi pour un exemple en ligne. Cf ma signature.
ol.li a écrit :
J'avais déjà fait des Roll over en css, .. et je ne m'y suis pas pris comme ça dutout.

En fait plutôt que de recharger un background (ça prend un peu de temps, l'affichage est pas instantané)... j'avais changé la position du background.

Les deux solutions sont valables. Je proposerait plutôt à le_fleau de résoudre son problème avec la solution qu'il a choisi, avant de se lancer dans autre chose en laissant en plan la première.

Pour l'histoire de l'affichage instantanné, c'est vrai pour le premier passage de la souris sur le bouton (ou sur un bouton utilisant cette image de fond), la deuxième image de fond n'étant pas encore chargé en mémoire. Dans certains cas, ça n'est pas bien méchant, surtout si on utilise la même image pour toute une série de boutons.
Précisons aussi que si l'image est déjà présente dans le cache du navigateur (lorsque l'utilisateur arrive sur une deuxième page utilisant la même feuille de style, ou s'il revient quelques heures ou jours ou même semaines plus tard), il n'y a pas de temps de latence.

Si on a beaucoup d'images de fond secondaires différentes (comme par exemple sur le site suivant : http://www.benlebegue.com ), on peut utiliser un script javascript pour charger automatiquement les images de fond secondaires en mémoire, lors du chargement de la page.
Modifié par mpop (27 Apr 2006 - 00:32)
Ya une tite latence sur ton lien ! (sans la parenthèse au passage) ..

pis pour finir sur les roll over .. ce que j'aime dans ma méthode .. c'est le préchargement .. (c'est el meme fichier) .. mais surtout .. c'est plus léger en code !! pas besoin d'indiquer 2 url de fichier à chaque fois ..;

Voilou !

mpop toi qui m'as l'air bien callé .. t'as pas une idée pour mon prob de height ?? Smiley cligne
http://forum.alsacreations.com/topic-4-13591-1-Soucis-height-100.html
ol.li a écrit :
Ya une tite latence sur ton lien !

Tiens, je viens de tester en vidant le cache au préalable, et j'ai rien remarqué. Mais j'ai une bonne connexion et je ne suis pas passé dès le début du chargement de la page sur les liens, donc ça avait eu le temps de précharger…

ol.li a écrit :
pis pour finir sur les roll over .. ce que j'aime dans ma méthode .. c'est le préchargement .. (c'est el meme fichier) .. mais surtout .. c'est plus léger en code !! pas besoin d'indiquer 2 url de fichier à chaque fois ..;

Oui, mais ça demande de gérer en plus la position du background. Alors bon, changer d'url ou changer de position, c'est kif-kif niveau code.

ol.li a écrit :
mpop toi qui m'as l'air bien callé .. t'as pas une idée pour mon prob de height ?? Smiley cligne
http://forum.alsacreations.com/topic-4-13591-1-Soucis-height-100.html

Si, c'est déjà fait Smiley cligne
mpop .. quand je disais que c'était plus light en code

c'es parce que, ac un 2 eme fichier t'es obligé d'indiquer le nouveau chemin .. et ça sera 1 différent pour chaque bouton (à moins d'utiliser le même roll over pour chaque btn ) ce qui n'était pas mon cas là:

http://www.olivierlivet.com/oli/projet_simerlab/

or le changement d'alignement de background peut se faire de façon globale pour tous les btn ..

bon après c'est vrai que le changement de fichier à un avantage quand le background est toujours le même .. -> que 2 fichiers ... alors que pour mes btn j'ai 2 version à chaque fois .. (mais dans le même fichier).
Salut,

on peut éviter le temps de latence du premier roll over avec deux images en mettant l'image utilisée dans l'état :hover comme background d'un élément quelconque du document pour lequel cette propriété n'est pas utile.

#element_quelconque {
background:url(image2.jpg) no-repeat 250cm 250cm;
}


comme ça la mise en cache est effectuée dès le chargement de la page.
Modifié par clb56 (27 Apr 2006 - 01:38)
ol.li a écrit :
mpop .. quand je disais que c'était plus light en code
…

Maintenant que j'y pense, c'est effectivement plus light en code, vu qu'on ne gère pas de Javascript externe pour le préchargement des images Smiley smile

Mais je n'aime pas trop travailler avec deux images sur une, question de feeling…
Sujet clos
Aller à