[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 ?

tu peux eventuellement modifier la hauteur de ligne avec line-height: xxx px
mais ça te modifieras pas en largeur...

Ç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 ?

>> blue:
voici une tite image. Mon travail n'est pas en ligne puisque c'est un developpement interne.

>> mpop:
J'avais en effet réalisé que cette propriété ne s'appliquait pas à un élément en ligne et oui, j'ai essayé de mettre en display:block mais du coup mon cadre prend toute la largeur de l'élément conteneur, ce que je ne veux pas. .

Ce que j'aurais aimé savoir, c'est s'il existait un moyen de subsitution pour faire ce que je voulait, mais apparemment non .

Bon en fait j'ai reussi a contourner le problème en reglant les marges de ce qui est au dessus et au dessous du span, mais je suis toujours intéréssé par la solution si quelqu'un en a une.

Bonjour vinzzonline,

Et pourquoi tu mettrais pas ton span dans un conteneur avec des padding ?

Bha ça c'est la solution facile !
Mais heu, tu as raison

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

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

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.

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)

Tiens c'est étrange, je ne savais pas qu'on pouvais redefinir un élément tel que <strong> dans une classe...
J'apprends de choses

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)

blue a écrit :
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.

Ah ok. J'avais donc bien compris qu'il s'agissait d'un problème de fusion de marges. J'ai eu peur un instant…
Ensuite, padding-top sur le conteneur global ou padding-top sur le conteneur du span, c'est kif-kif. Tout dépend de si l'un ou l'autre gêne ce qu'on voudrait faire comme mise en page.
Modifié par mpop (12 May 2006 - 17:51)