Problème d'affichage d'éléments d'une table MYSQL avec des div

Question

stounfr

6 Feb 2008 à 15:15

Bonjour,

J'ai un petit problème pour afficher mes "produits" de ma base de données MYSQL avec des divs.
Je m'explique je désire afficher mes produits sous forme de div et non sous forme de tableau.

voici le code source de ma page,

<code>
<?php

$famille = $_POST['famille'];
if ($famille == "clotures")
{
$fam = "Clotures";
$couleur = "fondclotureproduit.png";
}
elseif ($famille == "portail")
{
$fam = "Portails";
$couleur = "fondportailproduit.png";
}
elseif ($famille == "gardecorps")
{
$fam = "Garde-Corps";
$couleur = "fondgardecorpsproduit.png";
}
elseif ($famille == "voletsroulants")
{
$fam = "Volets Roulants";
$couleur = "fondvoletroulantproduit.png";
}
elseif ($famille == "storeabrasdroit")
{
$fam = "Stores a bras droit";
$couleur = "fondstoresproduit.png";
}
elseif ($famille == "menuiserie")
{
$fam = "Menuiserie";
$couleur = "fondmenuiserieproduit.png";
}
elseif ($famille == "divers")
{
$fam = "Divers";
$couleur = "fonddiversproduit.png";
}
else
{
$fam = "NEANT";
$couleur = "000000";
}
?>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Affichage Produits en base</title>

<link rel="stylesheet" href="styles.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="jquery.accessible-news-slider.css" type="text/css" media="screen, projection" />
<script language="javascript" type="text/javascript" src="jquery-1.1.3.1.pack.js"></script>
<script language="javascript" type="text/javascript" src="jquery.accessible-news-slider.js"></script>
<script language="javascript" type="text/javascript">
$(function() {

$(".news").accessNews({
newsHeadline: "News Def De Bass",
newsSpeed: "normal"
});

$(".world_affairs").accessNews({
newsHeadline: "World Affairs",
newsSpeed: "normal"
});

/*

newsHeadline: "Top Stories" (String) | Each unique slider (id) or set of sliders (class) can receive a headline.
newsSpeed: "normal" (String/Integer) | "slow","normal","fast", or an integer, with 1 being the fastest animation.

*/

});
</script>

</head>

<body bgcolor="#b7b7b7">

<center>
<div style=" color: black; font-size: medium; font-family: serif; background-image: url('../images/produits/<?php echo $couleur; ?>'); text-align: center; visibility: visible; display: block; position: relative; width: 640px;">
<br>
<?php
$connexion = mysql_connect('XXXXXXX', 'XXXXXXXXXX', 'XXXXXXXX') or die ("Connexion au serveur impossible");
$db = mysql_select_db("XXXXXXXXXX", $connexion) or die ("La base de données ne peut être sélectionnée");
$query = "SELECT * FROM produits WHERE famille LIKE'$famille'";
$result = mysql_query($query) or die ("Exécution de la requête impossible");
$total = mysql_num_rows($result);
// on affiche les informations de l'enregistrement en cours
if($total) {
echo '<center>';
echo '<font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><b>Il y a '.$total.' produits en base</b>';
echo '<br>';
echo '<font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><b>Famille : </>'.$fam;
echo '</td></table>';
echo '
<div class="news_slider news">
<div class="messaging">
Please Note: You may have disabled JavaScript and/or CSS. Although this news content will be accessible, certain functionality is unavailable.
</div>
<a href="#skip_to_news_1" class="skip">Skip to news content.</a>
<a href="#" class="prev"><img src="images2/prev.png" width="20" height="20" alt="Previous" title="Previous" env="images" /></a>
<a href="#" class="next"><img src="images2/next.png" width="20" height="20" alt="Next" title="Next" env="images" /></a>
</div>
<div class="news_items">
<a name="skip_to_news_1"></a>
<div class="container fl">
';
while($row = mysql_fetch_array($result))
{

echo '<div class="item fl">
<a href="/"><img src="images2/photo.gif" width="65" height="65" alt="" class="fl" /></a>
<div class="fl">
<a href="#">Ouverture du site defdebass.com</a><br />'.$row['famille'].'<br />
'.$row['sous_famille'].'<br />
'.$row['ref'].'<br />
'.$row['designation'].'<br />
<a href="/montrearticle.php?id='.$row['id'].'">Montrer</a>
</div>
</div>
</div>
</div>
</div>';
}
echo '
</div>
</div>
</div>';
}
else echo 'Pas d\'enregistrement dans cette table…';
mysql_free_result($result);
mysql_close();
echo '</center>';
?><br>
<form>
<center>
<input type="submit" onclick="javascript:window.close()" value="Retour Famille"></center>
</form>
<br>
</center>
</div>

</body>

</html>
</code>

