besoin d'aide css customisation index apache

besoin d'aide css customisation index apache - HTML/CSS - Programmation

Marsh Posté le 18-06-2006 à 21:06:19    

Bonjours,  
Je suis en train de crée une interface amelioré de l'index d'apache (celui qui liste les fichiers d'un dossiers lorsqu'il n'y a pas de fichier index.html par exemple), et il est possible en mettant en lien dans le header (partie haute de la page ecrite en html) de mettre un CSS pour toute la page.
J'ai donc crée ce css qui fonctionne a merveille sous firefox mais qui ne passe pas sous IE.
voila mon CSS

Code :
  1. html {
  2. background: #CCCCCC;
  3. }
  5. body {
  6. width: 80%;
  7. margin: 20px auto;
  8. text-align: left;
  9. border: 1px solid #666666;
  10. background: #FFFFFF;
  11. padding: 20px 5px 0;
  12. font-family: "Perspective Sans", sans-serif;
  13. }
  15. #header {
  16. text-align: center;
  17. background: #CCCCCC
  18. }
  20. #foot {
  21. text-align: center;
  22. background: #CCCCCC
  23. }
  26. pre {
  27. width: 80%;
  28. margin: 10px auto 20px;
  29. line-height: 20px;
  30. font-family: "Perspective Sans", sans-serif;
  31. }
  33. pre a[href="?C=N;O=D"] {
  34. display: 1;
  35. }
  37. pre a {
  38. color: #000000
  39. }
  41. pre a:hover {
  42. color: #000000;
  43. text-decoration: none;
  44. vertical-align: middle;
  45. font-size: 12px;
  46. }
  48. pre img {
  49. vertical-align: middle;
  50. border: 0;
  51. margin-right: 20px;
  52. }


 
pour voir le resultat que ca doit affiché allez ici http://laquiche.keogratuit.com avec firefox et regarder le aussi sous IE pour comprendre exactement le probleme.
voila j'espere que vous pourrez m'aider car je galere beaucoup en CSS
merci d'avance

Reply

Marsh Posté le 18-06-2006 à 21:06:19   

Reply

Marsh Posté le 19-06-2006 à 23:25:55    

J'veux pas trop m'avancer la dessus car je ne m'y connais pas trop mais d'une part je ne resizerais pas le body. Je crérais une balise div que je nommerais conteneur ou autre. Je pense que ca devrais résoudre un problème.
 
A toi de tester et de voir le résultat ;)

Reply

Marsh Posté le 20-06-2006 à 15:20:01    

salut, merci de ta reponse
je n'y connait rien non plus en css, j'ai trouver celui la sur un site :D, mais en fait le body est resizé pour l'avoir centré sur l'ecran, dans le cadre blanc. sinon il resteré a fond a gauche et c'est pas trop ce que je veux.
je vais encore essayer de bricoler, si vous trouvez le probleme, n'hesitez pas a me corriger, je suis la pour apprendre.
merci

Reply

Marsh Posté le 21-06-2006 à 07:27:45    

Tu devrais créer un conteneur exemple  
<div id="container"><!-- Ton code --></div>
 
et le style CSS donnerait ceci:
#container {
   width: 700px;
   margin-left: auto;
   margin-right: auto;
}
 
Mets les marges de ton body a 0 et tu verras le conteneur qui va se centrer sur la page avec une dimension de 700 px ou autre. Attention, la largueur (width) est obligatoire.
 
Cette version est 100% compatible FF et IE. Je l'ai testé par mes soins :D


Message édité par AlphaZone le 21-06-2006 à 07:28:56
Reply

Marsh Posté le 21-06-2006 à 14:12:51    

salut
bon je vient d'essayer de l'integré au CSS mais ca donne pas du tout ce que je veux, car o final la page est toute grise et le cadre blanc au centre a disparu.
Pourrait tu integré le container a mon code de CSS car le pense que je ne le met pas comme il faut.
je suis desolé mais en CSS je galere vraiment.
merci d'avance

Reply

Marsh Posté le 23-06-2006 à 07:32:07    

Attention, tes pages ne sont pas correcte.
 
