aligner deux images sur la meme ligne ?! - HTML/CSS - Programmation
Marsh Posté le 30-10-2005 à 18:35:16
mansour a écrit : bonjour, |
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;} |
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
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 ?
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.
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
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
Une image est effectivement censée être un élément inline par défaut mais:
Voila
Marsh Posté le 31-10-2005 à 11:56:23
masklinn a écrit : sauf que c'est faux
|
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
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
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.
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 |
Marsh Posté le 31-10-2005 à 12:59:45
sibelius a écrit : D'où ma question : qu'appelles-tu inline ? |
L'équivalent de display: inline
http://www.quirksmode.org/css/quirksmode.html
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 ?
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
Marsh Posté le 31-10-2005 à 13:35:43
masklinn a écrit : Leur non respect de vertical-align |
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"
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 ?
Marsh Posté le 31-10-2005 à 14:15:51
putaing, quand les pros des CSS parlent, ca fuse à tout va
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
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.
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
Marsh Posté le 31-10-2005 à 15:53:39
sibelius a écrit : LOL |
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
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
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à. |
Heuuu 5ko sur juste le menu, je trouve ça honnête
Surtout qu'on connaît pas les poids final/initial des menus
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 )
Marsh Posté le 31-10-2005 à 16:09:04
sibelius a écrit : Ah oui, juste pour les menus ok ok |
J'dis pas le contraire hein, mais 5ko sur juste le menu ça me semble correct
(et il y a largement pire que les trucs de DW, les menus de certains CMS )
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 ) |
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
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 ) ça fait peur
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à. |
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
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
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é
Marsh Posté le 04-11-2005 à 20:02:32
Pourquoi l'uploader alors j'ai rien fais sur le design
Je n'arrive pas aligne côte à côte deux ou trois images
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.
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é.
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 ?