Ajustement de marge ou décalage

[Cryvar]

Bonjour,

je construits actuellement ma boutique à l'aide de prestashop, je tente de développer mon propre thème en reprenant un style qui existe déjà. Après lecture de plusieurs tutos, documentations, j'arrive à quelque chose qui commence à me convenir et je travaille sur les détails.

Mon problème est le suivant, sur la photo que je joins on peut voir un petit écart entre Fabricants et Equipements neufs, et j'aimerais pouvoir créer le même écart entre le bleu et Equipements neufs.

J'ai essayé avec ceci :

Code :

padding-top: 2px;

ce qui a déplacé mon écriture mais pas mes images de background.

Auriez-vous une petite idée ?

Merci.

[NoSmoking]

Bonsoir,
le margin influe sur la marge extérieure d'un conteneur, il repousse les éléments les uns des autres.
le padding influe sur la marge intérieure d'un conteneur, il repousse le contenu des bords, le contenu pouvant être un conteneur.

[Cryvar]

Bonjour,

merci pour l'information,

j'ai essayé de jouer avec le margin puis le margin-top puisqu'il s'agit de la marge supérieur que je souhaite modifié et ça a fonctionné sur deux de mes trois éléments. (Voir image jointe)
J'ai juste mon élément de gauche qui ne prend pas la marge.

Le code ou ca fonctionne :

Code :

1
2
3
4
5
6
7
8
.sf-menu {
	float: left;
	width: 966px;
	line-height:	1.2;
        background: transparent url(../img/blocktopmenu.gif) repeat-x;
	margin-top : 2px;
 
}

Code :

1
2
3
4
5
6
7
.sf-right {
  margin-right: 0px;
  float: right;
  width: 7px;
  background: transparent url(../img/blocktopmenu_right.gif) no-repeat right center;
  margin-top : 2px;
}

Mais ca ne fonctionne pas pour :

Code :

1
2
3
4
5
6
7
8
.sf-contener {
  clear: both;
  height: 30px;
  line-height: 30px;
  padding-left: 7px;
  background: transparent url(../img/blocktopmenu_left.gif) no-repeat left center;
  margin-top : 2px;
}

[NoSmoking]

sans le code HTML qui s'y raccroche difficile de t'aider, mais que vient faire le padding-left : 7px dans .sf-contener

une remarque concernant line-height

Code :

line-height : 1.2; /* quelle est l'unité */

autant utiliser la même pour tes différents éléments px, em ...