Voici le code source HTML que j'ai relevé sur ton site :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
  2. <html>
  3. <head>
  4.   <title>Index of /</title>
  5. </head>
  6. <body>
  9. <head>
  10. <style>
  11. @import url("/icones/apache.css" );
  12. </style>
  13. <link rel="stylesheet" type="text/css" href="unsaved:///icones/apache.css">
  15. </head>
  17. <p align="center"><img border="0" src="/icones/header.jpg"></p>
  18. <p align="left"><!--webbot bot="HTMLMarkup" startspan --><embed src="file:*.mp3"></embed><!--webbot
  19. bot="HTMLMarkup" endspan -->
  20. </p>
  21. <font color="#FFFFFF">
  22. <script type="text/javascript">if (window!=window.top){top.document.location=document.location;}google_ad_client = "pub-9308770625017089";google_alternate_ad_url = "http://00assentek.keogratuit.com/assentek.gif";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as";google_ad_type = "text_image";google_ad_channel ="";</script><div id="keo_ads"><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div></font><script type="text/javascript" src="http://www4.keohosting.net/check_visibility.js"></script>
  23. <pre><img src="/icones/rien.png" alt="Icon " width="24" height="24"> <a href="?C=N;O=D">Name</a>                 <a href="?C=S;O=A">Size</a>  <a href="?C=D;O=A">Description</a><hr><img src="/icones/dossier.png" alt="[DIR]" width="24" height="24"> <a href="Musique/">Musique/</a>               - 
  25. <img src="/icones/dossier.png" alt="[DIR]" width="24" height="24"> <a href="fichiers/">fichiers/</a>              - 
  26. <img src="/icones/mp3.png" alt="[SND]" width="24" height="24"> <a href="patrick%20hernandez_%20born%20to%20be%20alive.mp3">patrick hernandez..&gt;</a> 2.8M 
  27. <hr></pre>
  28. </body></html>


 
Dedans j'y ai remarqué 2 balises <head> et une balise <body> mal placée. Et j'ai également noté la déclaration de 2 feuilles de style identique. Mets en qu'une.
 
Pour le container ca donne ceci :
 
Code html:

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. <!--
  5. @import url("ta_feuille_de_style.css" );
  6. -->
  7. </style>
  8. </head>
  10. <body>
  11. <div id="#container">
  12. <!-- Tes données -->
  13. </div>
  14. </body>
  15. </html>


 
Maintenant le code css :

Code :
  1. html {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. body {
  7.   margin: 0;
  8.   padding: 0;
  9.   background-color: #ccc;
  10. }
  12. #container {
  13.   width: 700px;
  14.   margin-left: auto;
  15.   margin-right: auto;
  16.   background-color: #fff; /* Exemple de couleur */
  17. }


 
Voila j'espère t'avoir suffisament aidé. Sinon n'hésite pas à poser tes questions.


Message édité par AlphaZone le 23-06-2006 à 07:35:10
Reply

Marsh Posté le 23-06-2006 à 23:44:57    

salut, encore merci de m'aider c'est super simpa
bon j'ai refait le header avec jsute le code que tu m'a donné et en mettant le lien vers ma css, donc a priori plus de probleme de se coté la.
 
pour le fichier css je l'ai modifié, voila la nouvelle version

Code :
  1. html {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. body {
  6. margin: 0;
  7. padding: 0;
  8. background-color: #ccc;
  9. }
  10. #container {
  11. width: 700px;
  12. margin-left: auto;
  13. margin-right: auto;
  14. border: 1px solid #666666;
  15. background: #FFFFFF;
  16. }
  18. #header {
  19. text-align: center;
  20. background: #CCCCCC;
  21. }
  23. #foot {
  24. text-align: center;
  25. background: #CCCCCC;
  26. }
  29. pre {
  30. width: 80%; height: auto;
  31. margin: 10px auto 20px;
  32. line-height: 20px;
  33. font-family: "Perspective Sans", sans-serif;
  34. }
  36. pre a[href="?C=N;O=D"] {
  37. display: 1;
  38. }
  40. pre a {
  41. color: #000000;
  42. }
  44. pre a:hover {
  45. color: #000000;
  46. text-decoration: none;
  47. vertical-align: middle;
  48. font-size: 12px;
  49. }
  51. pre img {
  52. vertical-align: middle;
  53. border: 0;
  54. margin-right: 20px;
  55. }


il me parait plutot bien, mais je n'est plus le cadre gris autour, toute la page est blanche, j'ai beau cherché d'ou provient le probleme je ne trouve pas.
si tu vois une erreur, dit le moi.
j'espere que tu pourra m'aider encore un peu
merci beaucoup

Reply

Marsh Posté le 24-06-2006 à 23:28:08    

Attention à ta feuille de style. Pour être "correcte" il ne faut pas mettre juste background mais "background-color".
 
Sinon pour en revenir a ton cadre (plutot ton fond ?), normalement le simple fait de mettre background-color dans body permet de changer la couleur de fond.
 
