[RESOLU] CSS/PHP

CSS/PHP [RESOLU] - PHP - Programmation

Marsh Posté le 08-01-2008 à 12:08:14    

Bonjour, je voudrais créer des vignettes sous forme de tableau sans utiliser <table>, juste avec des css
j'ai donc plusieurs class:
 

Code :
  1. .vignette1
  2. {
  3.     ...
  4.     left:0px;
  5.     top:0px;
  6. }
  7. .vignette2
  8. {
  9.     ...
  10.     left:0px;
  11.     top:10px;
  12. }
  13. .vignette3
  14. {
  15.     ...
  16.     left:0px;
  17.     top:20px;
  18. }
  19. .vignette4
  20. {
  21.     ...
  22.     left:10px;
  23.     top:0px;
  24. }
  25. ...


 
J'ai créer un script en PHP pour déterminer les positions des vignettes suivant leurnuméro.
 
Ce que je cherche à faire, c'est créer un script qui génère automatiquement les class vignette. Voila ce que j'ai tenter de faire:
 

Code :
  1. for ($c=1; $c<=$nb_colonnes; $c++)
  2. {
  3.  $top = 0;
  4.  // Boucle d'une colonne de vignettes
  5.  while ( ($x<=3) && ($num != $nb_vignettes) )
  6.  {
  7.   $num ++;
  8.   echo"#Vignette"; echo $num; echo" a.v";echo $num;
  9.   echo "{
  10.    left:";echo $left;echo "px;
  11.    top: ";echo $top;echo "px;
  12.   };
  13.   //Incrémentation des variables
  14.   $top = $top + 134;
  15.   $top_texte = $top_texte + 116;
  16.   $x++;
  17.  } // fin boucle while


 
