besoin d'aide css customisation index apache

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : besoin d'aide css customisation index apache

laquiche3

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 :

html {
background: #CCCCCC;
}
body {
width: 80%;
margin: 20px auto;
text-align: left;
border: 1px solid #666666;
background: #FFFFFF;
padding: 20px 5px 0;
font-family: "Perspective Sans", sans-serif;
}
#header {
text-align: center;
background: #CCCCCC
}
#foot {
text-align: center;
background: #CCCCCC
}
pre {
width: 80%;
margin: 10px auto 20px;
line-height: 20px;
font-family: "Perspective Sans", sans-serif;
}
pre a[href="?C=N;O=D"] {
display: 1;
}
pre a {
color: #000000
}
pre a:hover {
color: #000000;
text-decoration: none;
vertical-align: middle;
font-size: 12px;
}
pre img {
vertical-align: middle;
border: 0;
margin-right: 20px;
}

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

Publicité

AlphaZone

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

laquiche3

salut, merci de ta reponse
je n'y connait rien non plus en css, j'ai trouver celui la sur un site , 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

AlphaZone

Tu devrais créer un conteneur exemple
<div id="container"></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

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

laquiche3

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

AlphaZone

Attention, tes pages ne sont pas correcte.

Voici le code source HTML que j'ai relevé sur ton site :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Index of /</title>
</head>
<body>
<head>
<style>
@import url("/icones/apache.css" );
</style>
<link rel="stylesheet" type="text/css" href="unsaved:///icones/apache.css">
</head>
<p align="center"><img border="0" src="/icones/header.jpg"></p>
<p align="left"><embed src="file:*.mp3"></embed><!--webbot
bot="HTMLMarkup" endspan -->
</p>
<font color="#FFFFFF">
<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>
<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> -
<img src="/icones/dossier.png" alt="[DIR]" width="24" height="24"> <a href="fichiers/">fichiers/</a> -
<img src="/icones/mp3.png" alt="[SND]" width="24" height="24"> <a href="patrick%20hernandez_%20born%20to%20be%20alive.mp3">patrick hernandez..></a> 2.8M
<hr></pre>
</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 :

<html>
<head>
<style type="text/css">
<!--
@import url("ta_feuille_de_style.css" );
-->
</style>
</head>
<body>
<div id="#container">
</div>
</body>
</html>

Maintenant le code css :

Code :

html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
#container {
width: 700px;
margin-left: auto;
margin-right: auto;
background-color: #fff; /* Exemple de couleur */
}

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

laquiche3

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 :

html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
#container {
width: 700px;
margin-left: auto;
margin-right: auto;
border: 1px solid #666666;
background: #FFFFFF;
}
#header {
text-align: center;
background: #CCCCCC;
}
#foot {
text-align: center;
background: #CCCCCC;
}
pre {
width: 80%; height: auto;
margin: 10px auto 20px;
line-height: 20px;
font-family: "Perspective Sans", sans-serif;
}
pre a[href="?C=N;O=D"] {
display: 1;
}
pre a {
color: #000000;
}
pre a:hover {
color: #000000;
text-decoration: none;
vertical-align: middle;
font-size: 12px;
}
pre img {
vertical-align: middle;
border: 0;
margin-right: 20px;
}

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

AlphaZone

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

laquiche3

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 :

html {
padding: 0;
background-color: #CCCCCC;
margin: 0;
}
body {
text-align: left;
background-color: #CCCCCC;
vertical-align: middle;
}
#header {
text-align: center;
background-color: #FFFFFF;
}
#foot {
text-align: center;
background-color: #FFFFFF;
}
pre {
width: 80%;
margin: 20px auto 20px;
font-family: "Perspective Sans", sans-serif;
font-size: 12px;
background-color: #FFFFFF;
border: 1px solid #666;
}
pre a[href="?C=N;O=D"] {
display: 1;
font-size: 12px;
background-color: #FFFFFF;
}
pre a {
color: #000000;
font-size: 12px;
text-decoration: none;
background-color: #FFFFFF;
}
pre a:hover {
color: black;
text-decoration: none;
font-size: 12px;
}
pre img {
vertical-align: middle;
border: 0
margin-right: 20px;
font-size: 12px;
}

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