C'est une adaptation de mon premier code qui affichait les résultat dans un tableau.

J'utilise aussi un javascript pour un système de slide qui m'affiche deux div par deux.
code source du javascript :

<code>
jQuery.fn.accessNews = function(settings) {
settings = jQuery.extend({
newsHeadline: "Top Stories",
newsSpeed: "normal"
}, settings);
return this.each(function(i) {
aNewsSlider.itemWidth = parseInt(jQuery(".item:eq(" + i + ")",".news_slider").css("width")) + parseInt(jQuery(".item:eq(" + i + ")",".news_slider").css("margin-right"));
aNewsSlider.init(settings,this);
jQuery(".tout_montrer > a", this).click(function() {
aNewsSlider.vAll(settings,this);
return false;
});
});
};
var aNewsSlider = {
itemWidth: 0,
init: function(s,p) {
jQuery(".messaging",p).css("display","none");
itemLength = jQuery(".item",p).length;
if (jQuery(".tout_montrer",p).width() == null) {
jQuery(".news_items",p).prepend("<p class='tout_montrer'>" + s.newsHeadline + " [ " + itemLength + " total ]  -  <a href='#'>Tout Montrer</a></p>");
}
newsContainerWidth = itemLength * aNewsSlider.itemWidth;
jQuery(".container",p).css("width",newsContainerWidth + "px");
jQuery(".next",p).css("display","block");
animating = false;
jQuery(".next",p).click(function() {
if (animating == false) {
animating = true;
animateLeft = parseInt(jQuery(".container",p).css("left")) - (aNewsSlider.itemWidth * 2);
if (animateLeft + parseInt(jQuery(".container",p).css("width")) > 0) {
jQuery(".prev",p).css("display","block");
jQuery(".container",p).animate({left: animateLeft}, s.newsSpeed, function() {
jQuery(this).css("left",animateLeft);
if (parseInt(jQuery(".container",p).css("left")) + parseInt(jQuery(".container",p).css("width")) <= aNewsSlider.itemWidth * 2) {
jQuery(".next",p).css("display","none");
}
animating = false;
});
} else {
animating = false;
}
}
return false;
});
jQuery(".prev",p).click(function() {
if (animating == false) {
animating = true;
animateLeft = parseInt(jQuery(".container",p).css("left")) + (aNewsSlider.itemWidth * 2);
if ((animateLeft + parseInt(jQuery(".container",p).css("width"))) <= parseInt(jQuery(".container",p).css("width"))) {
jQuery(".next",p).css("display","block");
jQuery(".container",p).animate({left: animateLeft}, s.newsSpeed, function() {
jQuery(this).css("left",animateLeft);
if (parseInt(jQuery(".container",p).css("left")) == 0) {
jQuery(".prev",p).css("display","none");
}
animating = false;
});
} else {
animating = false;
}
}
return false;
});
},
vAll: function(s,p) {
var o = p;
while (p) {
p = p.parentNode;
if (jQuery(p).attr("class") != undefined && jQuery(p).attr("class").indexOf("news_slider") != -1) {
break;
}
}
if (jQuery(o).text().indexOf("Tout Montrer") != -1) {
jQuery(".next",p).css("display","none");
jQuery(".prev",p).css("display","none");
jQuery(o).text("Montrer Moins");
jQuery(".container",p).css("left","0px").css("width",aNewsSlider.itemWidth * 2 + "px");
} else {
jQuery(o).text("Tout Montrer");
aNewsSlider.init(s,p);
}
}
};
</code>

Je pense que j'ai du faire une erreur dans mes codes, mais je ne vois vraiment pas ou.
Si quelqu'un a une idée pour éclairer ma lanterne...
Stounfr

Alphonse

7 Feb 2008 à 10:01

Salut !

Qu'attends-tu de notre part ? Réécrire tout ton code ?

stounfr

7 Feb 2008 à 13:40

yep,

absolument pas, mais je ne vois pas ou j'ai fait une erreur et un pti coup de main sur le sujet ne serait pas de trop...
Je ne demande pas que l'on me réécrive tout mon code mais juste m'aidé à trouvé l'endroit ou ca coince...

CPascal

7 Feb 2008 à 14:12