Je veux faire un tableau avec maximum 3 lignes (d'où le

Code :
  1. $x<=3

de la boucle while
 
ce code est dans une feuillede style (avec l'extension .php) que j'apelle dans une autre page php mais ca ne marche pas.
Voici le code complet de ces deux pages: Page PHP et Feuille de style CSS  
 
Merci d'avance


Message édité par sandykoala le 08-01-2008 à 16:19:01
Reply

Marsh Posté le 08-01-2008 à 12:08:14   

Reply

Marsh Posté le 08-01-2008 à 12:09:27    

mais au secours, ce que tu fais est 1000 fois pire qu'un tableau  
 
regarde plutot du cote de float en CSS


---------------

Reply

Marsh Posté le 08-01-2008 à 12:12:08    

Et pourquoi tu ne veux pas utiliser une table ?


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 08-01-2008 à 12:13:16    

OUPS!
Ok en gros faut que j'arrete les degats. je cherche un moyen simple pour ajouter une vignette et qu'elle se place automatiquement.
Je voulais éviter les tableaux mais il vaut peut-etre mieux que je tape toutes les class en clair.
 
Je ne veux pas utiliser les table parce que j'ai lu que c'était assez gros à charger et les css le font très bien!

Message cité 1 fois
Message édité par sandykoala le 08-01-2008 à 12:14:13
Reply

Marsh Posté le 08-01-2008 à 12:14:10    

sandykoala a écrit :

OUPS!
Ok en gros faut que j'arrete les degats. je cherche un moyen simple pour ajouter une vignette et qu'elle se place automatiquement.
Je voulais éviter les tableaux mais il vaut peut-etre mieux que je tape toutes les class en clair.


 
Donc je réitère ma question


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 08-01-2008 à 12:16:54    

Ça pu la mode des sites complètement tabless :o (j'ai bien dis site et pas mise en page)
On lui a dit que les tab c'était pas bien, mais il pas trop cherché à comprendre le pourquoi du comment semble-t-il.


Message édité par dwogsi le 08-01-2008 à 12:17:31

---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 08-01-2008 à 12:17:47    

est-ce que je peux écrire un truc comme ca:
 
.vignette1
{
    ...
    left:0px;
    top:10px;
    background: url(../../memo/images/Projets/<? echo $_SESSION['Img1'];?>".gif) 0 0 no-repeat;
}

Reply

Marsh Posté le 08-01-2008 à 12:20:06    

Rhoalalalalalalalala [:mister mystere]

Message cité 1 fois
Message édité par Dj YeLL le 08-01-2008 à 12:20:19

---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 08-01-2008 à 12:22:31    

Tes vignettes c'est quoi au juste ?

Reply

Marsh Posté le 08-01-2008 à 12:23:49    

Dj YeLL a écrit :

Rhoalalalalalalalala [:mister mystere]


lol
 
Et comment je peux faire pour passer une variable de ma page PHP. J'ai plusieurs pages qui fonctionne pareil donc j'aimerai éviter de faire une feuille de style pour chaque feuille.

Reply

Marsh Posté le 08-01-2008 à 12:23:49   

Reply

Marsh Posté le 08-01-2008 à 12:25:19    

FlorentG a écrit :

Tes vignettes c'est quoi au juste ?


C'est des images en gif de 85px sur 85px : Aperçu

Reply

Marsh Posté le 08-01-2008 à 12:29:17    

le but du CSS c'est de separer la forme du contenu

 

donc en php tu genere ta liste de vignette

Code :
  1. <div class="conteneurVignette">
  2. <img src="vignette1.jpg">
  3. <img src="vignette2.jpg">
  4. <img src="vignette3.jpg">
  5. <img src="vignette4.jpg">
  6. </div>
 

et en css tu gère la façon dont ca s'affiche

Message cité 1 fois
Message édité par flo850 le 08-01-2008 à 12:29:23

---------------

Reply

Marsh Posté le 08-01-2008 à 12:39:20    

flo850 a écrit :

le but du CSS c'est de separer la forme du contenu  
 
donc en php tu genere ta liste de vignette  

Code :
  1. <div class="conteneurVignette">
  2. <img src="vignette1.jpg">
  3. <img src="vignette2.jpg">
  4. <img src="vignette3.jpg">
  5. <img src="vignette4.jpg">
  6. </div>


 
et en css tu gère la façon dont ca s'affiche


je suis pas sur de bien comprendre comment est la class conteneurVignette parce que les vignettes ne sont pas disposées de la meme manière. La ca va les superposé non?!

Reply

Marsh Posté le 08-01-2008 à 12:46:22    


ok je crois que j'ai compris, j'essai ça tout de suite merci

Reply

Marsh Posté le 08-01-2008 à 12:48:47    

Une fois de plus, si les messages étaient clair dès le départ, ça éviterait de perdre du temps...
 
C'est si difficile que ça de rédiger une vraie demande, concrète, en expliquant en détail ce qu'on veut faire, pourquoi on veut le faire, les contraintes à respecter etc...
 
Je sais pas moi, quand on cherche de l'aide, la moindre des choses est de prendre l'initiative de donner des détails, et pas attendre les questions au compte goutte.


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 08-01-2008 à 12:50:51    

Dj YeLL a écrit :

Une fois de plus, si les messages étaient clair dès le départ, ça éviterait de perdre du temps...
 
C'est si difficile que ça de rédiger une vraie demande, concrète, en expliquant en détail ce qu'on veut faire, pourquoi on veut le faire, les contraintes à respecter etc...
 
Je sais pas moi, quand on cherche de l'aide, la moindre des choses est de prendre l'initiative de donner des détails, et pas attendre les questions au compte goutte.


désolé c'est pas évident d'expliquer quelque chose quand ca fait un moment qu'on planche dessus. En plus je commence tout juste en css et php donc encore 1000 excuses :whistle:

Reply

Marsh Posté le 08-01-2008 à 13:56:32    

J'ai fait comme tu m'as dit NazzTazz mais quand je modifie la taille du conteneur, les images ne vont pas à la colonne suivante. Voila mon code:
 
CSS:

Code :
  1. .TableauVignette
  2. {
  3. position:absolute;
  4. width:80%;
  5. height:80%;
  6. margin:0 0 0 200px;
  7. };
  8. .Vignette {
  9. position:relative;
  10. float:top:
  11. margin:0 200px 50px 0;
  12. padding-right:100px;
  13. }
  14. #TexteVignette
  15. {
  16. position:absolute;
  17. color: #FFFFFF;
  18. font-size: 16px ;
  19. font-family: "Arial, Helvetica";
  20. position:relative;
  21. display:inline;
  22. top:-34.5px;
  23. margin-left:20px;
  24. }


 
HTML:

Code :
  1. <div class="TableauVignette">
  2. <div class="Vignette">
  3.  <a href="Logements/Logements_Macon.php">
  4.   <img src="../../memo/images/Projets/Marches_Publics/Logements/Macon/Vignette_Macon.gif" alt="Macon" name="Macon" width="85" height="85" border="0">
  5.  </a>
  6.  <a id="TexteVignette" href="Logements/Logements_Macon.php">Macon</a>
  7. </div>
  8. <div class="Vignette">
  9.  <a href="Logements/Logements_Venarey.php">
  10.   <img src="../../memo/images/Projets/Marches_Publics/Logements/Venarey/Vignette_Venarey.gif" alt="Venarey" name="Venarey" width="85" height="85" border="0">
  11.  </a>
  12.  <a id="TexteVignette" href="Logements/Logements_Venarey.php">Venarey</a>
  13. </div>
  14. </div>


Pourquoi quand je met à 10% la hauteur du conteneur, les vignettes ne forment pas une nouvelle colonne?


Message édité par sandykoala le 08-01-2008 à 13:59:22
Reply

Marsh Posté le 08-01-2008 à 14:04:36    

honnetement, te fais pas chier , fait un tableau  
 
la , ca va etre vraiment long  
 
ensutie, tu t'achete un bon bouquin de CSS que tu lis , parcequ'il faut un minimum de bases pour commencer
 


---------------

Reply

Marsh Posté le 08-01-2008 à 14:15:14    

Vous voulez pas m'aider plutot? J'ai eplucher pas mal de site sur le css mais je sais pas tout faire donc j'aimerai que ceux qui savent faire m'aide (normal non?! on est la pour ca)
Mes questions de debutante sont peut-etre pas très interessante pour les experts, n'empeche que tout le monde à commencer comme moi et qu'un forum c'est fait pour aider
Donc merci à tout ceux qui vondront bien faire en sorte que je progresse  :jap:

Reply

Marsh Posté le 08-01-2008 à 14:28:11    

Le commencement, ça passe par l'apprentissage des bases. Enseigner les bases, c'est loin d'être l'objectif d'un forum, pour des raisons qui me paraissent assez évidentes. Commence par apprendre les bases sur l'un des nombreux sites qui traitent du sujet.


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 08-01-2008 à 14:59:16    

J'ai appris les bases sur les sites mais là, je ne comprend pas donc j'aimerai avoir une explication mais apparement c'est pas possible :non:  

Reply

Marsh Posté le 08-01-2008 à 15:18:55    

Je REREREpose la question :
 
Pourquoi tu n'utilises pas une table dans le cas présent ?!


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 08-01-2008 à 16:18:41    

Parce que (je l'ai deja dit) on m'as dit que les tableaux c'était trop lourd.
 
J'ai réussi à faire mes vignettes au plus simple, en créant une feuille de style avec une class par vignette que j'utilise pour toutes mes pages.
 :jap:

Reply

Marsh Posté le 08-01-2008 à 16:39:11    


sandykoala a écrit :

J'ai appris les bases sur les sites mais là, je ne comprend pas donc j'aimerai avoir une explication mais apparement c'est pas possible :non:  


non
tu ne sais pas ce qu'est un float, un relative, l'utilisation des marge ,des %
 
 
je te consielle le tres bon bouquin de raphael goetter qui te permettra de comprendre ca  


---------------

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed