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

Eléphant du PHP | 77 Messages

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

ViPHP
ViPHP | 1136 Messages

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.

Eléphant du PHP | 77 Messages

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

ViPHP
ViPHP | 1136 Messages

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 ..

Eléphant du PHP | 77 Messages

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.

Eléphant du PHP | 77 Messages

27 sept. 2009, 14:59

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

Explique moi surtout la partie css.

Merci

Mammouth du PHP | 2937 Messages

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. ;)

Eléphant du PHP | 369 Messages

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 ;)

Eléphant du PHP | 77 Messages

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