Disposer mes photos l'un après l'autre sur ma page web
Fermé
ghisloy
Messages postés
89
Date d'inscription
mercredi 12 novembre 2014
Statut
Membre
Dernière intervention
1 août 2016
-
24 nov. 2015 à 15:38
ghisloy Messages postés 89 Date d'inscription mercredi 12 novembre 2014 Statut Membre Dernière intervention 1 août 2016 - 24 nov. 2015 à 17:22
ghisloy Messages postés 89 Date d'inscription mercredi 12 novembre 2014 Statut Membre Dernière intervention 1 août 2016 - 24 nov. 2015 à 17:22
A voir également:
- Disposer mes photos l'un après l'autre sur ma page web
- Supprimer une page word - Guide
- Traduire une page web - Guide
- Toutes mes photos - Guide
- Partage de photos - Guide
- Instagram web - Guide
1 réponse
Salut,
c'est normal puisqu'une balise de type block (comme div) est faite pour prendre toute la place disponible.
Ensuite vous mettez vous même un saut de ligne à chaque zone répétée.
Essayez plutôt comme ceci:
Correction de diverses erreurs au passage(border , l'ordre de la notation raccourcie n'était pas correct, la couleur raccourcie grise s'écrit grey et non gray. Une marge gauche négative? à quoi cela peut il correspondre autant utiliser la marge droite éventuellement mais si vous utilisez une telle marge c'est sûr vous n'aurez rien d'aligné, remplacement des dimensions en valeurs relatives: vous ne contrôler pas la résolution de l'utilisateur donc ça ne rime à rien d'utiliser des valeurs fixes(en px) un pourcentage est mieux que l'utilisateur ait un affichage en 800X600 ou 2096*780 un pourcentage reste aux mêmes dimensions).
La valeur alt=??? doit être remplacé par une description de l'image sinon ce n'est pas correct(accessibilité+référencement). Les guillemets sont maintenant facultatifs avec HTML5 et simplifie la concaténation quand on va utiliser javascript et php pour écrire les attributs de balises.
La balise <b> est interdite depuis l'existence du css(remplacé par font-weight:bold;), pour l'emphase il existe d'autre balises.
Notez pour le positionnement:
float:left; indique à l'image (qui récupère au passage une partie des styles des 2 div inutiles) que l'image doit se positionner hors du flux(en flottant) à gauche de son élément parent s'il en a un. Arrivé à >100% l'image suivante passe à la ligne.(4*20% +4*2% de marge gauche=88%+22=110% donc nouvelle ligne).
Il y a bien d'autres manières de faire avec CSS(l'exemple est perfectible) et vous devriez passer par un tuto sur les bases de celui ci, du moins sur le positionnement.
Notez aussi que l'utilisation de la fonction php mysql-query n'est pas recommandée(dépréciée):
peut sûre elle est remplacée par l'objet PDO Object et est absente de la dernière version de PHP(ce qui posera des problèmes de compatibilité lors de la mise à jour du serveur PHP de votre hébergeur et ne fonctionnera plus).
c'est normal puisqu'une balise de type block (comme div) est faite pour prendre toute la place disponible.
Ensuite vous mettez vous même un saut de ligne à chaque zone répétée.
Essayez plutôt comme ceci:
<article>
<h2>Galerie des albums</h2>
<?php while($GALLERIE=mysql_fetch_array($resultatgallerie)){
?>
<span style=float:left;font-face:arial; color: red;font-weight:bold;margin-left:2%;text-align:center;>
<img src=../../images/galerie/ alt=???<?php echo $GALLERIE['photo1']; ?>
style=border: 1px solid grey; padding:3px; width:20%; />
<?php echo $GALLERIE['nom_album'] ;?></span>
<?php }; ?>
Correction de diverses erreurs au passage(border , l'ordre de la notation raccourcie n'était pas correct, la couleur raccourcie grise s'écrit grey et non gray. Une marge gauche négative? à quoi cela peut il correspondre autant utiliser la marge droite éventuellement mais si vous utilisez une telle marge c'est sûr vous n'aurez rien d'aligné, remplacement des dimensions en valeurs relatives: vous ne contrôler pas la résolution de l'utilisateur donc ça ne rime à rien d'utiliser des valeurs fixes(en px) un pourcentage est mieux que l'utilisateur ait un affichage en 800X600 ou 2096*780 un pourcentage reste aux mêmes dimensions).
La valeur alt=??? doit être remplacé par une description de l'image sinon ce n'est pas correct(accessibilité+référencement). Les guillemets sont maintenant facultatifs avec HTML5 et simplifie la concaténation quand on va utiliser javascript et php pour écrire les attributs de balises.
La balise <b> est interdite depuis l'existence du css(remplacé par font-weight:bold;), pour l'emphase il existe d'autre balises.
Notez pour le positionnement:
float:left; indique à l'image (qui récupère au passage une partie des styles des 2 div inutiles) que l'image doit se positionner hors du flux(en flottant) à gauche de son élément parent s'il en a un. Arrivé à >100% l'image suivante passe à la ligne.(4*20% +4*2% de marge gauche=88%+22=110% donc nouvelle ligne).
Il y a bien d'autres manières de faire avec CSS(l'exemple est perfectible) et vous devriez passer par un tuto sur les bases de celui ci, du moins sur le positionnement.
Notez aussi que l'utilisation de la fonction php mysql-query n'est pas recommandée(dépréciée):
peut sûre elle est remplacée par l'objet PDO Object et est absente de la dernière version de PHP(ce qui posera des problèmes de compatibilité lors de la mise à jour du serveur PHP de votre hébergeur et ne fonctionnera plus).
24 nov. 2015 à 17:02
merci
24 nov. 2015 à 17:22