*UPDATE*

Ok j'ai reussi à TOUT faire !!!! :D
Il me manque juste ce décalage et le fait que le background n'erst pas pris en compte.
Une idée ?

Résultat: [url]https://drive.google.com/file/d/1PFhVf2GpgOTt31NOHWMgrPdgFHYc32kN/view?usp=sharing[/url]

code html:

[code]**** ENDROITS À DÉCOUVRIR <br><br />

<?php
try
{
// On se connecte à MySQL
$bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
// En cas d'erreur, on affiche un message et on arrête tout
die('Erreur : '.$e->getMessage());
}

$reponse = $bdd->query('SELECT l.comte_nom, l.lieu_nom, l.pays_nom, p.flag_nom, l.lieu_url
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom');

?>

<?php while ($donnees = $reponse->fetch()) { ?>

<div class="vignette">
<div class="lieu"><?php echo $donnees['lieu_nom']; ?></p></div>
<div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>
<img src="<?php echo $donnees['flag_nom']; ?>" alt="drapeau" class="flag">
<img src="<?php echo $donnees['lieu_url']; ?>" alt="Lieu"/>
</div>
<?php } ?>

</body>
</html>[/code]


Code CSS:

[code]/* Vignette */

.vignette
{
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #000000 100%);
font-family: montserrat;
display: inline-block;
width: 270px;
height: 302px;
border-radius: 2px;
}

.flag
{
max-width: 20px;
max-height: 15px;
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top: 100px;
}

.lieu
{
font-size: 20px;
color: white;
text-transform: uppercase;
text-align: center;
position: relative;
top: 200px;
}

.pays
{
font-size: 15px;
color: white;
position: relative;
top: 200px;
text-align: center;
}

.vignette img
{
object-fit: cover;
width: 270px;
height: 302px;
object-position: 100% 0;
}[/code]



Merci pour votre aide !

*UPDATE*

1. J'ai réussi à afficher le "comte" !!!
J'ai mis au début la ligne "l.comte_lieu" et ca fonctionne.
Je l'avais mis à la fin avant la fonction FROM mais ca ne fonctionnait pas (je sais pas pourquoi).

2. Avec une inline block j'ai reussi à mettre les vignettes l'une a coté de l'autre.

Résultat: [url]https://drive.google.com/file/d/1CWvSIYyuujNbFf5VC8Lv0UleZLoQhi-u/view?usp=sharing[/url]

Je cherche encore pour le décalage et le gradient.
Et aussi pour LIMIT, il veut pas le mettre à la fin. Je comprends pas pourquoi.

Ahhhhhhhhh bien vu @Or 1. Merci !
Je suis retourné voir dans le code et 'jai oublié de mettre la boucle et les {} dans la div !!!!
C'est ca que je ne comprenais pas depuis le début !!!
Bon maintenant si on regarde le résultat final, y a comme qui dirait un soucis :lol:
[url]https://drive.google.com/file/d/1HclXDQUp6T6P6mJxvyXBD6x85kRmHSRn/view?usp=sharing[/url]
Mais on y est presque !!!!!! :D

Mon code ressemble à ca maintenant:

[code]**** ENDROITS À DÉCOUVRIR <br><br />

<?php
try
{
// On se connecte à MySQL
$bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
// En cas d'erreur, on affiche un message et on arrête tout
die('Erreur : '.$e->getMessage());
}

$reponse = $bdd->query('SELECT l.lieu_nom, l.pays_nom, p.flag_nom
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom');

?>

<?php while ($donnees = $reponse->fetch()) { ?>

<div class="vignette">
<div class="lieu"><?php echo $donnees['lieu_nom']; ?></p></div>
<div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>
<img src="img_lieux/fagnes.jpg" alt="Fagnes" />
</div>
<?php } ?>

</body>
</html>[/code]

Je sais pas :
1. comment ajouter mon champs "comte_nom".
2. Mettre correctement l'image sur la background au niveau ALIGNEMENT et faire en sorte que le GRADIENT soit pris en compter car c'est pas le cas pour le moment.

<div class="lieu"><?php echo $donnees['lieu_nom']; ?></p></div>

le résultat de la requête est donc sensé être dans la variable $donnees. où cette variable est-elle initialisée ? ah nulle part (vu qu'il n'y a plus de while).

Salut @Ryle !
Bon ben je viens de faire ca mais ca ne fonctionne pas :roll:
Rien ne bug mais pas d'affichage de données.
Est-ce que l'ordre de mon code est bon ?
Le seul truc qui s'affiche c'est la virgule entre pays et comte (petite victoire ! :lol: ).

2. Il y a toujours ce décalage entre la vignette et le background #-o

Je te joins aussi un schéma de bdd: [url]https://drive.google.com/file/d/1bKy7FCqYcQYMFNmraA_jF7cdTE9d1oXo/view?usp=sharing[/url].

[code]**** ENDROITS À DÉCOUVRIR <br><br />

<?php
try
{
// On se connecte à MySQL
$bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
// En cas d'erreur, on affiche un message et on arrête tout
die('Erreur : '.$e->getMessage());
}

$reponse = $bdd->query('SELECT l.lieu_nom, l.pays_nom, p.flag_nom
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom');

?>

<div class="vignette">
<div class="lieu"><?php echo $donnees['lieu_nom']; ?></p></div>
<div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>
<img src="img_lieux/fagnes.jpg" alt="Fagnes" />
</div>[/code]

<div class="pays">Nom du pays, Nom du comté</div>
OU
<span class="pays">Nom du pays</span>, <span class="comte">Nom du comté</span>

SELECT l.lieu_nom, l.pays_nom, p.flag_nom 
  FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom

Alors dans le désordre, pour la 2, c'est bien parce que tes infos sont dans des balises avec un attribut "display" à "block" (p, div, etc.) plutôt que "inline" (span, a, strong, em...).

En gros, les éléments de type block commencent toujours une nouvelle ligne et prennent toute la largeur disponible alors que les autres ne prennent que la largeur dont ils ont besoin. Tu peux donc soit regrouper les deux informations dans le même élément, ou utiliser des éléments des éléments de type inline (en modifiant l'attribut css div ou en changeant l'élément).
[html]<div class="pays">Nom du pays, Nom du comté</div>
OU
<span class="pays">Nom du pays</span>, <span class="comte">Nom du comté</span>[/html]Ou garder tes éléments en l'état et changer l'attribut display des classes .pays et .comte :)

Et pour la question 1, il te faut joindre ta table lieux et ta table pays sur la clé qui permet de faire le lien entre les deux. Cela te permet de lire les informations présentent dans les colonnes des deux tables :
[sql]SELECT l.lieu_nom, l.pays_nom, p.flag_nom
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom[/sql]
Concrètement, cette requête sélectionne (SELECT) :
- le champ lieu_nom de la table "l" (alias de lieux),
- le champ pays_nom de la table "l" (alias de lieux),
- le champ flag_nom de la table "p" (alias de pays)
(FROM) Au sein de la table lieux (alias l) et de la table pays (alias p)
(LEFT JOIN) en joignant ces deux tables de façon à ce que
(ON) le champ pays_nom de la table lieux (l) ait la même valeur que le champ pays_nom de la table pays (p)

Hello Ryle,

Yes mais encore beaucoup d'interrogation.
On pourrait peut etre se faire une video conf ca irait plus vite :p
Si ok dis moi en MP.

Pour le point 3 j'ai compris donc cool :D

Pour le point 1, je te laisse check.
Mais de manière générale je n'arrive à rien afficher.
Je crois que je fais une erreur dans la structure de mon code mais je capte pas.

Enfin, au niveau de l'image c'est étrange. Elle sort de la bordure : [url]https://drive.google.com/file/d/16MSbW_18hypjJseWF5vpVan9EIQ9SrWD/view?usp=sharing[/url]
Si je met le code sur la première ligne elle va bien dans la div mais alors c'est le texte qui n'est plus affiché : [url]https://drive.google.com/file/d/12jme8FJtJCWWK6kwLNKRQsFsKu4pg1L7/view?usp=sharing[/url]

Voici le code en html
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style3.css" />
<title>Visit Earth</title>
</head>

<body>
<div id="bloc_page">

<header>

<p><img src="img/logo.png" alt="logo" id="logo"></p>
<h1>Découvrez les meilleures choses à voir et à faire dans les Monde. </h1><br />

</header>

<div id="filters">
<div class="filters">Filtres </div>
<form>
<select name="lieux">
<option value="lieux" selected>Lieux à découvrir</option>
<option value="autre">Autre</option>
</select>

<select name="pays">
<option value="afghanistan" selected>afghanistan</option>
<option value="alabama">alabama</option>
<option value="australie">Australie</option>
<option value="belgique">Belgique</option>
</select>

<select name="tri">
<option value="montagne" selected>Montagnes</option>
<option value="volcan">Volcans</option>
<option value="desert">Déserts</option>
<option value="plage">Plages</option>
</select>
</form>
</div>

<br>
<br />
**** ENDROITS À DÉCOUVRIR <br><br />

<?php
try
{
// On se connecte à MySQL
$bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
// En cas d'erreur, on affiche un message et on arrête tout
die('Erreur : '.$e->getMessage());
}

$reponse = $bdd->query('SELECT lieu_nom, pays_nom FROM lieux');

?>

<div class="vignette">
<div class="lieu">Nom du pays, </div>
<div class="pays">Nom du pays, </div>
<div class="comte">Nom du comté </div>
<img src="img_lieux/fagnes.jpg" alt="Fagnes" />
</div>


</body>
</html>[/code]

Et voici le code CSS:

[code]@font-face {
font-family: 'montserrat';
src: url('montserrat.eot');
src: url('montserrat?#iefix') format('embedded-opentype'),
url('montserrat.woff') format('woff'),
url('montserrat.ttf') format('truetype'),
url('montserrat.svg#montserrat') format('svg');
}

#bloc_page
{
width: 1100px;
margin: auto;
}

#logo
{
display: block;
margin-left: auto;
margin-right: auto;
}

#filters
{
flex:auto;
}

h1 {
color: #232838;
font-family: Montserrat;
font-size: 28px;
letter-spacing: 0;
line-height: 34px;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
height: 68px;
width: 490px;
}

/* Vignette */

.vignette
{
width: 270px;
height: 302px;
opacity: 0.8;
border-radius: 2px;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #000000 100%);
}

.flag
{
color: white;
font-size: 20px;
position: relative;
left: 124px;
top: 183px;
}

.lieu
{
font-size: 20px;
color: white;
text-transform: uppercase;
text-align: center;
position: relative;
top: 200px;

}

.pays
{
font-size: 15px;
color: white;
position: relative;
top: 200px;
}

.comte
{
font-size: 15px;
color: white;
position: relative;
top:200px;
display: inline-flex;
}

.vignette img
{
object-fit: cover;
width: 270px;
height: 302px;
object-position: 100% 0;
}[/code]

Hello !

Ça avance, c'est cool :)

Pour ta première question, il manque la requête pour pouvoir te dire ce qui cloche (à mon avis il manque une condition de jointure, mais c'est dur à dire à l'aveugle ;))

Pour la 2, idem, montre ton code. Les seules choses qui peuvent engendrer un retour à la ligne, c'est un <br>, le fait que les éléments soient dans des blocs distincts (paragraphe ou autre), ou s'il n'y a pas assez de place sur la ligne...

Quant à l'image, elle est affichée par défaut dans ses dimensions d'origine. Tu peux modifier l'affichage en css en jouant sur les attributs width et/ou height pour définir une taille en pixels (par défaut si tu ne mets qu'une valeur, les proportions sont conservées).
Tu peux aussi définir un width à 100% et l'image prendra la largeur du div dans lequel elle se trouve :) (et gardera une hauteur proportionnelle).

