Les CSS ne se chargent pas correctement dans jsp, tomcat servlet

Les CSS ne se chargent pas correctement dans jsp, tomcat servlet

Connexion.css

body {
font-family: "Trebuchet MS", Tahoma, Arial, Geneva, sans-serif, Helvetica, sans-serif;
font-size: 13px;
background: url(../images/bg.png) 0 64px repeat-x;
margin: 0;
}
.wrapper {
xmargin: 0 auto;
}
#border-top.h_green {
background: url(../images/j_header_middle.png) repeat-x;
height: 84px;
xmargin: 0 auto;
}
#contentbox {
width: 755px;
margin: 0 auto;
xbackground: #efefef;
padding: 0px;
position: relative;
}
#header-top {
width: 960px;
margin: 0 auto;
xbackground: #efefef;
padding: 0px;
position: relative;
}
#menuheader {
position: relative;
}
#contentbox p {
padding: 0 0 10px 0;
}
#menubox {
background: #fff;
padding: 3px 10px;
border-left: 1px solid #cccecc;
border-right: 1px solid #cccecc;
height: 15px;
}
#user_name {
position: absolute;
right: 0px;
top: 0px;
xbackground: url(../../../images/icons/user.png) no-repeat scroll 0 2px
transparent;
padding-left: 20px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
.loginwrapper {
width: 755px;
margin: 0 auto;
}
.btn{ 
background:url(../images/btn.jpg) repeat-x;
height:28px;
border:none;
color:#fff;
margin-top:20px;
}
.loginbox {
background: url(../images/login_shadow.png) no-repeat;
height: 310px;
padding: 40px;
}
.rightsection {
width: 85%;
float: right;
border-bottom: 1px solid #cccc;
}
.rightboxwrapper {
float: left;
width: 325px;
padding-right: 30px;
background: url(../images/loginleft.png) no-repeat center bottom;
height: 262px;
}
.rightboxwrapper .loginheader h2 {
color: #0588ab;
font-size: 16px;
font-family: trebuchet MS;
margin: 0;
text-align: left;
}
.loginform input {
width: 170px;
}
.loginform input#btnsubmit {
width: 80px !important;
border: none;
}
.loginform {
padding: 10px 0 0 45px;
line-height: 35px;
background: url(../images/lock.png) no-repeat right center;
width: 335px;
}
.loginform td {
color: #333333;
font-family: trebuchet MS;
font-size: 12px;
padding: 0;
margin: 0;
}
.copyright {
width: 100%;
text-align: right;
padding: 5px 0px;
font-size: 11px;;
color: #0588ab;
font-family: trebuchet MS;
}
.copyright p {
padding-right: 15px !important;
}

index.jsp

<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.metadata.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#commentForm1").validate({meta: "validate"});
required: 'Enter this!'
});
</script>
<style type="text/css">
form { width: 500px; }
form label { width: 250px; }
form label.error, 
form input.submit { color: red; font-size: 20px; }
</style>
</head>
<body>
<div class="wrapper">
<!--maindiv wrapper starts-->
<div id="border-top" class="h_green">
<!--header starts-->
<div id="header-top">
<div><img width="249" height="54" style="padding:15px 0 0 0px" src="images/companylogo.png"> </div>
</div>    
</div>
<div id="contentbox">
<div style="background:none;border:none;" id="menubox">
<div id="menuheader">
<div id="message">
<p style="text-align:center; padding-top:10px;" class="message_text"> </p>
</div>
<div id="user_name">
</div>
</div>
</div>
<div class="loginbox">
<div style="width:100%!important;" class="rightsection">
<form name="loginform" action="loginServlet" method="post" id="commentForm1">
<div class="loginwrapper">
<div class="rightboxwrapper">
<table cellspacing="0" cellpadding="0" border="0" align="center" class="loginform">
<tbody><tr class="loginheader">
<th style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:35px;"> <h2>Login</h2></th>
</tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;">User ID </td></tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;"><input type="text" id="username" name="username" class="{validate:{required:true, messages:{required:'*'}}}"></td>
</tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;">Password</td></tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;"><input type="password" id="password" name="password" class="{validate:{required:true, messages:{required:'*'}}}"></td>
</tr>
<tr>
<td colspan="2">
<input value="Login" class="btn"  style="width:60px;" type="submit"/>
<input value="Reset" class="btn" style="width:60px; margin-left:10px;" type="reset"/>
</td>
</tr>
</tbody></table>
</div>
<div class="imagewrapper">
<img width="323px" height="262px" src="images/loginimg.png">     
</div>
</div> <div style="clear:both; color:fff"></div>
</form>
</div>
<div class="cleared"></div>
</div>
<div id="footerwrapper"><!--Div for the Footer -->
<div class="copyright">
<p>Copyright &copy; 2012 BitsCrafters HRM All rights reserved.</p>
</div><!--ended Footer Div-->
</div>   
</div>
</div>
</body>
</html>

Quel est le problème avec ce code? quelqu'un peut-il m'aider à sortir de cette situation? Il ya quelque chose de mal parce que quand je le lance via tomcat parfois son travail, mais parfois il ne fonctionne pas certains de l'icône et l'image n'est pas affichée. Dans le navigateur, j'ai vérifié l'affichage de la source pour vérifier si css chemin d'accès est correct ou pas, il est correct.

Où est votre css répertoire au sein de Tomcat? Quelles sont les Url des pages c'est à dire de quoi ils ressemblent dans le navigateur de l'utilisateur? Post (un exemple). Ma conjecture est que le chemin d'accès à la connexion.css n'est pas correct par rapport à l'URL de votre page.
Martin Wilson j'ai mis à jour ma question, où j'ai ajouté l'image qui montre le Répertoire de MON projet,Merci d'avance
Où est votre appel d'inclure le fichier css? <link type="text/css" href="css/login.css">
Moïse oh désolé tout coller du code que j'oublie maintenant j'ai édité ma question.
Les utilisateurs de l'accès aux pages jsp directement, par exemple, l'URL de quoi que ce soit:8080/myapp/index.jsp?

OriginalL'auteur Gaurab Pradhan | 2012-07-09

  1. 3

    A couru dans le même, il suffit de corriger le chemin d'accès href:

    <link rel="stylesheet" type="text/css" href="./css/login.css"/>

    OriginalL'auteur Peter

  2. 0

    Le code CSS et l'aspect correct à première vue, si l'erreur est ailleurs.

    1. Utiliser un outil comme Firebug ou "Inspecter l'Élément" pour vérifier que votre navigateur obtient. Tous ces outils ont un onglet réseau où vous pouvez voir ce que le navigateur demande et ce qu'il a obtenu. Rechercher:

      1. Voyez-vous toutes les Url que vous attendez?
      2. Pourrait le serveur de servir tous ces (statut HTTP 200)
      3. Vérifier le contenu des fichiers. Ils ne contiennent pas ce que vous attendez?

    2. Vérifier l'erreur de la console. Avez-vous un CSS /JavaScript erreurs?

    3. Inspecter l'élément en question. Est-il correct de styles CSS? Dans le panneau CSS, voyez-vous les corriger styles?
    Sir oui, j'ai utilisé firebug sa toute fine. Parfois mon projet fonctionne bien je.e le chargement de toutes les css class et id, mais si j'actualise la page, je vais trouver quelques icône manquante.Je suis frustré par ce problème.
    Donc, ce n'est Firebug dire lors de l'échec de l'actualisation? Avez-vous vérifier les journaux d'erreur sur le serveur?
    comment vérifier les journaux d'erreur sur le serveur?

    OriginalL'auteur Aaron Digulla