Il faudrait que me montre le code source de ta page car quand je regarde le code HTML, il y a toujour des imperfections. J'ai remarqué des balises head dans la balise body.


Message édité par AlphaZone le 24-06-2006 à 23:32:28
Reply

Marsh Posté le 25-06-2006 à 12:45:56    

salut
bon j'ai donc essayer de modifier le font pour qu'il soit gris, tout en gardant un cadre blanc au centre, mais j'y suis pas arriver, j'ai donc epluché le web pour arriver a finir mon css.
 
apres des centaines d'essai, je me suis apercu que le #container ne servait a rien puisque le listage des fichiers ne se met pas dedant.
j'ai bidouiller plein de truc et je suis arriver a un truc plutot pas mal, il reste bcp de modification a faire, mais ca commence a prendre forme
http://laquiche.keogratuit.com
il me reste un probleme que je n'arrive pas a resoudre, centré le cadre blanc sur la page. Ce centrage se fait tout seul sur firefox mais pas sous IE, il doit donc falloir modifier des marges, mais je n'arrive pas a trouver comment faire, tous mes essais ont echoués
 
voila le code du CSS

Code :
  1. html {
  2. padding: 0;
  3. background-color: #CCCCCC;
  4. margin: 0;
  5. }
  6. body {
  7. text-align: left;
  8. background-color: #CCCCCC;
  9. vertical-align: middle;
  10. }
  12. #header {
  13. text-align: center;
  14. background-color: #FFFFFF;
  15. }
  16. #foot {
  17. text-align: center;
  18. background-color: #FFFFFF;
  19. }
  21. pre {
  22. width: 80%;
  23. margin: 20px auto 20px;
  24. font-family: "Perspective Sans", sans-serif;
  25. font-size: 12px;
  26. background-color: #FFFFFF;
  27. border: 1px solid #666;
  29. }
  31. pre a[href="?C=N;O=D"] {
  32. display: 1;
  33. font-size: 12px;
  34. background-color: #FFFFFF;
  35. }
  37. pre a {
  38. color: #000000;
  39. font-size: 12px;
  40. text-decoration: none;
  41. background-color: #FFFFFF;
  42. }
  44. pre a:hover {
  45. color: black;
  46. text-decoration: none;
  47. font-size: 12px;
  48. }
  50. pre img {
  51. vertical-align: middle;
  52. border: 0
  53. margin-right: 20px;
  54. font-size: 12px;
  55. }


Le cadre blanc est denomé "pre" d'apres mes essais.
j'espere que tu voi ce que je veux dire
merci de toute ton aide

Reply

Marsh Posté le 25-06-2006 à 13:59:18    

Je vais me répéter mais le code source de ta page est fausse.
 
Je te laisse l'examiner de plus près :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
  2. <html>
  3. <head>
  4.   <title>Index of /</title>
  5. </head>
  6. <body>
  7. <div style="float: top; z-index: 65000;">
  9. <table colpadding="0" cellspacing="0" style="height: 70px; width: 100%; background-color: #D4D0C8; border-style: solid; border-width: 1px; border-color: #000000;">
  12. <tr>
  14. <td style="width: 50%; height: 70px; border-width: 0px; background-color: #D4D0C8;">
  15. <div align="center">
  16. <a target="_blank" href="http://www.keoconcept.com"><img src="http://00keoconcept.keogratuit.com/banniere/banniere.png" border="0"></a>
  17. </div>
  18. </td>
  20. <td style="width: 50%; border-width: 0px; background-color: #D4D0C8;">
  21. <div align="center">
  22. <a href="https://www.assentek.com/catalog/" target="_blank"><img border="0" src="http://00assentek.keogratuit.com/assentek.gif"></a>
  23. </div>
  24. </td>
  28. </tr>
  30. <tr style="background-color: #000000; text-align: center; height: 20px;">
  31. <td style="border-width: 0px; background-color: #000000;">
  32. <div align="center">
  33. <a target="_blank" href="http://00keoconcept.keogratuit.com/joomla/component/option,com_simplefaq/task,display/Itemid,34/catid,6/page,1/#FAQ1"><font color="#ffffff" size="2">Comment faire disparaitre cette publicit&eacute; ?</a></font>
  34. </td>
  35. <td style="text-align: center; border-width: 0px; background-color: #000000;"><font color="#ffffff" size="2">H&eacute;berg&eacute; GRATUITEMENT par <a target="_blank" href="http://www.keohosting.net"><font color="#ffffff">http://www.keohosting.net</font></a></font>
  36. </td>
  37. </tr>
  40. </table>
  41. </div>
  42. <br />
  45. <head>
  46. <link rel="stylesheet" type="text/css" href="/icones/apache.css">
  47. </head>
  49. <body>
  50. <div id="#container">
  51. <p align="center">
  52. <!-- Tes données --><img border="0" src="icones/header.jpg" width="760" height="110">
  53. </div>
  54. </body><pre><img src="/icones/rien.png" alt="Icon " width="24" height="24"> <a href="?C=N;O=D">Name</a>                 <a href="?C=S;O=A">Size</a>  <a href="?C=D;O=A">Description</a><hr><img src="/icones/dossier.png" alt="[DIR]" width="24" height="24"> <a href="Musique/">Musique/</a>               - 
  56. <img src="/icones/dossier.png" alt="[DIR]" width="24" height="24"> <a href="fichiers/">fichiers/</a>              - 
  57. <img src="/icones/mp3.png" alt="[SND]" width="24" height="24"> <a href="patrick%20hernandez_%20born%20to%20be%20alive.mp3">patrick hernandez..&gt;</a> 2.8M 
  58. <hr></pre>
  59. </body></html>


 
 
