affichage sql dans CSS

Eléphant du PHP | 388 Messages

01 mars 2010, 20:17

bonjour a tous,

J'ai un fichier PHP qui affiche les données d'une tables SQL, le tous s'affiche dans un tableau.
Cependant je souhaiterai changer cela et faire apparaitre chaque donnée dans un fond.
Exemple :
premier ligne de donnée s'affiche dans le fond 1
deuxième ligne de donnée s'affiche dans un autre fond1 mit juste en dessous de celle ci
troisième ligne de donnée s'affiche en dessous de la ligne 3 dans un autre fond.
etc...

pour cela dans mon fichier PHP qui affiche les donnée j'ai placé cela.
<?php
$sql= 'SELECT * FROM annonces WHERE 1';
$req= mysql_query($sql) or die ('erreur sql §<br />'.$sql.'<br />'.mysql_error());

//Ta boucle
$i=0;

while($data=mysql_fetch_array($req)) 
  { // ici la boucle qui permet d'effectuer la recherche 
  ?>
 <tr class="<?php echo ($i%2) ? 'classedufond2' : 'classedufond1'; ?>">
    <td><?php echo $data ['departement']; ?></td>
	<td><?php echo $data ['region']; ?></td>
	<td><?php echo $data ['categorie']; ?></td>
	<td><?php echo $data ['souscategorie']; ?></td>	
    <td><?php echo $data ['typeannonce']; ?></td>
	<td><?php echo $data ['titreannonce']; ?></td>
    <td><?php echo $data ['descriptionannonce']; ?></td>
	<td><?php echo $data ['prix'].'<br /><br />'; ?></td>
  </tr>
 <?php
    $i++;
?>
Puis dans mon fichier CSS j'ai placé cela.

Code : Tout sélectionner

classedufond1 { width: 400px; height: 200px; position: absolute; top: 140px; left: 160px; font-family: arial; background: url("../contenu/petite_annonce") no-repeat; } classedufond2 { width: 400px; height: 200px; position: absolute; top: 340px; left: 160px; font-family: arial; background: url("../contenu/petite_annonce") no-repeat; }
mais rien n'apparait, je trouve pas mon problème :cry:

pourriez vous m'aider merci d'avance

Eléphant du PHP | 109 Messages

01 mars 2010, 21:28

Bonjour à toi, :)

Moi, la première chose qui m'a sautée aux yeux, c'est que tu ne fermes pas ta boucle while.
Anyway, je suppose que tu ne nous as pas mis tout le code exprès ;)

Et deuxièmement, la propriété CSS pour mettre le background ne devrait pas plutôt se présenter comme ceci?

Code : Tout sélectionner

classedufondX { width: 400px; height: 200px; position: absolute; top: 140px; left: 160px; font-family: arial; background-image: url("images/fond.png"); no-repeat; }
Donc en gros background-image: au lieu de background: tout court?

Voila, essaye comme ceci et dit nous si c'est ok, sinon, reviens nous voir ^^
ANSI <font> <font> <font> <li> <p> <title> Mar I/O .NET

Mammouth du PHP | 985 Messages

01 mars 2010, 22:03

Le mieux est de renseigner le chemin à partir de la racine de ton site avec juste un slash avant:
Le chemin absolu donc.

Exemple (si le dossier images se trouve à la racine du site):

Code : Tout sélectionner

/images/fond.png
Perso je ne mets pas de guillemets, donc:

Code : Tout sélectionner

url(/images/fond.png) no-repeat;
Face à la roche, le ruisseau l'emporte toujours, non pas par la force mais par la persévérance.

Eléphant du PHP | 388 Messages

01 mars 2010, 22:34

cela marche comme sa :

Code : Tout sélectionner

.classedufond1 { width: 400px; height: 200px; position: absolute; top: 140px; left: 160px; font-family: arial; background: url(/contenu/petite_annonce.png) no-repeat; } .classedufond2 { width: 400px; height: 200px; position: absolute; top: 340px; left: 160px; font-family: arial; background: url(/contenu/petite_annonce.png) no-repeat; }
mais comment je peut faire pour qu'a chaque annonce passé ( chaque ligne de mon tableau ) apparaissent dans chaque fond séparément.

Mammouth du PHP | 985 Messages