Après tu peux aussi générer des miniatures, mais commence déjà simplement en jouant sur l'affichage :)

@Ryle
Bon je suis assez fier de moi ! Merci pour tes indications.

Résultat actuel: [url]https://drive.google.com/file/d/1JAXPrQRsKYs4hmUD7OOIbMzYZcZKahrV/view?usp=sharing[/url]

Mais... (forcément y allais y avoir un mais :p)

[b]Question 1[/b]
J'arrive pas à aller chercher l'image du pays en question dans la DB.

Dans SQL j'ai une table pays avec pays [pays_nom] et drapeau [flag_nom] champs VARCHAR 255.
J'ai 2 valeurs pour les pays inscrite avec le chemin relatif de l'image qui est dans le fichier du projet "flags/BE.png.

J'ai fait la requête suivante dans le code (mais je me doute que quelque chose cloche car je vaux juste le drapeau de la Belgique. Pas tous les drapeau.
Mais il n'affiche rien.

[b]Question 2[/b]
Je n'arrive pas à mettre l'un à côté de l'autre le pays et le comté.
Comment faire ?

Question 3 (tant qu'on y est^^)
C'est bien j'ai été chercher mon image dans le dossier image et réussi à la mettre dans la <div> mais elle est pas du tout centrée ou dans la résolution que je voudrais.
Je dois les créer manuellement pour que ca "fit" à la case ???? :shock:

Où j'ai bug docteur ? :lol:
Merci !!!!!!!!!!

je n'ai pas dit que c'était moi qui l'avait dit. c'est ryle qui avait déjà mentionné le limit.

Super merci beaucoup @Ryle !!!!
Je vais travailler à tout ca et je reviens quand j'ai fini pour te montrer :)

@Or, sorry mais c'est pas constructif de dire que ca a été dit.
Je suis un DEBUTANT.
Envoyer des morceaux de code sans explication c'est pas très utile.
Mais c'est super sympa d'essayer de m'aider quand même :)

Allais hop j'y vais, j'ai du taf sur la planche ! :)

