[RESOLU] Span et margin (-top et -bottom)... ?

Bonjour,

J'ai un <span> positionné dans un grand div. Ca span agit comme un présentateur de messages (erreurs ou notification), et il apparait quand il a besoin.

J'aimerai donc clairement le séparer du reste du contenu du div a l'aide de margin, notamment des marges hautes et basses.

Cependant, lorsque j'essaye d'appliquer cette propriété à mon span, ça ne marche pas .

J'ai bien mis des saut de ligne avant et après, mais je trouve que les espaces deviennent alors trop grands (je suis tatillon ).

Voici mon code:

CSS:

#content
{
  margin-left: 200px;
  padding: 5px;
  padding-top: 0px;
}

.error
{
  margin-top: 5px;
  margin-bottom: 5px;
  color: #B71F24;
  padding: 2px;
  padding-left: 25px;
  border: 1px dashed #333333;
  background: #FFFFE1 url("img/error.gif") no-repeat 4px 1px;
}

HTML:

<div id="content">
  ...
  <span class="error">Message ici...</span>
  ...
</div>

Modifié par vinzzonline (12 May 2006 - 16:06)

Bonjour vinzzonline,

C'est difficile de savoir ce que tu veux faire, en plus, on a pas l'image.

Tu as mis ton travail en ligne ?

Ça ne prend pas avec ton span, parce qu'un span est un élément de type en-ligne, pas un élément de type bloc, et les éléments de type en-ligne n'acceptent pas certaines propriétés réservées aux blocs.

Tu peux faire deux choses :
– mettre ton span en display: block ;
– considérer que si tu veux une séparation entre le span et le reste, c'est qu'il s'agit d'un élément à part, et dans ce cas pourquoi ne pas utiliser tout simplement un paragraphe ?

lol

blue a écrit :
Et pourquoi tu mettrais pas ton span dans un conteneur avec des padding ?

Ou avec des margin, d'ailleurs…

oui, mais le span est dans un conteneur et si on met des margin au conteneur du span, ça le fait descendre

Bonjour,

Tu pourrais utiliser un paragraphe auquel seraient appliquées les marges, puis englober le texte dans une balise inline et styler cet élément. La balise inline pourrait être <strong> par exemple : pour un message d'alerte ça me semble plus approprié qu'un <span> neutre.

<p class="error"><strong>Message d'alerte !</strong></p>

.error {
	margin: 5px 0;

}
.error strong {
	color: #B71F24;
	font-weight: normal;
	padding: 2px;
	padding-left: 25px;
	border: 1px dashed #333333;
	background: #FFFFE1 url(img/error.gif) no-repeat 4px 1px;
}

Modifié par Alan (11 May 2006 - 09:03)

mpop a écrit :

Lequel de conteneur ? Celui qu'on a rajouté autour du span, ou le conteneur global ?
Dans le premier cas, il me semble que c'est l'effet voulu (et puis si on veut que ça reste collé en haut, un margin-top à zéro et c'est réglé).
Dans le deuxième cas, ça se règle en préventif, avec un padding: 1px 0; sur le conteneur global.

Ben, le conteneur global.

Si tu veux, je reformule ma phrase :

a écrit :

oui, mais le span est (déjà) dans un conteneur (au départ) et si on met des margin au (nouveau) conteneur du span, ça le fait descendre (le premier conteneur qui existait déjà)

Donc, si on met un margin au conteneur du span, ça fait descendre le conteneur global, même avec un margin-top à zéro (sur le conteneur global), comme tu le suggères, car il a mis un padding-top à zéro sur le conteneur global, au départ, comme tu peux le voir dans son premier post.

C'est pour ça que je lui ai suggéré de mettre un padding sur le conteneur du span car c'est ce qui marchait en l'état.

edit: faute
Modifié par blue (12 May 2006 - 15:53)