01 mars 2010, 22:48

 <tr class="<?php echo ($i%2) ? 'classedufond2' : 'classedufond1'; ?>">
    <td><?php echo $data ['departement']; ?></td>
        <td><?php echo $data ['region']; ?></td>
        <td><?php echo $data ['categorie']; ?></td>
Si j'ai bien compris:
Ta boucle est censée changer de class css le <tr> qui lui même contient chaque ligne (<td>) d'une même annonce.

Dans le même principe:
Si tu veux changer de class css chaque ligne d'un annonce, alors faudra changer la class css de chaque <td> .
Donc le background de chaque lignes (<td> ).
Faudra donc, par exemple, créer deux autres class, avec un backgound différent.
Et ensuite modifier ta boucle en conséquence...

Enfin si j'ai bien compris ta question?
Face à la roche, le ruisseau l'emporte toujours, non pas par la force mais par la persévérance.

Eléphant du PHP | 388 Messages

02 mars 2010, 12:21

je te donne un exemple
premier annonces, j'ai une image de fond et sur cette image j'ai la premier annonce qui comprend tout les TD.

pour la deuxième annonce j'ai anouveau la même image de fond comportant toutes les données mais celle ci va se trouver en dessous de la première.

puis a chaque nouvelle annonce le fond apparait et s'incrémente toujours en dessous de la précedente

Mammouth du PHP | 985 Messages

02 mars 2010, 14:27

Le plus simple c'est de poster le code complet et non un bout de code avec une boucle non complète et même pas fermée (par une accolade) ...
On est obligé d'imaginer quelle est bien fermée et il est difficile de deviner ce qui peut se trouver à la suite...

Ensuite expliquer clairement ce qui te dérange dans le résultat que tu obtiens, puis ensuite le résultat que tu aimerais obtenir...
Avec éventuellement un petit exemple trouvé sur le net :wink:

Sinon:
faq-tutoriels/nombre-colonnes-dynamique ... 41626.html
Face à la roche, le ruisseau l'emporte toujours, non pas par la force mais par la persévérance.

Eléphant du PHP | 388 Messages

02 mars 2010, 19:04

d'accord je comprend voici le code de ma page PHP.
<?php
$base = mysql_connect ('aaaa','aaaa','aaaa');
mysql_select_db ('aaaa', $base);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head> 
 <title>petite annonce gratuite pour particulier encart publicitaire pour profesionnel - mon espace</title>
 <meta http-equiv="Content-Type" content="text/html";
	charset=iso-8859-1" />
 <link rel="stylesheet" media="screen" type="text/css"
	title="Design espace" href="css/annonces2_style.css" />
</head>
<body>
<div id="annonce"></div>
	

	<div id="entete">
 
	</div>

	<div id="corps">
 
		<img src="contenu/logisdesannonces.png" alt="logisdesannonces" class="logisdesannonces" />
		<img src="contenu/logo.png" alt="logo" class="logo" />
	<div id="bouton">		
		<a href="divers.html"><img src="contenu/divers.png" alt="divers" class="divers" border="0"/></a>
		<a href="vehicule.html"><img src="contenu/vehicule.png" alt="vehicule" class="vehicule" border="0"/></a>
		<a href="hightech.html"><img src="contenu/high-tech.png" alt="hightech" class="hightech" border="0"/></a>
		<a href="immobilier.html"><img src="contenu/immobilier.png" alt="immobilier" class="immobilier" border="0"/></a>
		<a href="animaux.html"><img src="contenu/animaux.png" alt="animaux" class="animaux" border="0"/></a>
		<a href="espacepro.html"><img src="contenu/boutonpro.png" alt="bouton" class="bouton" border="0"/></a>
	</div>	
		<a href="http://www.logisdesannonces.fr/accueil.html"><img src="contenu/bouton_accueil.png" alt="accueil" class="accueil" border="0"/></a>

	</div>


<table> <!-- Début du tableau -->
  
 
<?php
$sql= 'SELECT * FROM annonces WHERE 1';
$req= mysql_query($sql) or die ('erreur sql §<br />'.$sql.'<br />'.mysql_error());

//Ta boucle
$i=0;

