margin qui ne fonctionne pas sur les <a> ?

[destroyedlolo]

Bonjour,

J'ai transforme en bouton des liens par le CSS suivant :

a.bouton{
	background-color:navy;
	text-decoration:none;
	color:white;
	text-align:center;
	font-weight:bold;
	text-align:center;
	padding:5px;
	margin: 5px 0 5px 0;
	border-style:outset;
	border-width:2px;
	border-color:silver
}

Comment se fait-il que si mes margin fonctionnent sur la droite et la gauche (je peux creer un espace entre 2 liens), ca ne fonctionne pas sur le haut et le bas ?

Par exemple, aller sur cette page et reduissez la taille de votre navigateur pour que les boutons bleu ne puissent s'afficher sur 1 ligne : vous verez que s'ils sont sur 2 lignes, ils se chevauchent.

J'ai essaye de changer le margin par

margin: 50px 0 50px 0;

mais ca n'a strictement rien change.

Merci pour votre aide.

A+

Laurent

[captain_torche]

Pour que cette marge soit active, il faut que tes éléments soient de type block, ce qui n'est pas le cas par défaut pour des liens.

Il faut donc que tu ajoutes ceci à ton CSS :

display: block;

Par contre, tes boutons prendront toute la place disposnible, il faut également ajouter un float: left.

[destroyedlolo]

Ok, merci Captain, je ne savais pas.

J'ai essaye avec display: block; mais s'etait complique pour re-obtenir la meme presentation.

Mais j'ai trouve une nouvelle solution qui m'evite de changer le code de ma page :

a.bouton {
	background-color:navy;
	text-decoration:none;
	color:white;
	text-align:center;
	font-weight:bold;
	text-align:center;
	padding:.5%;
	margin: 0px;
	line-height: 200%;
	border-style:outset;
	border-width:2px;
	border-color:silver
}

Le resultat est visible sur le lien que j'ai donne plus haut.

Bye

Laurent

Modifié 23 Mai 2007 par destroyedlolo