aligner deux images sur la meme ligne ?!

aligner deux images sur la meme ligne ?! - HTML/CSS - Programmation

Marsh Posté le 30-10-2005 à 15:31:52    

bonjour,
 
 
Je voudrais alignés 2 images sur la meme ligne  
donc 1 ici et 1 autre juste a coté collée mais sur la même  
 
quelle balise CSS doit-je utiliser ?

Reply

Marsh Posté le 30-10-2005 à 15:31:52   

Reply

Marsh Posté le 30-10-2005 à 18:35:16    

mansour a écrit :

bonjour,
 
 
Je voudrais alignés 2 images sur la meme ligne  
donc 1 ici et 1 autre juste a coté collée mais sur la même  
 
quelle balise CSS doit-je utiliser ?


 
On dit propriété pour les CSS et non balise.
 
Pour ton problème, le retour à la ligne est défini par le type boîte généré. Autrement dit, tes images doivent être de la bonne taille (pour pouvoir être sur la même ligne) est être définies en

img {display: inline;}

Reply

Marsh Posté le 30-10-2005 à 19:15:19    

IMG est un élément inline de type remplacé, ce qui signifie qu'il ira a la suite des autres éléments inline, mais en plus tu pourras lui donner des dimensions, à l'inverse des éléments non-remplacés


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 31-10-2005 à 10:26:02    

merci pour vos réponse :)

Reply

Marsh Posté le 31-10-2005 à 10:28:05    

mais on mets ou  img {display: inline;} ?   dans la feuille de style on la mets ou ?

Reply

Marsh Posté le 31-10-2005 à 11:29:42    

mansour a écrit :

mais on mets ou  img {display: inline;} ?   dans la feuille de style on la mets ou ?


 
Dans le feuille de style.

Reply

Marsh Posté le 31-10-2005 à 11:43:23    

mansour a écrit :

mais on mets ou  img {display: inline;} ?   dans la feuille de style on la mets ou ?


Comme, l'a expliqué gatsusat, <img> est déjà un élément de type en-ligne.
Il est donc inutile de lui préciser une seconde fois.
 
Pour aligner horizontalement des éléments en-ligne dans un bloc, on utilise tout simplement la déclaration "text-align: center"
 
Bonne chance :)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 31-10-2005 à 11:52:16    

sibelius a écrit :

Comme, l'a expliqué gatsusat, <img> est déjà un élément de type en-ligne.


sauf que c'est faux [:klem3i1]
 
Une image est effectivement censée être un élément inline par défaut mais:

  • Internet Explorer, PC ou Mac, affiche toujours une image en tant que bloc
  • Mozilla/Firefox, Safari et Opera affichent les images en tant que bloc en mode Quirks et inline en mode Strict


Voila [:klem3i1]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 31-10-2005 à 11:56:23    

masklinn a écrit :

sauf que c'est faux [:klem3i1]
 
Une image est effectivement censée être un élément inline par défaut mais:

  • Internet Explorer, PC ou Mac, affiche toujours une image en tant que bloc
  • Mozilla/Firefox, Safari et Opera affichent les images en tant que bloc en mode Quirks et inline en mode Strict



Si tu places deux éléments <img> dans ton document, ces deux images s'afficheront sur la même ligne. C'est le comportement qui définit les éléments de type en-ligne.
 
Que veux-tu dire par "<img> est affiché en tant que bloc" ?  
Ça se manifeste comment pour toi ?
 
Tu parles peut-être de ça ? http://forum.alsacreations.com/faq/#item58


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 31-10-2005 à 11:57:58    

sibelius a écrit :

Si tu places deux éléments <img> dans ton document, ces deux images s'afficheront sur la même ligne. C'est le comportement qui définit les éléments de type en-ligne.


Sauf que la balise img est définie comme inline dans la norme, mais n'est jamais inline en mode Quirks et n'est jamais inline tout court sous Internet Explorer [:klem3i1]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 31-10-2005 à 11:57:58   

Reply

Marsh Posté le 31-10-2005 à 12:01:23    

D'où ma question : qu'appelles-tu inline ?
Sur IE les images s'affichent les unes à côté des autres et non les unes sous les autres.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 31-10-2005 à 12:09:45    

masklinn a écrit :

Sauf que la balise img est définie comme inline dans la norme, mais n'est jamais inline en mode Quirks et n'est jamais inline tout court sous Internet Explorer [:klem3i1]


 
 [:pingouino]