while($data=mysql_fetch_array($req)) 
  { // ici la boucle qui permet d'effectuer la recherche 
  ?>
 <tr class="<?php echo ($i%2) ? 'classedufond2' : 'classedufond1'; ?>">
    <td><?php echo $data ['departement']; ?></td>
	<td><?php echo $data ['region']; ?></td>
	<td><?php echo $data ['categorie']; ?></td>
	<td><?php echo $data ['souscategorie']; ?></td>	
    <td><?php echo $data ['typeannonce']; ?></td>
	<td><?php echo $data ['titreannonce']; ?></td>
    <td><?php echo $data ['descriptionannonce']; ?></td>
	<td><?php echo $data ['prix'].'<br /><br />'; ?></td>
  </tr>
 <?php
    $i++;
?>
    
<?php
  }
 mysql_free_result ($req);
mysql_close ();
  ?>
</table>

</div>

<div id="pied_de_page">
 <div id="boutonbas">
	<a href="information.html"><img src="contenu/information.png" alt="information" class="information" border="0"/></a>
	<a href="contact.html"><img src="contenu/contact.png" alt="contact" class="contact" border="0"/></a>
	<a href="newsletters.html"><img src="contenu/newsletters.png" alt="newsletters" class="newsletters" border="0"/></a>
	<a href="offre.html"><img src="contenu/offre.png" alt="offre" class="offre" border="0"/></a>
	<a href="aide.html"><img src="contenu/aide.png" alt="aide" class="aide" border="0"/></a>

</div>
</div>


</body>
</html>

et voici mon code CSS

Code : Tout sélectionner