<div style="float: left; width:25%">
  <p>Nom du lieu</p>
  <img src="illustration.png" alt="" />
</div>

<div style="float: left; width:25%">
  <p><?php echo $donnees['Lieu']; ?></p>
  <img src="<?php echo $donnees['Flag']; ?>" alt="" />
</div>

<?php while ($donnees = $reponse->fetch()) { ?>
<div style="float: left; width:25%">
  <p><?php echo $donnees['Lieu']; ?></p>
  <img src="<?php echo $donnees['Flag']; ?>" alt="" />
</div>
<?php } ?>

Il y a deux choses à distinguer.

Au niveau de ta requête, tu peux utiliser LIMIT pour ne récupérer que 16 lieux à la fois et jouer sur la pagination comme indiquée plus haut. Sauf bien sûr que s'il n'y a que 2 lieux en base, même si tu mets une limite à 16 résultat, il ne pourra pas t'en remonter plus que ce qu'il trouve ;)

Ensuite il y a la partie affiche de ces 2 ou 16 enregistrement.

Le plus simple c'est de commencer avec le code html/css que tu veux obtenir pour une seule vignette. Par exemple :
[html]<div style="float: left; width:25%">
<p>Nom du lieu</p>
<img src="illustration.png" alt="" />
</div>[/html]
Tu remplace ensuite les éléments dynamique avec du php
[php]<div style="float: left; width:25%">
<p><?php echo $donnees['Lieu']; ?></p>
<img src="<?php echo $donnees['Flag']; ?>" alt="" />
</div>[/php]
Enfin, tu place le tout dans ta boucle
[php]<?php while ($donnees = $reponse->fetch()) { ?>
<div style="float: left; width:25%">
<p><?php echo $donnees['Lieu']; ?></p>
<img src="<?php echo $donnees['Flag']; ?>" alt="" />
</div>
<?php } ?>[/php]

