Bonjour,

Afin de organiser mes dossiers contenant mon site, je souhaiterais mettre l'ensemble de mes feuilles de style .css dans un dossier nommé CSS.

Alors oui pour les y mettre pas de soucis, mais parcontre malgré de nombreuse recherche sur la toile, lorsque j'appelle ma feuille de style dans mon fichier index.php, rien n'y fait.

1ère méthode testée: <link rel="stylesheet" href="/css/bam_style.css" />

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="/css/bam_style.css" />
        <link rel="icon" type="image/png" href="images/picto_bam.png" />
        <style type="text/css" >
    #slideshow .ui-tabs-panel .info{
        display:none;
    }
    </style>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#slideshow").tabs({fx:{opacity: "toggle", duration: 'slow'}, {opacity: "toggle", duration: 'normal'}],
            show: function(event, ui){
                $('#slideshow .ui-tabs-panel .info').hide();
                var infoheight=$('.info', ui.panel).height();
                $('.info', ui.panel).css('height', '0px').animate({ 'height': infoheight }, 500);
            }
        }).tabs("rotate", 5000, true);
        $('#slideshow').hover(
            function(){ $('#slideshow').tabs('rotate', 0, true); },
            function(){ $('#slideshow').tabs('rotate', 5000, true); }
        );
        $('#slideshow .ui-tabs-panel a.hideshow').click(function(){
            if($(this).text()=='Hide'){
                $(this).parent('.info').animate({ 'height': '0px' }, 500);
                $(this).text('Show');
            }
            else{
                $(this).parent('.info').animate({ 'height': '70px' }, 500);
                $(this).text('Hide');
            }
            return false;
        });
    });
    </script>
        <title>BAM e-Sport</title>
    </head>
    <body>

2ème méthode testée: <link rel="stylesheet" href="../css/bam_style.css" />

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="../css/bam_style.css" />
...
...
    <body>

3ème méthode testée: <link rel="stylesheet" href="css/bam_style.css" />

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="css/bam_style.css" />
...
...
    <body>

J'ai mis volontairement l'ensemble de ma balise "head" dans le premier code, car je ne sais pas si cela vient d'un conflit ou autre.

Racine du dossier de la feuille php "index.php":
...wamp/www/Site BAM e-Sport

Racine du dossier de la feuille de style "bam_style.css":
...wamp/www/Site BAM e-Sport/css

De la même façon, lorsque que j'appelle mes includes dans ma feuille index.php, je suis contraint de les mettre mes feuilles de style dans le même dossier et non dans mon dossier "include".

Aussi, je me suis posé la question si mon "Link rel" était correctement écrit dans son ensemble (en dehors de mon appel de feuille css).

Vous remerciant par avance de vos réponses.

Cordialement

15 réponses


coloo
Réponse acceptée
<link rel="stylesheet" href="./css/bam_style.css" />

./ => le dossier où il y a le fichier index
../ => le dossier parent du dossier qui contient index
/ => a www/ du site

coloo
Réponse acceptée

Enlèves les espaces de ton dossier site bam sport. Remplaces les par des "-".

Pewel-OutOfNutella
Réponse acceptée

NE JAMAIS METTRE D'ESPACE DANS LES NOMS DE FICHIERS/DOSSIERS !

Je le mets en caps lock parce que c'est un truc important à retenir :)

BAM Jan0
Auteur
Réponse acceptée

@ tout le monde:

Alors oui il est vrai je suis un débutant en la matière, avec les erreurs qui vont avec ^^.

Concernant la nomination du dossier "Site BAM e-Sport", il est vrai que sur le coup, je ne pensais pas que la nomination du dossier parent poserait un soucis au niveau des espaces (l'ensemble de mes autres fichiers contiennent des "_" et sont sans accents).

Aussi, je suis entrain de tester une version contenant plus de php afin de pouvoir créer un module admin et pouvoir faire les maj de news plus facilement. Par ce fait j'ai fait un copier/coller du dossier "Site BAM e-Sport", en enlevant le superflu, mais en gardant le dossier "images" ainsi que les images qu'il contient. Du coup forcément, en appelant mes images dans mes feuilles .css, juste en précisant le dossier "images/", il n'arrivait pas à savoir quel dossier images car en doublont sur 2 dossiers parent. J'ai donc spécifié dans mes feuilles de style le chemin complet "/site_bam_esport/images/nom_image.css", et tout est rentrer dans l'ordre.

En remerciant toutes les personnes qui ont participer pour m'aider, je mets le sujet en résolu.

Peux-tu nous poster un screenshot de l'arborescence de tes dossiers ?

BAM Jan0
Auteur

Oui biensûr.

Chemin index.php

Chemin bam_style.css

Salut,

Que dis Firebug à propos de ton CSS ? Tu as une 404 ?

BAM Jan0
Auteur

@ Gearnode: Les autorisations oO ??? c'est à dire?

@ Ennicolem: Je n'utilise pas FIREBUG.
Mon site que se soit en localhost ou sur notre serveur, s'affiche correctement à partir du moment au mes pages css sont dans le même dossier que index.php, mais lorsque je place le css dans un dossier CSS, celui_ci n'est pas pris en compte.

BAM Jan0
Auteur

@ coloo: Après avoir essayer, aucun résultat. J'ai toujours ma page index.php qui ne charge pas mon bam_style.css situé dans mon dossier CSS.
J'ai même testé les 3 indications, mais sans résultats.

Ma racine www contenait un fichier index par défault que j'ai enlevé ainsi que les autres sites afin de n'avoir que mon index.php, et mon dossier css, mais pareil, toujours rien.

Quand une chose qui semble simple à la base devient un casse-tête!!! -_-"

N'y a t-il pas une possibilité que cela ne vienne pas du "link rel", mais du DOCTYPE et HEAD, avec un conflit, lié à l'ordre des lignes rédigées?

-_-", c'est vraiment pas banal d'avoir un probleme avec un link css :s

Il te faut inspecter ta page via firefox ou chrome :

tu vas sur ton lien et tu l'ouvre sur un autre onlget. Dis nous quel lien tu as et vois le probleme ^^

BAM Jan0
Auteur

@ ColoO:
Voilà le lien obtenue http://localhost/Site%20Bam%20e-Sport/css/bam\_style.css

En espérant que cela apporte un début de solution.
Donc pas de soucis avec le DOCTYPE et HEADER?

Bonjour,

Ce genre de règles font parti de la base quand on développe, il arrive généralement que l'on soit confronter à divers problèmes parce que nous respectons pas ces règles ou parce que nous voulons aller trop vite. Le développement web a certaine contrainte il ne faut jamais se contenter de son environnement mais toujours tester ce que l'on fait sur différent support (navigateur,version de php, version mysql etc).

Je pense qu'en appliquant la règle que ta dis @Pewel, ton problème de css va disparaître.

Cordialement

2ème règle : NE JAMAIS METTRE DE MAJUSCULES ET D'ACCENTS !!!

Et les conventions cakephp, elles sont bien avec des majuscules ^^. Faut pas être trop parano non plus. La casse peut compliquer la migration de ton serveur local si wamp car windows ne prends pas en compte la casse alors que les serveurs linux si =).

Le code est en majuscule mais les urls générées ne le sont jamais. j'aurai dû préciser un peu.