---------------
http://www.alsacreations.com, http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net. A ne surtout pas prendre en exemple : http://www.worldinternet.be
Reply

Marsh Posté le 31-10-2005 à 12:59:45    

sibelius a écrit :

D'où ma question : qu'appelles-tu inline ?
Sur IE les images s'affichent les unes à côté des autres et non les unes sous les autres.


L'équivalent de display: inline [:spamafote]  


http://www.quirksmode.org/css/quirksmode.html


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 31-10-2005 à 13:07:18    

Bref, on tourne en rond.
 
Sur IE :
- les images s'affichent en-ligne (= dans le corps du texte, sans créer de retour à la ligne), soit l'équivallent de display inline.
- elles ne peuvent pas contenir de blocs, soit l'équivallent de display inline.
- elles s'alignent comme tous les éléments en-ligne à l'aide de la propriété "text-align", soit l'équivallent de display inline.
 
Bref, dans le sujet et la question posée, c'est tout ce qu'on leur demande, il me semble.
 
A part que <img> est un inline remplacé, quelles peuvent être ces fameuses différences tellement essentielles qui diraient que <img> n'est pas considéré comme inline sur IE ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 31-10-2005 à 13:19:05    

sibelius a écrit :

A part que <img> est un inline remplacé, quelles peuvent être ces fameuses différences tellement essentielles qui diraient que <img> n'est pas considéré comme inline sur IE ?


Leur non respect de vertical-align [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 31-10-2005 à 13:35:43    

masklinn a écrit :

Leur non respect de vertical-align [:spamafote]


lol
Ah oui ok. Mais avoir un bug de comportement sur vertical-align ne signifie pas pour dire que les élements ne sont plus en-ligne, avec toutes les conséquences que cela implique.
Sinon, il n'y aurait plus aucun élément qui ne respecterait sa "structure"  :pt1cable:  
 
Bref, en résumé :
- <img> est un élément en-ligne remplacé, donc la question est réglée avec text-align (puisque cette propriété fonctionne sur tous les éléments en-ligne... oui, oui, même sur IE)
- <img> possède toutes les caractéristiques d'un élément en-ligne (affichage par défaut en flux, imbrications, etc.), sauf que sur IE (et d'autres), il déconne au niveau de la verticalité.
 
Ça plaît à tout le monde ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 31-10-2005 à 14:15:51    

putaing, quand les pros des CSS parlent, ca fuse à tout va


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 31-10-2005 à 14:21:24    

gatsusat a écrit :

putaing, quand les pros des CSS parlent, ca fuse à tout va


Je ne suis pas "pro". Je suis en apprentissage permanent :)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 31-10-2005 à 14:35:04    

vi c'est vrai, mais ton bouquin je l'ai conseillé aux developpeurs web de ma boite après leur avoir fait une demo de 2h30 sur les CSS. enfin il y en a surtout un qui était très très convaincu.


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 31-10-2005 à 14:38:02    

gatsusat a écrit :

enfin il y en a surtout un qui était très très convaincu.


LOL
C'est toujours mieux que rien  :pt1cable:  


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 31-10-2005 à 15:53:39    

sibelius a écrit :

LOL
C'est toujours mieux que rien  :pt1cable:


 
ben CT le directeur technique qui m'a demandé de changer tous les menus du site de la boite pour les passer en CSS, resultat : 5ko de gagné par pages.
 
et la prochaine monture des autres sites sera à 90 % en CSS, juste une structure principal (squelette) est dans un tableau, afin de tester un peu compatible avec IE5. (c'est pas moi qui l'a fait c'est lui) lol


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 31-10-2005 à 16:03:14    

gatsusat a écrit :

resultat : 5ko de gagné par pages.l


Bof, pas énorme. Les pages devaient être assez légères au départ déjà.
J'ai déjà connu des économies de 50 à 60%.
 

gatsusat a écrit :

et la prochaine monture des autres sites sera à 90 % en CSS, juste une structure principal (squelette) est dans un tableau, afin de tester un peu compatible avec IE5. (c'est pas moi qui l'a fait c'est lui) lol


Héhé ben c'est bien, tu as su te montrer convaincant :)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 31-10-2005 à 16:04:35    

sibelius a écrit :

Bof, pas énorme. Les pages devaient être assez légères au départ déjà.
J'ai déjà connu des économies de 50 à 60%.


Heuuu 5ko sur juste le menu, je trouve ça honnête [:pingouino]
 
Surtout qu'on connaît pas les poids final/initial des menus [:pingouino]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 31-10-2005 à 16:07:48    

Ah oui, juste pour les menus ok ok
(quoique, avec moults javascript à rallonge et fonctions inutiles de Dreamweaver, on doit facilement atteindre des records pour les menus déroulants :))


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 31-10-2005 à 16:09:04    

sibelius a écrit :

Ah oui, juste pour les menus ok ok
(quoique, avec moults javascript à rallonge et fonctions inutiles de Dreamweaver, on doit facilement atteindre des records pour les menus déroulants :))