Et normalement, la magie devrait opérer :) (bon avec 2 lieux seulement au début, mais c'est justement qu'un début ;)) et tu pourras ajuster en css, en fonction du nombre de vignette que tu veux par ligne, leur taille...

[quote=jeremygoldyn post_id=465289 time=1608301421 user_id=27296]
MAIS comment je fais dans le code pour dire que je veux 16 cases (vignettes) sur la page
[/quote]

la réponse a déjà été donnée, dans cette discussion.

Hello @Ryle,

Je comprends bien le premier point.
Mais ici je ferais sans car comme tu dis c'est juste un projet perso et ok dans ce cas-ci.

J'ai réussi à avoir un résultat avec le code "simplifié" (la boucle) :D

Bon je dois revoir la BD mais si tu regardes l'image suivante : [url]https://drive.google.com/file/d/1UZ06GB34h6BU4ixsbve-1U_-XXizf3u2/view?usp=sharing[/url]
Ca explique VRAIMENT mon problème que j'explique par rapport au CSS.

Ici j'ai créé 2 entrées dans sql: Belgique, France.
Top, il va chercher les infos dans sql et les affichent dans ma div.
MAIS comment je fais dans le code pour dire que je veux 16 cases (vignettes) sur la page et que France ait dans la case numéro 2 .