Je vais la corriger et te montrer que le container n'est pas inutile ;)

Reply

Marsh Posté le 25-06-2006 à 13:59:18   

Reply

Marsh Posté le 25-06-2006 à 14:09:11    

hum, pourquoi c'est faux, je vois pas l'erreur.
sinon pour le container, il est peut etre utile mais je ne doit pas le configurer comme il faut je pense.
 
bon j'attend ta correction, je comprendrais sans doute mieux.
et encore une fois merci de ton aide

Reply

Marsh Posté le 25-06-2006 à 14:23:07    

J'ai fais une page test que tu peux aller voir à cette adresse : http://djay18100.free.fr/laquich/
 
100% Conforme à la norme W3C, vérifié sous FF avec TIDY
 
Et voici le code source :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.  <title>Index of /</title>
  6.  <style type="text/css">
  7.  <!--
  8.  html {
  9.   padding: 0;
  10.   margin: 0;
  11.  }
  13.  body {
  14.   background-color: #ccc;
  15.   margin: 0;
  16.   padding: 0;
  17.   font-family: verdana;
  18.   font-size: 12px;
  19.  }
  21.  #container {
  22.   width: 760px;
  23.   margin-top: 10px;
  24.   margin-left: auto;
  25.   margin-right: auto;
  26.   padding: 0;
  27.   background-color: #fff;
  28.   border: 1px solid #999;
  29.  }
  31.  #container #banner {
  32.   background-color: #fff;
  33.   background-image: url("http://laquiche.keogratuit.com/icones/header.jpg" );
  34.   background-repeat: no-repeat;
  35.   packground-position: top left;
  36.   width: 760px;
  37.   height: 110px;
  38.   border: 0;
  39.   padding: 0;
  40.  }
  42.  #container #main {
  43.   margin-top: 10px;
  44.   margin-left: 0;
  45.   margin-right: 0;
  46.   margin-bottom: 0;
  47.   padding: 6px;
  48.  }
  50.  #container #main img {
  51.   margin: 0;
  52.   padding: 0;
  53.  }
  55.  #container #main a {
  56.   color: #00f;
  57.   text-decoration: underline;
  58.  }
  60.  #container #main a:hover {
  61.   color: #000;
  62.   text-decoration: none;
  63.  }
  64.  -->
  65.  </style>
  66. </head>
  67. <body>
  68.  <div id="container">
  69.   <div id="banner"></div>
  70.   <div id="main">
  71.    <img src="http://laquiche.keogratuit.com/icones/rien.png" alt="Icon " width="24" height="24"> <a href="?C=N;O=D">Name</a> <a href="?C=S;O=A">Size</a>  <a href="?C=D;O=A">Description</a><hr><img src="/icones/dossier.png" alt="[DIR]" width="24" height="24"> <a href="Musique/">Musique/</a>               -   <br />
  72.    <img src="http://laquiche.keogratuit.com/icones/dossier.png" alt="[DIR]" width="24" height="24"> <a href="fichiers/">fichiers/</a>              -   <br />
  73.    <img src="http://laquiche.keogratuit.com/icones/mp3.png" alt="[SND]" width="24" height="24"> <a href="patrick%20hernandez_%20born%20to%20be%20alive.mp3">patrick hernandez..&gt;</a> 2.8M
  74.   </div>
  75.  </div>
  76. </body>
  77. </html>


 
 
 
PS : En réponse à mon message précédent, l'erreur se trouve à la ligne 6 et 49


