18073 sujets

Questions générales et questions de débutants

[résolu] Panique ! souci avec padding de li et a et autres...

Hello,

je ne parviens pas à faire une liste toute bête et propre.
Voilà la page de mon échec : http://step.effisk.net/v3/index.html

J'essaye de :

1) correctement positionner les liens sur les boutons. Quand je mets des paddings ça colle des espaces entre les boutons sur Firefox.

2) faire en sorte que l'image en background lors du a:hover couvre tout le bouton et pas seulement le texte. J'ai bien tenté un li:hover mais ça ne fonctionne que sous Firefox. => ok ça c'est fait

Sans me donner la solution toute cuite dans le bec, quelqu'un aurait une piste pour m'éclairer ?

Bonne nuit Smiley cligne
Modifié par effisk (11 Apr 2006 - 16:22)
Bonjour,

Suis un peu fatigué pour une explication précise, pardon, mais je vais essayer de te mettre sur la voie.
IE ne gère "hover" que sur les balises <a> (les liens donc).
L'effet au survol ne doit pas être sur un "li" mais un "li a" et "li a:hover". Si je reprends ton code, tu devrais avoir au final :

#buttons {
	position: absolute;
	margin-top: 30px;
	margin-right: auto;
	margin-left: 380px;
	width: auto;
	height: auto;
	}

#buttons ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

#buttons li a {
	display: block;
	padding: xxxxxx;
	margin: xxxxxx;
	width: 208px;
	height: 48px;
	background: transparent url(boutton_par_defaut.jpg) no-repeat;
	color: #fff;
	font: bold 18px Verdana, Geneva, Helvetica, sans-serif;
	text-decoration: none;
	}

#buttons li a:hover {
	background: transparent url(boutton_au_survol.jpg) no-repeat;
	}

-> il faut jouer sur les marges et padding du "buttons li a" pour placer le texte où tu veux.
-> le balisage ne change pas
-> button li a : il reprend tous les éléments de ton lien (police, graisse, taille, couleur et aucun soulignement)

Bonne nuit ! Smiley smile
Bonjour et merci pour ton coup de main.

J'ai enfin compris comment le hover fonctionne sur ce genre de menu avec un background qui change, merci. Smiley smile

Par contre je suis toujours confronté au même problème avec le centrage vertical du texte sur les boutons : si je rajoute un padding vertical ça me colle le padding entre les boutons (ça les éloigne), alors que je souhaite uniquement centrer le texte sans éloigner les boutons les uns des autres. Smiley murf

Je pense que c'est un peu foutu, étant donné que le bouton est l'arrière-plan du lien... Smiley ohwell
C'est quand même dingue cette affaire. Ca fait quelques heures que je traîne dessus, je fouille les tutos san résultat.

Il doit bien y avoir un moyen simple d'arriver à ce résultat proprement non ?

J'ai toujours la solution d'une table avec des cellules mais bon... Smiley ohwell

http://step.effisk.net/v3/index.html
ok vu. C'était tellement simple... Smiley confus

neko me l'avait dit mais je ne comprenais pas bien comment je pouvais jouer avec les margins et les paddings.

Il suffit d'ajouter un padding où il faut et de compenser avec un margin à l'opposé...

padding: 10px 0 0 15px;
margin: 0 0 -10px 0;

merci neko ! Smiley biggrin
Bonjour effisk,

Il me semble que ce tu cherches à faire fonctionne très bien avec :


#buttons li a {
       line-height : 48px;
       text-align : center;
	
        display: block;
	margin: 0;
	width: 208px;
	height: 48px;
	background: transparent url(button.jpg) no-repeat;
	color: #fff;
	font: bold 18px Verdana, Geneva, Helvetica, sans-serif;
	text-decoration: none;
	}


En rajoutant ces propriétes, cela ne fonctionne toujours pas.

Cependant, ta page comporte
quelques erreurs de validation

Je ne sais pas si la correction de ces erreurs résoudra le problème, mais au moins, nous serons fixés ...
Smiley cligne
Modifié par Vero (11 Apr 2006 - 15:58)
Vero a écrit :
Bonjour effisk,

Il me semble que ce tu cherches à faire fonctionne très bien avec :


#buttons li a {
       line-height : 48px;
       text-align : center;
	
        display: block;
	margin: 0;
	width: 208px;
	height: 48px;
	background: transparent url(button.jpg) no-repeat;
	color: #fff;
	font: bold 18px Verdana, Geneva, Helvetica, sans-serif;
	text-decoration: none;
	}


En rajoutant ces propriétes, cela ne fonctionne toujours pas.

Cependant, ta page comporte
quelques erreurs de validation

Je ne sais pas si la correction de ces erreurs résoudra le problème, mais au moins, nous serons fixés ...
Smiley cligne
Merci véro. J'ai résolu le problème quelques secondes avant que tu ne postes ton message
Smiley cligne mais merci de t'être penché dessus.

Pour ce qui est de la validation, je m'étais juste trompé de doctype (trop paresseux pour taper la ligne de code, je suis allé la pomper sur un vieux site que j'ai fait sans faire attention). C'est réparé !

edit: je viens de tester ton truc par curiosité, ça ne fait que centrer le texte horizontalement...
Modifié par effisk (11 Apr 2006 - 16:08)
effisk a écrit :
Merci véro. J'ai résolu le problème quelques secondes avant que tu ne postes ton message
Smiley cligne mais merci de t'être penché dessus.

edit: je viens de tester ton truc par curiosité, ça ne fait que centrer le texte horizontalement...


Exact, mais je ne comprends pas pourquoi.
Smiley decu

Enfin, l'essentiel est que ton problème soit résolu.

Au fait, n'oublie pas de le préciser dans ton titre !

Smiley cligne
Sujet clos
Aller à