Impossible de mettre mes .css dans un dossier CSS

Par BAM Jan0, il y a 12 ans

Les bases HTML/CSS

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

Adel, il y a 12 ans

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

BAM Jan0, il y a 12 ans

Oui biensûr.

Chemin index.php

Chemin bam_style.css

Nicolas Lemoine, il y a 12 ans

Salut,

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

BAM Jan0, il y a 12 ans

@ 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.

coloo, il y a 12 ans 
<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

BAM Jan0, il y a 12 ans

@ 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?

coloo, il y a 12 ans

-_-", 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 ^^

Bahamut45, il y a 12 ans

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

coloo, il y a 12 ans

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

Pewel-OutOfNutella, il y a 12 ans

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 :)

Maenhyr, il y a 12 ans

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

coloo, il y a 12 ans

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 =).

Maenhyr, il y a 12 ans

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

BAM Jan0, il y a 12 ans

@ 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.