2013-06-18 5 views
-1

J'utilise Xampp pour tester mes scripts perl cgi. Quand j'ouvre le script cgi, le CSS ne semble pas s'appliquer à la page. J'ai essayé exactement le même code dans un fichier html et cela fonctionne très bien, ce qui suggère que le code HTML est lié à l'endroit correct pour trouver le CSS.css n'est pas appliqué dans le script perl cgi

$self->{content}=<<HTML; 
<!DOCTYPE html> 
<html> 
<head> 
<title>$title</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- Bootstrap --> 
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<link href="../css/additional.css" rel="stylesheet" media="screen"> 
<script src="http://code.jquery.com/jquery.js"></script> 
<script src="../js/bootstrap.min.js"></script> 
</head> 

<body> 
<div class="navbar"> 
    <div class="navbar-inner"> 
     <a class="brand" >Bridge : $env </a> 
     <ul class="nav"> 
      <li><a href="#"><i class="icon-upload"></i>upload</a></li> 
      <li><a href="#"><i class="icon-search"></i>Search</a></li> 
      <li><a href="#"><i class="icon-cog"></i>Admin</a></li> 

     </ul> 
    </div> 
</div> 
<div class="container"> 
    ... 
    </div> 
</body> 
</html> 
HTML 
+0

Quel est le chemin d'accès au script CGI? Quel chemin avez-vous testé? (Pas le chemin physique du système de fichiers, mais le chemin dans le navigateur, s'il vous plaît). Êtes-vous sûr de ne pas vouloir utiliser des chemins absolus pour lier des ressources? – amon

+2

Le code source du Perl n'a pas d'importance. Ce qui compte, c'est le HTML généré. Vérifiez l'onglet net des outils de développement de votre navigateur. Le navigateur tente-t-il de charger la feuille de style? L'URL est-elle en train de charger celle que vous attendez? Obtenez-vous une réponse '200 OK' du serveur pour la feuille de style? – Quentin

+0

@amon Je pensais que l'utilisation de chemins exacts était une mauvaise pratique. le chemin du navigateur semble être correct c'est "localhost/xampp/cgi-bin/web/css/bootstrap.min.css et c'est le chemin correct où le fichier est à – jhaughey

Répondre

5

localhost/xampp/cgi-bin/web/css/bootstrap.min.css

Votre serveur web est probablement configuré pour traiter tout cgi-bin comme un exécutable.

CSS n'est pas un langage de programmation que le serveur peut interpréter. Il est donc probable qu'il offre une erreur 500 lorsque vous essayez de le charger. Ne pas conserver les ressources statiques dans cgi-bin

+0

oh d'accord. pour votre aide :) – jhaughey

+0

Dans mon cas, j'ai dû retirer complètement les ressources statiques de 'cgi-bin' et j'ai choisi de les mettre dans'/var/www/html/web/css'. –

-1

Peut-être qu'il serait possible de tester avec connexion http: Quelque chose comme: <link rel="stylesheet" href="http://192.168.0.32/bootstrap/css/bootstrap.min.css" media="screen"> Voici mon script (très très sale):

#!/usr/bin/perl 

use CGI qw(:standard); 
print header; 
print_hdetails(); 
print"<body data-spy=\"scroll\" data-target=\"\.bs-docs-sidebar\">\n"; 
print_navbar(); 
print_headerofpage(); 
print_mysidebar(); 
print_mybodycontent(); 
print end_html; 

sub print_hdetails{ 
print <<FORMULE; 
    <!DOCTYPE html>  
    <html> 
    <head> 
    <base href="http://192.168.0.32/cgi-bin/"><!--[if lte IE 6]></base><![endif]--> 
    <title>bootstrapstyle page</title> 

    <meta charset="utf-8"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <!-- for Bootstrap --> 
    <script type="text/javascript" src="http://192.168.0.32/bootstrap/jquery/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript" src="http://192.168.0.32/bootstrap/js/bootstrap.min.js"></script> 
    <link href="http://192.168.0.32/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <!--link href="http://192.168.0.32/silverstripe/themes/bootstrap/css/myadded.css" rel="stylesheet" media="screen"-->  
    <!--link rel="shortcut icon" href="http://192.168.0.32/silverstripe/themes/bootstrap/images/favicon.ico" /-->  
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <!--link rel="stylesheet" type="text/css" href="themes/bootstrap/css/form.css?m=1373645318" /--> 
    </head> 

FORMULE 

    }  
sub print_headerofpage { 
    print <<CONTENT; 
    <header class="jumbotron subhead" id="overview"> 
    <div class="container">  
    <p>&nbsp;&nbsp;&nbsp;&nbsp; 
    <h2>bonjour!</h2><br> 
    </p> 
    </div> 
    </header> 
CONTENT 

} 
sub print_mysidebar{ 
    print <<MYSIDEBAR; 
    <div class="container"> 
    <div class="row-fluid"> 
    <div class="span2"> 
    <h6>Sidebar content</h6> 
    <p> 
    class=span2 
    </p> 
    <ul class="nav nav-list bs-docs-sidenav"> 
    <li><a href="#components"><i class="icon-chevron-right"></i> 1. Choose components</a></li> 
    <li><a href="#plugins"><i class="icon-chevron-right"></i> 2. Select jQuery plugins</a></li> 
    <li><a href="#variables"><i class="icon-chevron-right"></i> 3. Customize variables</a></li> 
    <li><a href="#download"><i class="icon-chevron-right"></i> 4. Download</a></li> 
    </ul> 
    </div> 
MYSIDEBAR 

} 
sub print_mybodycontent{ 
    print <<MYBODYCONTENT; 
     <div class="span10">  
     <h1>Hello, world! </h1> 
     <p> 
     ici c'est le body content class=span10 
     </p> 
     <p> 
     <h4>Le sourire, il fait plaisir a ceux qui vous aiment. Il emmerde ceux qui vous detestent. </h4> 
     </p>   
     </div>  
MYBODYCONTENT 

} 

sub print_navbar { 
    print <<LANAVBAR; 
<div class="navbar navbar-inverse navbar-fixed-top"> 
<div class="navbar-inner"> 
<div class="container"> 
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="brand" href="./index.html">Bootstrap</a> 
<div class="nav-collapse collapse"> 
<ul class="nav"> 
<li class=""> 
<a href="./index.html">Home</a> 
</li> 
<li class=""> 
<a href="./getting-started.html">Get started</a> 
</li> 
<li class=""> 
<a href="./scaffolding.html">Scaffolding</a> 
</li> 
<li class=""> 
<a href="./base-css.html">Base CSS</a> 
</li> 
<li class=""> 
<a href="./components.html">Components</a> 
</li> 
<li class=""> 
<a href="./javascript.html">JavaScript</a> 
</li> 
<li class="active"> 
<a href="./customize.html">Customize</a> 
</li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
LANAVBAR 

} 

ça marche pour moi.