J'dis pas le contraire hein, mais 5ko sur juste le menu ça me semble correct :o
 
(et il y a largement pire que les trucs de DW, les menus de certains CMS [:pingouino])


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 31-10-2005 à 16:17:39    

masklinn a écrit :

(et il y a largement pire que les trucs de DW, les menus de certains CMS [:pingouino])


Ah oui ? Tant qu'on est dans le hors-sujet, tu peux me donner un exemple ? Ça m'intéresse bien, je vais m'en servir comme argumentaire pour les CSS :)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 31-10-2005 à 16:23:40    

sibelius a écrit :

Ah oui ? Tant qu'on est dans le hors-sujet, tu peux me donner un exemple ? Ça m'intéresse bien, je vais m'en servir comme argumentaire pour les CSS :)


J'ai fini mon stage donc j'ai plus le code, et j'ai plus le nom en tête (je me suis dépêché de l'oublier).
 
Mais disons que le générateur automatisé qui te recrée un fichier JS à chaque modif du menu, avec un fichier de fonctions génériques de 15ko et un fichier spécifique de ~10ko, inutilisable sans JS (et buggé jusqu'à la moelle avec tout autre navigateur que MSIE :sweat: ) ça fait peur


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 31-10-2005 à 18:55:36    

sibelius a écrit :

Bof, pas énorme. Les pages devaient être assez légères au départ déjà.
J'ai déjà connu des économies de 50 à 60%.
 


Ben oué, mais juste les menus ont été changés, et sachant que les anciens menus HTML à 2 balles faisait 3ko, je les ai passé à 1 ko et en comptant 4 menu ou groupes de menu par page. je trouve cela pas mal. mais c'est clair que j'ai déjà fait ds économies de 50% à 60% souvent


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 02-11-2005 à 22:10:32    

en faite je voudrais remettre un design en css que j'ai découper avec photoshop.
 
Si vous aviez 3 images a placer sur le meme ligne horizontalement comment vous feriez ?
 
Vous pouvez mettre svp parce que la je ne comprends pas  :)  
 
merci

Reply

Marsh Posté le 03-11-2005 à 07:53:17    

heu atta, si ce sont des images propre au desing, et que tu a charcuté le design comme un porc, ca ne va plus non plus.
 
on pourrai avoir une photo du design, ainsi ce que tu as fait. à mon avis on peut faire super simple par rapport à ce que tu es en train de faire.
Là tu dois jouer au boucher du design. Comme beaucoup font, et donc resultat : du khakha.
 
Donc tu sais ce qu'il te reste à faire :  
-uploader  ton design (image jpg du design global)
-upload la page HTML actuel que tu as fait
-uploader aussi toutes les images exportées de ton design que tu as charcuté

Reply

Marsh Posté le 04-11-2005 à 20:02:32    

Pourquoi l'uploader alors j'ai rien fais sur le design  :na:  
Je n'arrive pas aligne côte à côte deux ou trois images  :pt1cable:  
 
sérieux quel code vous mettriez vous en css si vous aviez 2 images à placer sur une ligne horizontal ?
 
comme ça :
 
------------------------------------------
image1  <-- coller sans espace-->  image2
------------------------------------------
 
merci.

Reply

Marsh Posté le 04-11-2005 à 22:54:51    

<img src="image1"><img src="image2">
En HTML 4 transitionnal, ça marche impec. Je voit pas ce qui te pose problème. (newbie inside)  
edit: finalement, ce n'est impec que sous firefox, pas sous ie, désolé.


Message édité par adoy le 04-11-2005 à 22:56:36
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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