Message édité par AlphaZone le 25-06-2006 à 14:25:19
Reply

Marsh Posté le 25-06-2006 à 15:41:56    

Re, t'a fait un pire truc et ca a de la geule on peut le dire.
bon par contre, impossible de le reprendre pour moi, ca me fait un truc tout gris (couleur du fond) avec l'index des fichiers dessu, sans l'image et sans le cadre blanc.
pourrait tu donc me passé le fichier header que tu a fait (car si je le telecharge, il est modifié pas le serveur), et d'apres ce que j'ai vu tu a integrer le css directement dans le html, donc plus besoin du fichier css
 
dsl d'etre si embettant, c'est la premiere fois que je fait du css, et j'ai un peu beaucoup de mal.
encore merci a+

Reply

Marsh Posté le 25-06-2006 à 16:41:16    

Je t'ai fais un .rar qui contient le fichier index.html : http://djay18100.free.fr/laquich/index.rar
 
Attention aux liens vers les images, j'ai mis le chemin complet car je ne voulais pas stocker les images sur mon hébergement (trop la flème). En revanche toi tu peux mettre tout simplement le chemin relatif (exemple : "image/mp3.png" au lieu de "http://www.mon_site.com/image/mp3.png" ).
 
Et pour la petite précision, tu n'es pas embettant. C'est normale de pas savoir au début. Ca viendras avec le temps et l'expérience. Personnelement je suis bien loin de maitriser le CSS.  
 
Au passage si tu veux un site de référence : http://www.csszengarden.com ;) C'est vraiment puissant le CSS !!

Reply

Marsh Posté le 25-06-2006 à 17:21:51    

salut !

 

je suis ce topic de loin depuis un petit moment parce que je n avais encore jamais essayé de personnaliser l index
je suis tombé sur ce tuto bien interressant Personnalisation de l'index d'apache
et ca me laisse supposer que tu as oublié un truc dans ton httpd.conf

  
Citation :

 

IndexOptions FancyIndexing SuppressHTMLPreamble

 

apres je me plante peut etre mais voir deux fois un head ca m etonne

Reply

Marsh Posté le 25-06-2006 à 18:37:51    

reponse a AlphaZone. Bon j'ai comprit le probleme, c'est que tu t'es servi de la page index enregistrer sur mon site et ensuite tu l'a modifié et defini les icones et les liens comme etant dans le container.
Mais le probleme c'est que je veut que ca soit une page généré automatiquement, comme l'index d'apache a l'origine et donc je ne peut pas definir l'index fait par apache comme etant le container.
Parce que la je suis capable de faire la premiere page avec la chansson qui aparait et le dossier au dessu,avec l'aparence que tu a faite, par contre si tu clique sur le dossier, la page généré par apache ne prend plus en compte le code css.
comprend tu ce que je veut dire ?
c'est pour ca que je bug :D
bon je vais continuer a chercher, si tu arrive a faire foncionner ce container, ne m'oubli pas ;)
merci
reponde a mirror : je fait la personnalisation de l'index d'apache a partir d'un htaccess car le fichier httpd.conf est le fichier de configuration du serveur apache et il est accessible qu'au admin, donc on ne paut pas passé par se fichier pour modifier les icones et le look en general.
voila a+

Reply

Marsh Posté le 25-06-2006 à 18:40:43    

alphazone, si tu veut faire des test sur ton serveur, il suffit juste que tu prenne le dossier icones qui se trouve dans le dossier fichier, tu le renome "icones", ensuite tu prend le fichier hh.htaccess, et tu le renome .htaccess, et apres tu fait une page web apelé header.html dans laquelle tu met ton code css et ca marche je l'avé prevu pour pouvoir le donner a des gens assez facilement

Reply

Marsh Posté le 25-06-2006 à 18:59:08    

la par contre je suis pas sur du tout
mais tu peux normalement rajouter la ligne que je t ai donnée dans ton htaccess
parce qu ensuite c est le meme procédé (header.html)

Reply

Marsh Posté le 25-06-2006 à 19:07:41    

alors en effet ont peut le rajouter dans le htaccess
pour ce qui est de l'acces au httpd.conf par contre la c'est sur c'est que les admin qui peuvent le modifier ( sinon c'est tro dangereux)
pour ce qui est de ton truc, je vient de le rajouter a mon htaccess
merci de cette petite astuce ;)

Reply

Marsh Posté le 26-06-2006 à 08:55:20    

Effectivement j'avais pas fait attention à ce genre de détail.
 
Je ferais des tests un peu plus tard.

Reply

Sujets relatifs:

Leave a Replay

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