28172 sujets

CSS et mise en forme, CSS3

Legende sous une photo[Résolu]

bonjour
je sais que ce sujet a deja été aborder (pour preuve un aute topic dans ce meme forum avec quasiment le meme nom)
mais la je dois avouer que c'est la premiere fois que je poste sur un forum pour du code parceque je ne trouve vraiment pas ce que je cherche
donc en gros je suis en train de faire une gallerie en php et je voudrais afficher le nom des photos sous les photos (logique jusque la)
j'ai donc fait plusieur recherche et trouver des solution qui soit ne marchait pas soit n'est pas appliquable ou ne faisait pas ce que je voulais
donc mon code :

<body>
  Vous êtes ici : <a href="?">accueil</a> / <a href="?fold=bowling__S5003913_JPG">bowling__S5003913_JPG</a><br><br>
  <a href="?fold=bowling__S5003913_JPG/avion2"><img class="folder" src="./gallerie/bowling__S5003913_JPG/avion2/legalize canada.png" width="200px" height="197px"></a><img src="./images/spacer.bmp" width="10px">

  <a href="./gallerie/bowling__S5003913_JPG/S5003913.JPG" rel="lightbox[bowling__S5003913_JPG]" title="S5003913"><img class="picture" src="./gallerie/bowling__S5003913_JPG/thumbs/S5003913.JPG" width="200px" height="150px" title="S5003913"><h1>S5003913</h1></a><img src="./images/spacer.bmp" width="10px">

  <a href="./gallerie/bowling__S5003913_JPG/S5003920.JPG" rel="lightbox[bowling__S5003913_JPG]" title="S5003920"><img class="picture" src="./gallerie/bowling__S5003913_JPG/thumbs/S5003920.JPG" width="150px" height="200px" title="S5003920"><h1>S5003920</h1></a><img src="./images/spacer.bmp" width="10px">

  <a href="./gallerie/bowling__S5003913_JPG/S5003921.JPG" rel="lightbox[bowling__S5003913_JPG]" title="S5003921"><img class="picture" src="./gallerie/bowling__S5003913_JPG/thumbs/S5003921.JPG" width="200px" height="150px" title="S5003921"><h1>S5003921</h1></a><img src="./images/spacer.bmp" width="10px">

  <br><br>Vous êtes ici : <a href="?">accueil</a> / <a href="?fold=bowling__S5003913_JPG">bowling__S5003913_JPG</a></center>
</body>

donc comme j'avais vu dans les tuto ici j'ai pris les balise pour ce qu'elle était et donc j'ai pas de div et un h1 pour le titre
donc ma premiere idée etait de mettre le h1 en position relative pour le mettre sous mon image mais il veut pas
apres j'ai reussit a le mettre dessous mais pas sous la photo
apres grace au topic dont je parlais avant j'ai pu faire tout comme il faut mais c'etait aligner a droite et avec une div en plus et moi je veut le centrer et comme c'etait un float : right ça marchais plus si je l'enlever ou essayer de centrer

donc en gros je suis un peu desepere je voudrais un truc propre et c'est pour ça que je voudrais eviter les tableaux
voila merci pour votre aide
Modifié par bobzer (12 Jul 2008 - 19:57)
Bonjour,

Pour commencer, un H1 comme légende d'une image c'est une erreur. Une légende n'est pas un titre de section de premier niveau. Smiley cligne
Ensuite, je vois un fichier spacer.bmp utilisé à la suite de chacune de tes images, et là tout à coup j'ai très peur. Du BMP? un spacer?
Enfin, ton code HTML n'est pas des plus lisible (ou des mieux structurés), tu n'as pas montré le résultat que tu espérais, et tu as donné un bout de code HTML mais sans le code CSS qui va avec, sans les images bien entendu, bref sans qu'on puisse en conclure quoi que ce soit. La solution: indiquer une page en ligne où on peut constater ce problème avec tous les éléments à disposition.
d'accord merci
pour tous ces conseils donc je doit remplacer le h1 par un P?
je te rassure pour le spacer il ne fait que 66octets (il fait un pixel blanc) et c'etait pour les essaye sur fond blanc il ne ce voit pas je penssais l'enlever a la fin pour le remplacer par une marge en CSS
je n'avait pas mis mon CSS parceque completement faux
et je vais essayer de vous mettre une page
bon alors j'ai un peu fait le menage et j'ai tout mis en ligne donc
le fichier tel qu'il est maintenant et donc qui est tout pas beau
http://bobzer.free.fr/gallerie/gallerie.php.htm
le css correspondant 