body { color: black; background-color: #CBCBCB; } #entete { width: 1024px; height: 200px; position: absolute; top: 90px; left: 90px; background: url("../contenu/barre.png") no-repeat; } div#entete { color:white; font-size:15px; font-family: arial; } #h2 { position: absolute; top: 100px; left: 200px; font-size:13px; font-family: arial; color:white; } .logisdesannonces { position: absolute; top: 30px; left: 210px; } .accueil { position: absolute; top: 79px; left: 100px; } .logo { position: absolute; top: -20px; left: 90px; } #bouton { width: 1024px; height: 200px; position: absolute; top: 0px; left: 160px; border: 0px; } .divers { position: absolute; top: 79px; left: 102px; border: 0px; } .vehicule { position: absolute; top: 79px; left: 240px; border: 0px; } .hightech { position: absolute; top: 79px; left: 378px; border: 0px; } .immobilier { position: absolute; top: 79px; left: 516px; border: 0px; } .animaux { position: absolute; top: 79px; left: 654px; border: 0px; } .bouton { position: absolute; top: 30px; left: 580px; border: 0px; } .classedufond1 { width: 400px; height: 200px; position: absolute; top: 140px; left: 160px; font-family: arial; background: url(/contenu/petite_annonce.png) no-repeat; } .classedufond2 { width: 400px; height: 200px; position: absolute; top: 340px; left: 160px; font-family: arial; background: url(/contenu/petite_annonce.png) no-repeat; } #pied_de_page { width: 1024px; height: 200px; position: absolute; top: 780px; left: 90px; background: url("../contenu/barre.png") no-repeat; } #boutonbas { width: 1024px; height: 200px; position: absolute; top: 0px; left: 160px; border: 0px; } .information { position: absolute; top: -10px; left: 10px; border: 0px; } .contact { position: absolute; top: -10px; left: 150px; border: 0px; } .offre { position: absolute; top: -10px; left: 290px; border: 0px; } .newsletters { position: absolute; top: -10px; left: 430px; border: 0px; } .aide { position: absolute; top: -10px; left: 570px; border: 0px; }
Donc comme je les dit je souhaiterai mettre une image rectangulaire en fond de chaque annonces.
Voici un exemplehttp://www.logisdesannonces.fr/exemple.jpg
Comme tu peut le constater il y a un fond blanc sous chaque annonce, chaque annonce reviens a la ligne et un autre fond blanc apparait je souhaite faire la meme chose a chaque annonce présente le fond apparait avec le titre la description ....
J'espère être plus explicite en tous cas merci de votre aide car pour la disposition je bloc un peut :(

Mammouth du PHP | 985 Messages

02 mars 2010, 19:26

Ok regarde ces liens:
http://a-pellegrini.developpez.com/tuto ... eaux/#LIII
http://www.zonecss.fr/style_css/feuille ... splay.html
http://www.aidenet.com/css/css40a.htm
http://www.aidenet.com/css/css42.htm

Tout en regardant aussi le lien que je t'ai donné plus haut :wink:

Et test en simplifiant tes 2 class dans un premier temps:

Code : Tout sélectionner

.classedufond1 { width: 400px; height: 200px; font-family: arial; background-color: white; } .classedufond2 { width: 400px; height: 200px; font-family: arial; background-color: lavender; }
Ensuite dés que le résultat te convient, mets les backgrounds que tu désires...
Face à la roche, le ruisseau l'emporte toujours, non pas par la force mais par la persévérance.

Eléphant du PHP | 388 Messages

02 mars 2010, 20:30

j'ai regardé les liens que tu ma envoyer mais j'ai déja utilisé cela regarde dans mon tableau

http://www.logisdesannonces.fr/annonces.php

Supposant que je n'utilise pas de fond, et qu'on parte sur des tableaux je souhaiterai qu'a chaque annonce poster exemple si j'en est 5, chaques annonces sera présentées dans un tableau diffèrent, pas comme actuellement si tu regarde le liens tous est dans un seul tableau avec plusieurs lignes ( une annonce égale un tableau, a la deuxiéme annonce un deuxième tableau se crée juste en dessous etc...)
Comprend tu se que je souhaite de faire puis après quand j'aurai réussi cela a se moment la je pourrai ajouter un fond et voir comment il pourrait se répéter A la place du tableau le fond apparaitra)
c'est pas évident a expliquer mais j'espère que tu vois ce que je veut dire.
Encore merci pour ton aide

Mammouth du PHP | 985 Messages

02 mars 2010, 20:40

Je ne suis pas certain que tu es véritablement pris le temps de te documenter.
Sinon pour créer un tableau pour chaque annonce:
Mets les balises <table> et </table> à l'intérieur de ta boucle
En ajoutant, par exemple un margin pour les séparer, et le tour est joué.
Face à la roche, le ruisseau l'emporte toujours, non pas par la force mais par la persévérance.

Eléphant du PHP | 388 Messages

02 mars 2010, 20:51

le problème j'avais déja essayé ce faire cela
<table> <!-- Début du tableau -->
  
 
<?php
$sql= 'SELECT * FROM annonces WHERE 1';
$req= mysql_query($sql) or die ('erreur sql §<br />'.$sql.'<br />'.mysql_error());

//Ta boucle
$i=0;

while($data=mysql_fetch_array($req)) 
  { // ici la boucle qui permet d'effectuer la recherche 
  ?>
 <tr class="<?php echo ($i%2) ? 'classedufond2' : 'classedufond1'; ?>">
 <table>
    <td><?php echo $data ['departement']; ?></td>
	<td><?php echo $data ['region']; ?></td>
	<td><?php echo $data ['categorie']; ?></td>
	<td><?php echo $data ['souscategorie']; ?></td>	
    <td><?php echo $data ['typeannonce']; ?></td>
	<td><?php echo $data ['titreannonce']; ?></td>
    <td><?php echo $data ['descriptionannonce']; ?></td>
	<td><?php echo $data ['prix'].'<br /><br />'; ?></td>
</table>
  </tr>
 <?php
    $i++;
?>
    
<?php
  }
 mysql_free_result ($req);
mysql_close ();
  ?>
</table>
mais le HIC cela donne sa http://www.logisdesannonces.fr/an.php

Mammouth du PHP | 985 Messages

02 mars 2010, 20:54

Et le début du tableau est ou?
En dehors de la boucle ou dedans?

Code : Tout sélectionner

<table> <!-- Début du tableau -->
Face à la roche, le ruisseau l'emporte toujours, non pas par la force mais par la persévérance.

Eléphant du PHP | 388 Messages

02 mars 2010, 20:55

Désolé voici le code complet faut que j'arrête de donner des bout de code :?
<?php
$base = mysql_connect ('aaaa,'laaa','aaa');
mysql_select_db ('aaa', $base);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head> 
 <title>petite annonce gratuite pour particulier encart publicitaire pour profesionnel - mon espace</title>
 <meta http-equiv="Content-Type" content="text/html";
	charset=iso-8859-1" />
 <link rel="stylesheet" media="screen" type="text/css"
	title="Design espace" href="css/annonces_style.css" />
</head>
<body>
<div id="annonce"></div>
	

	<div id="entete">
 
	</div>

	<div id="corps">
 
		<img src="contenu/logisdesannonces.png" alt="logisdesannonces" class="logisdesannonces" />
		<img src="contenu/logo.png" alt="logo" class="logo" />
	<div id="bouton">		
		<a href="divers.html"><img src="contenu/divers.png" alt="divers" class="divers" border="0"/></a>
		<a href="vehicule.html"><img src="contenu/vehicule.png" alt="vehicule" class="vehicule" border="0"/></a>
		<a href="hightech.html"><img src="contenu/high-tech.png" alt="hightech" class="hightech" border="0"/></a>
		<a href="immobilier.html"><img src="contenu/immobilier.png" alt="immobilier" class="immobilier" border="0"/></a>
		<a href="animaux.html"><img src="contenu/animaux.png" alt="animaux" class="animaux" border="0"/></a>
		<a href="espacepro.html"><img src="contenu/boutonpro.png" alt="bouton" class="bouton" border="0"/></a>
	</div>	
		<a href="http://www.logisdesannonces.fr/accueil.html"><img src="contenu/bouton_accueil.png" alt="accueil" class="accueil" border="0"/></a>

	</div>


<table> <!-- Début du tableau -->
  
 
<?php
$sql= 'SELECT * FROM annonces WHERE 1';
$req= mysql_query($sql) or die ('erreur sql §<br />'.$sql.'<br />'.mysql_error());

//Ta boucle
$i=0;

while($data=mysql_fetch_array($req)) 
  { // ici la boucle qui permet d'effectuer la recherche 
  ?>
 <tr class="<?php echo ($i%2) ? 'classedufond2' : 'classedufond1'; ?>">
 <table>
    <td><?php echo $data ['departement']; ?></td>
	<td><?php echo $data ['region']; ?></td>
	<td><?php echo $data ['categorie']; ?></td>
	<td><?php echo $data ['souscategorie']; ?></td>	
    <td><?php echo $data ['typeannonce']; ?></td>
	<td><?php echo $data ['titreannonce']; ?></td>
    <td><?php echo $data ['descriptionannonce']; ?></td>
	<td><?php echo $data ['prix'].'<br /><br />'; ?></td>
</table>
  </tr>
 <?php
    $i++;
?>
    
<?php
  }
 mysql_free_result ($req);
mysql_close ();
  ?>
</table>

</div>

<div id="pied_de_page">
 <div id="boutonbas">
	<a href="information.html"><img src="contenu/information.png" alt="information" class="information" border="0"/></a>
	<a href="contact.html"><img src="contenu/contact.png" alt="contact" class="contact" border="0"/></a>
	<a href="newsletters.html"><img src="contenu/newsletters.png" alt="newsletters" class="newsletters" border="0"/></a>
	<a href="offre.html"><img src="contenu/offre.png" alt="offre" class="offre" border="0"/></a>
	<a href="aide.html"><img src="contenu/aide.png" alt="aide" class="aide" border="0"/></a>

</div>
</div>


</body>
</html>
tu veut dire que je doit repréciser <table> avant la boucle et le début du tableau ?

Eléphant du PHP | 388 Messages

02 mars 2010, 21:02

tu veut dire comme cela ?
<table> <!-- Début du tableau -->
  
 
<?php
$sql= 'SELECT * FROM annonces WHERE 1';
$req= mysql_query($sql) or die ('erreur sql §<br />'.$sql.'<br />'.mysql_error());

//Ta boucle
$i=0;

while($data=mysql_fetch_array($req)) 
  { // ici la boucle qui permet d'effectuer la recherche 
  ?>
  <table>
 <tr class="<?php echo ($i%2) ? 'classedufond2' : 'classedufond1'; ?>">
 
    <td><?php echo $data ['departement']; ?></td>
	<td><?php echo $data ['region']; ?></td>
	<td><?php echo $data ['categorie']; ?></td>
	<td><?php echo $data ['souscategorie']; ?></td>	
    <td><?php echo $data ['typeannonce']; ?></td>
	<td><?php echo $data ['titreannonce']; ?></td>
    <td><?php echo $data ['descriptionannonce']; ?></td>
	<td><?php echo $data ['prix'].'<br /><br />'; ?></td>

  </tr>
 
 <?php
    $i++;
?>
 </table>