Vu la taille du code , que cela implique plein de Jquery( sur lequel j'ai des connaissances: minimum syndical)
qu'il y a des scripts javascripts annexes, un css non fourni
et une base de données derriere dont on ne nous explique pas la structure.

je te raconte pas le "chantier" rien que pour se faire un test.

si tu n'es pas capable de nous cerner le bout de code fautif ou de nous expliquer qu'est ce qui ne marche pas ( message d'erreur ou description de ce qui se passe) .

comment veux tu qu'on fasse nous? a part coup de chance de tombé sur une erreur de syntaxe flagrante. ( qui devrait donc retourner un message d'erreur)

le sujet de ta question est par rapport au div. pourtant le css est pas fourni...
Modifié par CPascal (07 Feb 2008 - 14:20)

Alphonse

7 Feb 2008 à 14:20

Exactement, il faut que tu saches isoler toi-même ton code et faire des tests jusqu'à ce que tu trouves ton erreur !

Une curiosité tout de même : $query = "SELECT * FROM produits WHERE famille LIKE'$famille'";

1° Remarque : pourquoi utiliser un LIKE sans % plutôt qu'une égalité ? En gros ça n'a pas de sens...
2° Fais un echo de ta variable $query et montre nous ce qu'elle retourne car je vois un "petit" soucis...

Et enfin, si tu as des messages d'erreurs, comme dit CPascal, merci de nous en faire part !

stounfr

7 Feb 2008 à 14:33

re,

pour moi le code doit être éronné à ce niveau :


if($total) {
echo '<center>';
echo '<font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><b>Il y a '.$total.' produits en base</b>';
echo '<br>';
echo '<font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><b>Famille : </>'.$fam;
echo '</td></table>';
echo '
<div class="news_slider news">
<div class="messaging">
Please Note: You may have disabled JavaScript and/or CSS. Although this news content will be accessible, certain functionality is unavailable.
</div>
<a href="#skip_to_news_1" class="skip">Skip to news content.</a>
<a href="#" class="prev"><img src="images2/prev.png" width="20" height="20" alt="Previous" title="Previous" env="images" /></a>
<a href="#" class="next"><img src="images2/next.png" width="20" height="20" alt="Next" title="Next" env="images" /></a>
</div>
<div class="news_items">
<a name="skip_to_news_1"></a>
<div class="container fl">
';
while($row = mysql_fetch_array($result))
{



echo '<div class="item fl">
<a href="/"><img src="images2/photo.gif" width="65" height="65" alt="" class="fl" /></a>
<div class="fl">
<a href="#">Ouverture du site defdebass.com</a><br />'.$row['famille'].'<br />
'.$row['sous_famille'].'<br />
'.$row['ref'].'<br />
'.$row['designation'].'<br />
<a href="/montrearticle.php?id='.$row['id'].'">Montrer</a>
</div>
</div>
</div>
</div>
</div>';
}
echo '
</div>
</div>
</div>';
}
else echo 'Pas d\'enregistrement dans cette table…';
mysql_free_result($result);
mysql_close();

Pour les css "jquery.accessible-news-slider.cs" que j'ai oublié :


.fl { color: teal; font-family: "HelveticaNeue MediumCond"; float: left; display: inline; }
img {
	border: 0; display: block;
}
.news_slider { position: relative; width: 580px; margin: 0 auto 20px; text-align: left; }
.news_slider .messaging { display: block; padding: 5px; margin: 0 20px 5px; background: #ffffcc; }
.news_slider .prev, .news_slider .next {
	position: absolute; top: 42%; display: none;
}
.news_slider .next {
	right: 0;
}
.news_slider .container { background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; position: relative; top: 0; left: 0; width: 100%; }
.news_slider .news_items {
    /*
        The width must be equal to .item ((width + margin-right) * 2).
    */
	position: relative; width: 540px; top: 0; left: 20px; overflow: hidden;
}
.news_slider .tout_montrer {
	font-size: .8em; padding: 5px; margin: 0 0 2px 0; border-top: #eeeeed 1px solid; border-bottom: #eeeeed 1px solid; text-align: center;
}
.news_slider .item {
    /*
        Must contain a width and a margin-right.
    */
	background-image: url('/fond_trans_blanc.png'); width: 260px; height: 140px; margin-right: 10px; }
.news_slider .item div {
	font-size: .8em; width: 175px; padding: 10px 0 10px 0;
}
.news_slider .item img {
	padding: 10px;
}

La base est super simple : une table produits avec champs •id(auto_incr) •famille •sous_famille •ref •code_couleur •designation •longueur •conditionnement •images1 •images2

Alphonse

7 Feb 2008 à 14:43

Plein de fois dans ton code, tu ouvres des balises que tu ne refermes pas :
- soit tu les ouvres mais tu ne les fermes pas au bon endroit ;
- soit tu les ouvres pas au bon endroit et tu en fermes trop ;
- soit tu en ouvres et oublies de les fermer !

J'en veux pour exemple ceci -> dans ton while() tu ouvres 2 <div> mais tu en fermes 5 !!!

Tu peux revoir tout ton code html !

Remarque : soit tu fais de l'html soit de l'xhtml mais un mixte des deux, ça n'existe pas ! Et puis, tant que tu ne définis pas un doctype, ton code n'est même pas "interprété" comme du html mais comme quelque chose qui ressemble à du html.

CPascal

7 Feb 2008 à 14:43

ya beaucoup de fermeture de div dans le while non? si le while ne boucle qu'une fois je veux bien que ça ferme ce qu'il y au dessus mais sinon tu fermes bcp trop de div.
hors pourquoi un while si tu n'attends pas plus d'un resultat.

ton probleme, toujours pas décrit sic, pourrait venir de là.

edit: grillé d'une seconde....m'enfin quoi c'est vrai que ça tombe sous le sens. debug un peu tous ces div. si tu fais du div faut respecter les normes.

essai de valider ta page avec le validateur de firefox. faut avoir un pluggin je crois...ça doit etre web developper. ou sinon le validateur du w3C. mais fais valider le code html produit pas le php auquel y pigera rien. surtout si tu lui copie colle le code au lieu de lui donner une addresse pour w3c.
Modifié par CPascal (07 Feb 2008 - 15:24)

Laurent Denis

7 Feb 2008 à 14:48

Alphonse a écrit :
Et puis, tant que tu ne définis pas un doctype, ton code n'est même pas "interprété" comme du html mais comme quelque chose qui ressemble à du html.

ah bah, si c'était le cas, 99% du Web serait bien mal parti Smiley lol

Non. Sérieusement: dans tous les cas, le "code" est "interprété" comme du HTML. Y compris et à commencer par les pages avec doctype XHTML.

Seul le type de contenu adressé par le serveur peut provoquer un traitement spécifique "en tant que XHTML". Le doctype, lui, ne change que le mode de prise en compte des surcouches CSS et JS (doctype switching entre le mode de compatibilité avec les anciennes implémentations du navigateur et le mode le plus récent).
Modifié par Laurent Denis (07 Feb 2008 - 14:50)

stounfr

7 Feb 2008 à 14:57

pour les div que je referme trop je ne comprends pas car sur mon doc j'ai pas le problème (ouverture de div et fermeture ok) mais je vais regarder encore...
En fait le gros problème c'est que j'aimerai que mes données soient affichées comme ca : www.defdebass.com[/url]
Pour voir l'affichage que cela me fait : www.stockalu.com/produits.php[/url] il suffit de choisir son type de produit pour voir l'affichage

CPascal

7 Feb 2008 à 15:12

même en enlevant les [/url] qui servent a rien je ne vois pas le lien vers ta page qui me rends une erreur 404.

en regardant directement dans la page principal du site. je vois des descriptions de produit. pas super bien mis en page mais qui semble marcher....

c'est quoi le pb? si c'est la mise en page alors tu n'es pas dans la bonne partie du forum. consulter les pro du css dans ce cas.

sinon explique. explique de toute façon Smiley cligne

.
Modifié par CPascal (07 Feb 2008 - 15:20)

stounfr

7 Feb 2008 à 15:33

désolé, j'me suis trompé dans l'adresse c'est :www.stockalu.com/produits.html [/url]

oui, le lien fonctionne et comme on peut le voir c'est pas beau (bon, on verra cela après), mais normalement il faudrait que cela s'affiche comme sur la page
www.defdebass.com[/url] pour l'affichage des news.

J'espère que je suis assez clair Smiley ohwell

CPascal

7 Feb 2008 à 15:58

ben quand même ca me semble être juste un probleme de mise en page.

en plus les liens rubrique avec les produits sont dans une popup qui empeche l'utilisation de firefox pour analyser le pb ou voir le code généré.

Mais franchement heureusement que je me suis pas mis a epluché ton code a la recherche d'une erreur.

je te conseille de bien regarder cette histoire de div fermant ou pas malgré tous. n'oublie pas d'imaginer ce qui se passe dynamiquement. c.a.d pas quand tu ecris le code mais quand le programme le génére

2 liens:
pour l'arrondi des div
http://www.alsacreations.com/articles/cadre

pour une idée de comment faire l'aspect diaporama.
http://forum.alsacreations.com/topic-2-32409-1-Comment-faire-cela-.html#copy

tous ça etant du contenu de ce site. n'oublie pas de regarder les tutoriels du sites y en a pleins. et encore plus la F.A.Q ( il faut le savoir y a encore plus de trucs dans la faq que dans la rubrique tutoriels )

au passage j'utilise normalement IE6 et non FF.
moralité ton site de référence (ton exemple) est vraiment affreux sous IE6. avant de le regarder avec FF je me posais de sacré question sur le pourquoi vouloir ressembler a ça......
Modifié par CPascal (07 Feb 2008 - 16:06)

stounfr

7 Feb 2008 à 21:47

Résolu, je fermais mes div trop top dans ma boucle PHP.

Merci à tous pour votre aide qui m'a bien sorti de ma m.....
Stounfr
Smiley biggrin

Alphonse

8 Feb 2008 à 09:15

C'est donc Résolu ?

Sujet clos