28173 sujets

CSS et mise en forme, CSS3

Potionner un span à l'intérieur d'un div

Comment positionner à droite, à gauche ou au centre un span dans un div de manière relative (et/ou est-ce possible) ?
<div>
<span class="gauche" ><img src="monImageAGauche.jpg" /></span>
<span class="centre" ><img src="monImageAuCentre.jpg" /></span>
<span class="droite" ><img src="monImageADroite.jpg" /></span>
</div>

J'ai lu quelque part le css "float: right" entraine que le span devient "display:bloc". La concéquence est que le seul code css span.droite {float: right;} place bien le span à droite mais comme il devient "display:block" il se retrouve une ligne en dessus des 2 autres.
S'il faut utiliser "float: right" comment remettre le span en "display:inline" pour que tout soit sur la même ligne ?

NB : j'ai essayé span.droite {float : right;display:table-column ;} sans succes....
Modifié par ouioui2000 (27 Jun 2006 - 15:26)
Bonjour,
Tu as oublié de lire les régles du forum (Aide) et de présenter ton code comme il doit l'être.

la valeur table-column n'est pas implémentée par les plupart des navigateurs et la propriété float annule le display.

Pour centrer ton image centrale attribue un text-align:center a ton div
un float-right a ton image de droite mais tu dois la placer en premier dans le code, puis un float:left a ton image gauche.

Pourquoi mets tu tes images dans des <span>?
Administrateur
ouioui2000 a écrit :
Je mets mes images dasn des spans pour essayer justement les positionner dans le div....

Et pourquoi ne pas positionner les <img> directement ? C'est une balise comme une autre.
Merci c'est vrai que cela simplifie un peu le code :

img.right {
  float: right; 
}
<div>
  <img src="monImageAGauche.jpg" />
  <img src="monImageAuCentre.jpg"  />
  <img src="monImageADroite.jpg" class="droite" />
</div>


Mais mon image de droite est toujours une ligne au dessous des 2 autres.
Il y a peu etre d'autres solutions pour positionner 3 images dans un div. Une à gauche, une au centre au autre à droite ?
Modifié par ouioui2000 (27 Jun 2006 - 17:30)
Merci Hermann
a écrit :

tu dois la placer en premier dans le code

C'est bien cela, il faut bien mettre l'element à mettre à droite en premier...


img.right {
  float: right; 
}

<div>
  <img src="monImageADroite.jpg" class="droite" />  
  <img src="monImageAGauche.jpg" />
  <img src="monImageAuCentre.jpg"  />
</div>

Modifié par ouioui2000 (28 Jun 2006 - 12:22)
a écrit :
J'ai trouvé, il faut mettre l'element à mettre à droite en premier...


C'est à croire que tu n'as pas lu toute ma réponse...
Tu as oublié de mettre résolu.
Administrateur
ouioui2000 a écrit :
J'ai trouvé, il faut mettre l'element à mettre à droite en premier...

Oui bien-sûr :
Tutoriel a écrit :
Récapitulatif. Attention à bien comprendre le fonctionnement du positionnement flottant :

* L'élément est d'abord placé normallement dans le flux. Donc si un autre élement bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
* Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.
* Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.
Sujet clos
Aller à