AlphaZone

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 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Index of /</title>
</head>
<body>
<div style="float: top; z-index: 65000;">
<table colpadding="0" cellspacing="0" style="height: 70px; width: 100%; background-color: #D4D0C8; border-style: solid; border-width: 1px; border-color: #000000;">
<tr>
<td style="width: 50%; height: 70px; border-width: 0px; background-color: #D4D0C8;">
<div align="center">
<a target="_blank" href="http://www.keoconcept.com"><img src="http://00keoconcept.keogratuit.com/banniere/banniere.png" border="0"></a>
</div>
</td>
<td style="width: 50%; border-width: 0px; background-color: #D4D0C8;">
<div align="center">
<a href="https://www.assentek.com/catalog/" target="_blank"><img border="0" src="http://00assentek.keogratuit.com/assentek.gif"></a>
</div>
</td>
</tr>
<tr style="background-color: #000000; text-align: center; height: 20px;">
<td style="border-width: 0px; background-color: #000000;">
<div align="center">
<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é ?</a></font>
</td>
<td style="text-align: center; border-width: 0px; background-color: #000000;"><font color="#ffffff" size="2">Hébergé GRATUITEMENT par <a target="_blank" href="http://www.keohosting.net"><font color="#ffffff">http://www.keohosting.net</font></a></font>
</td>
</tr>
</table>
</div>
<br />
<head>
<link rel="stylesheet" type="text/css" href="/icones/apache.css">
</head>
<body>
<div id="#container">
<p align="center">
<img border="0" src="icones/header.jpg" width="760" height="110">
</div>
</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> -
<img src="/icones/dossier.png" alt="[DIR]" width="24" height="24"> <a href="fichiers/">fichiers/</a> -
<img src="/icones/mp3.png" alt="[SND]" width="24" height="24"> <a href="patrick%20hernandez_%20born%20to%20be%20alive.mp3">patrick hernandez..></a> 2.8M
<hr></pre>
</body></html>

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

Publicité

laquiche3

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

AlphaZone

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 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Index of /</title>
<style type="text/css">
<!--
html {
padding: 0;
margin: 0;
}
body {
background-color: #ccc;
margin: 0;
padding: 0;
font-family: verdana;
font-size: 12px;
}
#container {
width: 760px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #fff;
border: 1px solid #999;
}
#container #banner {
background-color: #fff;
background-image: url("http://laquiche.keogratuit.com/icones/header.jpg" );
background-repeat: no-repeat;
packground-position: top left;
width: 760px;
height: 110px;
border: 0;
padding: 0;
}
#container #main {
margin-top: 10px;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding: 6px;
}
#container #main img {
margin: 0;
padding: 0;
}
#container #main a {
color: #00f;
text-decoration: underline;
}
#container #main a:hover {
color: #000;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="banner"></div>
<div id="main">
<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 />
<img src="http://laquiche.keogratuit.com/icones/dossier.png" alt="[DIR]" width="24" height="24"> <a href="fichiers/">fichiers/</a> - <br />
<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..></a> 2.8M
</div>
</div>
</body>
</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

laquiche3

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+

AlphaZone

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 !!

mIRROR

Chevreuillobolchévik

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

laquiche3

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
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+

laquiche3

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

mIRROR

Chevreuillobolchévik

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)

laquiche3

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

AlphaZone

Effectivement j'avais pas fait attention à ce genre de détail.

Je ferais des tests un peu plus tard.

FORUM HardWare.fr

Programmation

HTML/CSS

besoin d'aide css customisation index apache

Sujets relatifs
eleve mp besoin d'aide pour convertir camel >>> pascal	Besoin d'une idée pour automatiser une construction de requête
Aide pour une requête!	[abandonné] Aide pour passer au php!
aide pour image php	Besoin d'aide pour une AP en programation événementiel [résolut]
aide php	Compteur de clic à l'aide d'un onclick :-)
Plus de sujets relatifs à : besoin d'aide css customisation index apache

Page générée en 0.145 secondes