Merci de me répondre à ca.
Le reste je peux gérer.

Ca serait vraiment sympa !!!
MERCI !!!

Yosemite Park ; USA
Yellowstone Park ; USA
Grand Canyon ; USA

Yosemite Park ; 8
Yellowstone Park ; 8
Grand Canyon ; 8

8 ; USA

<?php
$reponse = $bdd->query('SELECT nom FROM pays ORDER BY nom');
while ($donnees = $reponse->fetch()) {
  echo '<option value="' . $donnees['nom'] . '">' . $donnees['nom'] . '</option>';
}
?>

Effectivement, le nom du pays est unique et pourrait servir de clé, mais je pense quand même que c'est une bonne habitude à prendre quand on travaille avec une base de données. Il y a quand même quelques avantages, même s'ils ne sont pour le moment pas évident à discerner ou ne s'appliquent pas dans l'immédiat à ton projet :)

Pour te donner un exemple simple, au lieu d'avoir dans ta table lieux :
[html]Yosemite Park ; USA
Yellowstone Park ; USA
Grand Canyon ; USA[/html]Il est préférable d'avoir
[html]Yosemite Park ; 8
Yellowstone Park ; 8
Grand Canyon ; 8[/html]Et une seconde table avec
[html]8 ; USA[/html]

Tu peux ainsi plus facilement changer le libellé (le jour où tu préfères que le pays s'appelle Etats-Unis) puisqu'il suffit de le changer à un seul endroit pour que la modification soit répercutée partout. Tu peux aussi facilement ajouter une colonne à ta seconde table pour avoir le libellé dans d'autre langue, ajouter le drapeau du pays, etc.

Ça n'est pas des plus important pour un projet perso, mais je pense néanmoins que ça reste une bonne habitude à prendre ;)


Pour en revenir à ton code, si tu as une table pays qui contient les noms des pays, c'est celle-ci qu'il faut interroger pour alimenter ton filtre :

[php]<?php
$reponse = $bdd->query('SELECT nom FROM pays ORDER BY nom');
while ($donnees = $reponse->fetch()) {
echo '<option value="' . $donnees['nom'] . '">' . $donnees['nom'] . '</option>';
}
?>[/php]