[CSS] Positionner 2 images sur la meme ligne

Positionner 2 images sur la meme ligne [CSS] - HTML/CSS - Programmation

Marsh Posté le 15-11-2003 à 03:31:14    

hello
 
Je voudrais savoir comment positionner 2 images qui sont côte-à-côte, et en mettre une à guauche et l'autre à droite. J'ai d'abord essayé de faire une classe par image, mais ca ne fonconnait pas. J'ai aussi essayé en faisant deux div, un pour chaque image, mais ca non plus ca n'a pas fonctionné.
Comment faire pour que cella fonctionne, et de facon propre.
merci
 
(2emeQ. : Comment peut on mettre 2 div côte-à-côte comme avec mes images ?)

Reply

Marsh Posté le 15-11-2003 à 03:31:14   

Reply

Marsh Posté le 15-11-2003 à 09:50:27    

essaye avec la balise span, qui est utilisé "en ligne" contrairement aux div (mais je suis pas archi sure que ca fonctionne dans ton cas précis, à confirmer).
sinon tu peux tout de meme utiliser les div en ajoutant l'attribut float: left (ou right), il y a un lien explicatif dans la faq html du forum.


---------------
.: Clône de Drasche .:. Ebichuleys .:. Avec l'Aloe Vera je fais de beaux cacas [:dawa] .: www.oserselancer.com :.
Reply

Marsh Posté le 15-11-2003 à 12:22:12    

Big-Foot a écrit :

hello
 
Je voudrais savoir comment positionner 2 images qui sont côte-à-côte, et en mettre une à guauche et l'autre à droite.


Comment ça ? Par défaut deux images se mettent cote à cote, comme les smileys sur ce forum ? :??: :??:
 
A moins que tu voulais dire "mettre une image à gauche de l'écran et un autre à droite de l'écran". Dans ce cas il faut utiliser les flottants :
 

<div>
  <img id="gauche" ... />
  <img id="droite" ... />
</div>
 
img#gauche {
  float: left;
}
 
img#droite {
  float: right;
}


 
Et bien sûr une lecture de la FAQ sur le positionnement ne sera pas inutile.


Message édité par gm_superstar le 15-11-2003 à 12:22:34

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 15-11-2003 à 13:35:31    

Ok merci, ca fonctionne à peu pres bien avec les float. En tout cas c'est bon pour l'image a droite de l'écran. Mais pour celle de gauche si je fais :

Code :
  1. position: float;
  2. float: right;


il me la met bien a gauche de l'ecran, mais la j'ai un autre probleme : les div qui ce trouvaient en dessous du div avec les images, ce retrouvent entre les 2 images.  :(

Reply

Marsh Posté le 15-11-2003 à 13:37:31    

gm_superstar a écrit :

Et bien sûr une lecture de la FAQ sur le positionnement ne sera pas inutile.


 
Et j'ajoute que "position: float" ça n'existe pas.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 15-11-2003 à 13:40:00    

j'ai lu la faq mais j'ai pas vraiment trouvé comment faire ce que je veux

Reply

Marsh Posté le 15-11-2003 à 13:47:50    

bon en fait je crois que j'ai trouvé  :D  
j'ai mis un div comme ca apres les 2 images :
 

Code :
  1. <div class="spacer"></div>
  2. div.spacer
  3. {
  4. clear: both;
  5. }


 
C'est la bonne methode ? et ca fonctionnet comment ce spacer ?

Reply

Marsh Posté le 15-11-2003 à 20:11:03    

Big-Foot a écrit :

C'est la bonne methode ?


Oui :jap:

Big-Foot a écrit :

et ca fonctionnet comment ce spacer ?


Si on applique "clear: both" à un bloc (le DIV), alors cela force celui-ci à se mettre en dessous des bloc flottants à gauche et à droite qui le précèdent.
C'est une espèce de super retour à la ligne pour les blocs noyés dans des flottants.
 
Donc, tout ce qui suivra ce DIV, se trouvera en dessous des flottants, le DIV agissant comme une barrière.


Message édité par gm_superstar le 15-11-2003 à 20:11:57

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 15-11-2003 à 20:13:38    

ok merci :)

Reply

Marsh Posté le 22-03-2009 à 10:34:15    

le pb du spacer appliqué à un <div> se trouvant aprés les images est qu'il comporte une certaine hauteur et donc la suite des elements html, aprés les images, sera affichée seulement aprés avoir sauté la hauteur du <div> en question.
Visuellement ça peut être génant.
 
Il n y aurait pas une autre astuce?

Reply

Marsh Posté le 22-03-2009 à 10:34:15   

Reply

Marsh Posté le 22-03-2009 à 15:37:59    

ademus a écrit :

le pb du spacer appliqué à un <div> se trouvant aprés les images est qu'il comporte une certaine hauteur et donc la suite des elements html, aprés les images, sera affichée seulement aprés avoir sauté la hauteur du <div> en question.
Visuellement ça peut être génant.
 
Il n y aurait pas une autre astuce?


mettre à 0 les margin et padding?
ou tout simplement appliquer le clear: both à l'élement suivant


Message édité par blackhawker le 22-03-2009 à 15:41:06

---------------
création de site - photo
Reply

Marsh Posté le 22-03-2009 à 18:22:27    

J ai résolu la question en mettant les 2 images dans un div et en donnant à ce div la hauteur correspondant à la hauteur des images.
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed