[RESOLU] Duplicate id (W3C) avec écho d'un <div>

Petit nouveau ! | 6 Messages

22 nov. 2016, 00:22

Bonsoir à tous.

Je suis actuellement confronté à un petit problème de validation W3C de ma page HTML5/CSS3.

Dans cette page, je cherche à afficher des logos récupérés d'une BDD.
J'utilise donc une boucle while pour afficher le résultat, via un echo, en PHP.

Lorsque que je souhaite appliquer ma mise en page CSS avec un <div class="">, rien ne s'affiche dans Firefox et Chrome (IE ne pose pas de problème).
Du coup, j'utilise un <div id="">. Là ça marche, mais comme je m'y attendais, le W3C Validator me retourne plein d'erreurs de duplicates id sur ma page (autant que de lignes correspondantes de ma BDD). C'est tout à fait logique, vu qu'en théorie un seul ID CSS n'est autorisé par page.

Ma question est donc de savoir pourquoi j'ai ce problème avec le <div class=""> et comment éviter les erreurs W3C.

Ce qui est encore plus étrange à mes yeux, c'est qu'avec le <div class""> le code source de la page affiche bien mes éléments, mais rien n'est visible à l'écran...
J'ai fait plusieurs vidages de cache de mes navigateurs, redémarré le process de mon server Web (nginx), mais rien n'y fait.

Voici mon code PHP/HTML :
<h3>Partenaires du club</h3>
<div id="center">
	Voici la liste de nos plus fidèles partenaires. Merci à eux pour leur soutien.

	<?php
		$sql_link = connection_sql();
		$sqlGetSponsors = mysqli_query($sql_link, "SELECT * FROM `sponsors`") or die(mysqli_error());

		while($resultGetSponsors = mysqli_fetch_array($sqlGetSponsors)) {
			if($resultGetSponsors['logo_sponsor'] != "") {
					echo '<div id="sponsorBlock"><a href="'.$resultGetSponsors['link_sponsor'].'" target="_blank"><img src="'.$resultGetSponsors['logo_sponsor'].'" alt="Logo '.$resultGetSponsors['name_sponsor'].'" /></a></div>';
			}
		}

		mysqli_free_result($sqlGetSponsors);
		disconnect_sql($sql_link);
	?>
</div>
Toute aide serait la bienvenue, parce que là, je ne trouve plus l'inspiration...

Mammouth du PHP | 1967 Messages

22 nov. 2016, 09:16

Je ne vois aucune raison que tes class ne soit pas prise en compte,

désolé si je te prends pour un débutant, mais pour être sur:
Il n'y a pas d'espace dans tes nom de classe ?
Tu utilise bien la même typo dans ton attribut html et ton css ?
Tu utilise bien le point en prefix de ton nom de classe dans ton css?
Tu n'a pas confondu [] et {} ou () ?
Il y a bien des double quotes autour de tes noms de class en HTML ?

As tu essayé un code très simple du genre
echo '<div class="test">Salut</div>';

et comme css
.test {background: red;width:100px;height:100px;}
Spols
pour les fan de rubik's cube ou pour les curieux ==> le portail francophone du rubik's cube

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 8758 Messages

22 nov. 2016, 09:38

salut,

effectivement le doublon d'id n'est pas possible.
si tu remplace id par class et dans le fichier css tu remplace le # par un . cela doit fonctionner.
test sans id ni classe css tu dois avoir tes images qui s'affiche les une en dessous des autres.
ajoutes la classe css le style doit être appliqué.
si cela ne s'affiche pas c'est que généralement il y a une erreur dans le dom.
tu devrais utiliser htmlentities pour éviter les possibles problèmes d'affichages avec des données incorrectes (la typiquement qui contient des " dans les lien ou non, voir d'autres caractères html indésirable à ces endroits.


en clair le code si dessous n'as pas de raison de ne pas s'afficher correctement.
<?php
    $sql_link = connection_sql();
    $sqlGetSponsors = mysqli_query($sql_link, 'SELECT * FROM sponsors and trim(logo_sponsor) <>\'\'') or die(mysqli_error());

    while($resultGetSponsors = mysqli_fetch_array($sqlGetSponsors)) {
          echo '<div calss="sponsorBlock"><a href="'.$resultGetSponsors['link_sponsor'].'" target="_blank"><img src="'.$resultGetSponsors['logo_sponsor'].'" alt="Logo '.$resultGetSponsors['name_sponsor'].'" /></a></div>';
    }

    mysqli_free_result($sqlGetSponsors);
    disconnect_sql($sql_link);
  ?>
j'ai viré le if inutile, autant faire bosser mysql il sert à ça XD

peux être qu'en testant la chose en vrai il nous serait possible de "voir" autre chose qui ne serait pas dans les quelques lignes de code si dessus. (par exemple le html généré).

@+
Il en faut peu pour être heureux ......

Petit nouveau ! | 6 Messages

22 nov. 2016, 10:56

Bonjour à vous 2 et merci beaucoup pour vos retours.

En suivant vos conseils et méthodes de tests, j'ai avancé un peu.
Mais le comportement que j'obtiens est vraiment bizarre.

Si j'utilise la ligne suivante, ça ne fonctionne pas. Mes images ne sont pas visibles (mon CSS étant configuré correctement, avec le bon nom).
echo '<div class="sponsorBlock"><img src="'.$resultGetSponsors['logo_sponsor'].'" alt="Logo '.$resultGetSponsors['name_sponsor'].'" /></div>';
Par contre, si je change le nom de ma class, comme ci-dessous, ça fonctionne.
echo '<div class="sponsor"><img src="'.$resultGetSponsors['logo_sponsor'].'" alt="Logo '.$resultGetSponsors['name_sponsor'].'" /></div>';
Je suis certain que la classe "sponsorBlock" n'est pas utilisée ailleurs.
Au début, je pensais à un soucis de longueur de nom (peu probable), mais non. Avec la class "sponsorItemAbcdef", ça fonctionne aussi.

Il y aurait un soucis avec le terme "Block" ??

Quoi qu'il en soit, je peux me contenter du résultat que j'obtiens maintenant. C'est juste que je n'aime pas ne pas comprendre un comportement anormal en développement...

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 8758 Messages

22 nov. 2016, 12:11

Block ne pose pas de problème.
par exemple
<html>
<head>
  <style type="text/css">
    .sponsorBlock {
      background-color: orangered;
      width : 50%;
      height : 50%;
      margin-top : 25%;
      margin-left: 25%;
      text-align: center;
      font-size: 2em;
    }
  </style>
</head>
<body>
<div class="sponsorBlock"><h1>toto</h1></div>
</body>
</html>
Affiche un "beau" carré orange au milieu de la page :-)

il faut voir dans le contexte globale et utiliser les outils développeurs qui indiquent ce qu'ils gardent ou pas pour le rendu final.

@+
Il en faut peu pour être heureux ......

Petit nouveau ! | 6 Messages

22 nov. 2016, 13:47

Je viens de faire le test que tu m'as indiqué.
J'ai créé une simple page index.php à la racine de mon serveur avec le code que tu m'as fourni. Juste ça, même pas de PHP.

C'est complètement ouf le résultat que j'ai...
Si la class CSS s'appelle "sponsorBlock", rien ne s'affiche dans Chrome et Firefox.
Avec la class nommée "sponsorBloc" ou "sponsorBlok", aucun problème...

C'est à n'y rien comprendre...
Mais bon, je vais arrêter de vous embêter avec ça, j'ai trouvé comment résoudre mon problème en spécifiant un nom différent pour ma class.

Merci encore à vous.

Mammouth du PHP | 1967 Messages

22 nov. 2016, 14:43

et la même page sans passer par ton serveur, en la renommant en .htm par exemple ?
Spols
pour les fan de rubik's cube ou pour les curieux ==> le portail francophone du rubik's cube

Petit nouveau ! | 6 Messages

22 nov. 2016, 15:27

:D
Sur un autre server Web, hébergé chez OVH, j'obtiens exactement le même résultat !!!

Je pige que dalle ! :D
Modifié en dernier par balthor le 22 nov. 2016, 16:04, modifié 1 fois.

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 8758 Messages

22 nov. 2016, 15:50

j'ai testé sur 4 navigateur (même IE !!!) et j'ai le carré orange

t'es sur la vérité n'est pas ailleurs ? :)
Il en faut peu pour être heureux ......

Petit nouveau ! | 6 Messages

22 nov. 2016, 16:04

J'ai trouvé l'explication... J'ai vraiment posté au bon endroit : PHP DÉBUTANT !
En fait, chez moi ça ne marche pas sur Chrome et Firefox parce que j'ai Ad Block d'installé sur ces 2 navigateurs.
Et c'est lui qui bloque l'affichage de ce fameux carré orange.

Allez savoir pourquoi il bloque ça....
Bref, j'ai enfin l'explication du pourquoi du comment.

Merci encore à tous pour votre participation à élucidation de ce mystère ! :D

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 8758 Messages

22 nov. 2016, 16:48

ro la vache, oui c'est capillotracté ça !!!

perso je n'aurais pas trouvé.

du coup une bonne raison pour écrire en français et sauver tes utilisateurs :-)~


@+
Il en faut peu pour être heureux ......

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9782 Messages

22 nov. 2016, 16:55

Bonjour,

Si tu clic sur l'icone d'adblock et ensuite sur "Ouvrir la liste des éléments filtrables", tu verras en rouge le filtre qui a bloqué ton élément.
Quand tout le reste a échoué, lisez le mode d'emploi...

Petit nouveau ! | 6 Messages

22 nov. 2016, 18:16

Bonjour,

Si tu clic sur l'icone d'adblock et ensuite sur "Ouvrir la liste des éléments filtrables", tu verras en rouge le filtre qui a bloqué ton élément.
Effectivement, la liste de filtres FR par défaut d'AdBlock contient tout un tas d’éléments contenant "sponsor", dont mon "sponsorBlock"...

Morale de l'histoire = toujours désactiver AdBlock quant on code du Web ! :lol:

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9782 Messages

22 nov. 2016, 19:46

Morale de l'histoire = toujours désactiver AdBlock quant on code du Web ! :lol:
36% des internautes utilisent adblock donc si tu avais désactivé adblock pour ton développement tu aurais mis en prod une page qui ne fonctionne pas pour un gros tiers de tes visiteurs, pas sûr que ce soit mieux ;)
Quand tout le reste a échoué, lisez le mode d'emploi...