mettre des photos l'une à côté de l'autre

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : mettre des photos l'une à côté de l'autre

Re: mettre des photos l'une à côté de l'autre

par tipi » 27 sept. 2009, 17:24

J'ai réussi, c'est tout bête et rien à voir avec le code, c'est mon fichier qui était dans le mauvais chemin.

Merci de votre aide

Re: mettre des photos l'une à côté de l'autre

par FuZZyLine » 27 sept. 2009, 15:57

Salut,
alors c'est là que je ne comprend pas tout. Ma photo telle que je l'ai enregistré sur mon disque fait:
500px x 666px. et lorsque j'écris cette ligne là:
<img src="images\tata\black_flower_5.jpg" width="100" border="no" alt="Le titre de la photo 5" />
elle ne fait que:
100 x 133 pixels.
Je ne comprend pas pourquoi, si tu sais expliques moi.
Merci pour ton aide, j'en ai besoin pour html et css. J'ai tellement envi de maitriser ces 2 concepts mais je ne sais pas pourquoi, j'ai du mal.
Une seule valeur indiquée met la seconde valeur au % de la première. En fait, un simple calcul
t'aurait donné la solution: 500px (val originale) divisé par la valeur que tu as indiquée = 5. Si tu
prends ce facteur 5 et que tu t'en sert de diviseur cela donne: 666px / 5 = ~133.

Voili, voilou... ;)

Je te rends à stopher @+ bon code ;)

Re: mettre des photos l'une à côté de l'autre

par Victor BRITO » 27 sept. 2009, 15:22

Merci pour ton aide, j'en ai besoin pour html et css. J'ai tellement envi de maitriser ces 2 concepts mais je ne sais pas pourquoi, j'ai du mal.
Explique moi surtout la partie css.
Si tu as du mal et que tu cherches des explications, je te conseille vivement de commencer par consulter les deux sites suivants :
  • le Site du zéro (idéal pour apprendre le XHTML et les CSS en partant de zéro),
  • Alsacréations (dont les tutoriels en font un site de référence incontournable).
Pour avoir une réponse rapide à ta demande précise, tu peux t'inspirer du tutoriel sur la création de menus horizontaux, publié sur Alsacréations.

Sur ce, bonne lecture. ;)

Re: mettre des photos l'une à côté de l'autre

par tipi » 27 sept. 2009, 14:59

comment as tu fais avec le texte pour l'aligner à l'horizontal?

Explique moi surtout la partie css.

Merci

Re: mettre des photos l'une à côté de l'autre

par tipi » 27 sept. 2009, 14:29

alors c'est là que je ne comprend pas tout. Ma photo telle que je l'ai enregistré sur mon disque fait:
500px x 666px.

et lorsque j'écris cette ligne là:
<img src="images\tata\black_flower_5.jpg" width="100" border="no" alt="Le titre de la photo 5" />

elle ne fait que:
100 x 133 pixels.


Je ne comprend pas pourquoi, si tu sais expliques moi.

Merci pour ton aide, j'en ai besoin pour html et css. J'ai tellement envi de maitriser ces 2 concepts mais je ne sais pas pourquoi, j'ai du mal.

Re: mettre des photos l'une à côté de l'autre

par stopher » 27 sept. 2009, 14:21

Je viens de tester ton code ,
il fonctionne , ( j'ai remplacé les images par du texte )

Maintenant , quelles taille font tes miniature , car tu n'as pas énormément de place en largeur .

Dés que le bout est atteint , l'image passe à la ligne suivante ..

Re: mettre des photos l'une à côté de l'autre

par tipi » 27 sept. 2009, 14:12

cela veut dire que je dois faire comme cela:

Code : Tout sélectionner

li{ display:inline; }

ou:

Code : Tout sélectionner

ul#galerie_mini li { display:inline; float: left ; }

J'ai essayé la deuxième solution mais ça ne marche pas.


Merci

Re: mettre des photos l'une à côté de l'autre

par stopher » 27 sept. 2009, 13:58

Salut ,

pour qu'une liste , soit mise de façon horizontal , il te suffit de spécifier le style suivant aux balises <li> :

display:inline;

Ch.

mettre des photos l'une à côté de l'autre

par tipi » 27 sept. 2009, 12:54

Bonjour,

J'ai des photos qui sont l'une en dessous de l'autre mais je voudrais les mettres l'une à côté de l'autre (à l'horizontale) mais je n'y arrive pas. Afin de gérer mes pages (html) dynamiquement j'utilise le php.

Voici mon code php:




Voici mon code CSS:

Code : Tout sélectionner

div#galerie { width: 410px ; background: #eed ; border: 1px solid #dcb ; padding: 15px ; margin: 15px 30px ; text-align: center ; font: 0.9em Georgia, serif ; } ul#galerie_mini { text-align: center ; margin: 10 ; padding-right: 10 ; list-style-type: none; } ul#galerie_mini li { float: left ; } ul#galerie_mini li a img { margin: 2px 1px ; border: 1px solid #dcb ; }


Voici mon code php:
$contenu = '<div id="galerie"><ul id="galerie_mini">';
$contenu .= '<li><a href="images\tata\black_flower_1.jpg" title="Titre de la photo 1"><img src="images\tata\black_flower_1.jpg" width="100" border="no" alt="Le titre de la photo 1" /></a></li>';
$contenu .= '<li><a href="images\tata\black_flower_2.jpg" title="Titre de la photo 2"><img src="images\tata\black_flower_2.jpg" width="100" border="no" alt="Le titre de la photo 2" /></a></li>'; 
$contenu .= '<li><a href="images\tata\black_flower_3.jpg" title="Titre de la photo 3"><img src="images\tata\black_flower_3.jpg" width="100" border="no"  alt="Le titre de la photo 3" /></a></li>';
$contenu .= '<li><a href="images\tata\black_flower_4.jpg" title="Titre de la photo 4"><img src="images\tata\black_flower_4.jpg" width="100" border="no" alt="Le titre de la photo 4" /></a></li>'; 
$contenu .= '<li><a href="images\tata\black_flower_5.jpg" title="Titre de la photo 5"><img src="images\tata\black_flower_5.jpg" width="100" border="no" alt="Le titre de la photo 5" /></a></li>';
$contenu .= '</ul><dl id="photo"><dt>Titre de la photo 1</dt><dd><img id="big_pict" src="images\tata\black_flower_1.jpg" alt="Photo 1 en taille normale" /></dd></dl></div>'; 

Merci de votre aide