body {
  margin:0 0 0 0;
  padding-top: 30px;
  display:inline;
  text-align:center;
}
.folder {
  border-width: 3px;
  border-color: #b12a11;
  margin:5;
}
.picture  {
  border-width: 3px;
  border-color: #289ab8;
  margin:5;
}

p{
  position: relative; 
  top:-12; 
  left: 20;
  /*float: left;*/
  font: 10px verdana, arial, sans-serif;
}

donc mon idée c'etait de dire que le P etait en desous de l'image au centre c'est pour ça que j'ai essayer avec un position:relative
le float est commenté parceque (c'est normal mais bon) il me mets tout a gauche par contre il mets tous sur la meme ligne c'est deja pas mal
mais le texte n'est pas à ça place pour autant Smiley decu
si j'ai display:inline dans le body c'était en espérant que ça mette tous sur la meme ligne mais en faite nan il veut pas
sinon voila une image de ce que j'aimerai:
http://bobzer.free.fr/gallerie/mon_reve.png
donc voila merci pour votre aide
Modifié par bobzer (07 Jul 2008 - 22:50)
merci ça m'a pas mal aidé mais j'ai toujours le probleme que je n'ai qu'une photos par ligne
et la je seche parceque
c'est grace a la commande float :left qu'il sont sur la meme ligne (comme ce que j'avais trouver avant) mais il me faut plus d'une photo par ligne Smiley smile
bon ben je laisse tomber je jete rarement l'eponge mais la je vais faire des tableau ça me rejouit pas mais j'ai pas le choix
parceque j'en ai marre de chercher soit tous est aligné a gauche soit j'ai une image par ligne ya pas moyen d'avoir plusieur image par ligne et centré on dirait donc ben tampis
merci quand meme

edit: une bonne leçon j'abandonne quasiment jamais et la j'ai faillit le fair mais j'ai pas pu m'empecher d'essayer d'autre truc et voila j'ai reussit
Modifié par bobzer (12 Jul 2008 - 03:38)
Hello bobzer,

Félicitations pour ta tenacité et la réussite de ton projet Smiley smile
Considères-tu le sujet comme [Resolu] ?

Bonne continuation,
Cdt,
Sylvain
oui il est résolue et je n'avait pas trouver le bouton (normal y en a pas)
merci pour ton lien

ps ceux que ça peut interesse penser au inline-block
bobzer a écrit :
ps ceux que ça peut interesse penser au inline-block
Et pour ceux qui sont intéressés par inline-block, penser à lire ce sujet. Smiley cligne
Heyoan a écrit :
Et pour ceux qui sont intéressés par inline-block, penser à lire ce sujet. Smiley cligne

j'ai toujours fait un site pour mozilla et apres adapter a IE
donc c'est vrai que le inline block ne marche pas sur les ancienne version de firefox mais marche (il parait pas verifier) sur opera safari e beaucoup d'autre
et pour finir il suffit de mettre ça dans IE et ça marche super 
<!--[if IE]><style>
dl {
 zoom:1;
 display: inline;
}
</style><![endif]-->

et voila maintenant tout marche parfaitement
Le problème vient surtout des versions de Firefox inférieures à 3 qui sont là pour un bon moment encore...
je susi pas d'accord puisque tu peut utilser 

  display:-moz-inline-box;

tu la mais avant et puis voila la inline-block et tu te retrouve avec un inline block pour presque tout le monde
bobzer a écrit :
je susi pas d'accord puisque tu peut utilser 

  display:-moz-inline-box;

tu la mais avant et puis voila la inline-block et tu te retrouve avec un inline block pour presque tout le monde
Euh... oui ! On n'est peut-être pas obligés de reprendre tout le contenu de l'autre sujet Smiley sourire .

Je voulais juste signaler à ceux qui sont intéressés par inline-block qu'il ne fallait pas oublier de gérer les versions de FF < 3 : il me semble que les réponses de Felipe et de Florent résument bien la situation Smiley smile .

A+
oui c'est vrai pour felipe et florent mais comme on a les solutions c'est pas grave Smiley biggrin
sur ceux maintenant les personnes qui viendront sur ceux topic on la solution a leur probleme donc
A+
Sujet clos
Aller à