Problema para cargar css(Spring MVC - jsp - Tomcat - css)

Rapidiablo · #1 (**permalink**) 02/11/2011, 11:32

Buenas Gente, gracias de ante mano por pegarle una leida a esto, ojala ayude a mas personas. Eh estado buscando informacion en internet hace 1 hora y no encuentro nada que solucione mi problema y creo que me estoy perdiendo mas. Por eso recurro a ustedes. Como veran soy nuevo en esto y bueno quiero aprender.

He armado una pequeña aplicacon con spring. Estoy desarrollando la parte de logeo al sistema. Mi problema es con los css (ya que quiero ponerle un poco de onda a las pantallas).

Eh bajado un template en html con css que quiero usar y por lo que veo funciona perfectamente (en el HTML).

Para esta aplicacion estoy usando: Spring mvc y Tomcat. Ya tengo unos jsp sin estilos con los cuales trabajo y como les mencione quiero darles estilo y ahi es donde me perdi.

Directorio:
[URL=http://imageshack.us/photo/my-images/573/35338706.jpg/][IMG]http://img573.imageshack.us/img573/2975/35338706.jpg[/IMG][/URL]

Bueno como ven en el directorio, cree la carpeta "styles" y adentro de la misma puse "images." dentro de ella coloque el archivo css y las imagenes.

Cree un archivo que se llama "loginTest.jsp" y este es el codigo.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Login Box HTML Code - www.PSDGraphics.com</title>
	<link rel="stylesheet" type="text/css" href="/styles/login-box.css'"/>
</head>

	<body>
	<div style="padding: 100px 0 0 250px;">
	<div id="login-box">
	<H2>Login</H2>
	Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	<br />
	<br />
	<div id="login-box-name" style="margin-top:20px;">Email:</div><div id="login-box-field" style="margin-top:20px;"><input name="q" class="form-login" title="Username" value="" size="30" maxlength="2048" /></div>
		<div id="login-box-name">Password:</div><div id="login-box-field"><input name="q" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /></div>
			<br />
			<span class="login-box-options"><input type="checkbox" name="1" value="1"> Remember Me <a href="#" style="margin-left:30px;">Forgot password?</a></span>
			<br />
			<br />
			<a href="#"><img src="images/login-btn.png" width="103" height="42" style="margin-left:90px;" /></a>
		</div>
	</div>
	</body>
</html>

Simplemente copie el codigo del archivo html en el jsp. Y para linkear el archivo css uso:

Código:

<link rel="stylesheet" type="text/css" href="/styles/login-box.css'"/>

el archivo web.xml:

Código:

  <servlet-mapping>
    <servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

En fin sinceramente no veo el error y estoy un poco confundido. El jsp se carga pero los estilos y imagenes no se muestras, como si no estuviera soportado. Halguien me puede dar una mano con esto? en que me equivoco?

Rapidiablo · #2 (**permalink**) 02/11/2011, 12:03

revisando los logs the Tomcat puedo ver los siguientes errores:

127.0.0.1 - - [02/Nov/2011:14:56:05 -0300] "GET /test-security-client/loginTest HTTP/1.1" 200 1307
127.0.0.1 - - [02/Nov/2011:14:56:05 -0300] "GET /test-security-client/images/login-btn.png HTTP/1.1" 404 952
127.0.0.1 - - [02/Nov/2011:14:56:05 -0300] "GET /styles/login-box.css%27 HTTP/1.1" 404 1024

Snoopy1413 · #3 (**permalink**) 02/11/2011, 12:51

intenta de esta forma:

href="${pageContext.request.contextPath}/direccion">

Rapidiablo · #4 (**permalink**) 02/11/2011, 12:59

hey!, Gracias por la respuesta.. pero no funciona tampoco!.. ya intente cambiando, las rutas y nada..

Código:

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/WEB-INF/styles/login-box.css'"/>

esto reporta Tomcat:
127.0.0.1 - - [02/Nov/2011:15:55:22 -0300] "GET /test-security-client/loginTest HTTP/1.1" 200 1373
127.0.0.1 - - [02/Nov/2011:15:55:22 -0300] "GET /test-security-client/WEB-INF/styles/images/login-btn.png HTTP/1.1" 404 952
127.0.0.1 - - [02/Nov/2011:15:55:23 -0300] "GET /test-security-client/WEB-INF/styles/login-box.css%27 HTTP/1.1" 404 952

otra idea?

Rapidiablo · #5 (**permalink**) 02/11/2011, 13:02

Tambien me di cuenta de que tenia una ' de nas en el jsp. De todas formas lo arregle y sigo teniendo el mismo error.

esto reporta Tomcat:
127.0.0.1 - - [02/Nov/2011:15:55:22 -0300] "GET /test-security-client/loginTest HTTP/1.1" 200 1373
127.0.0.1 - - [02/Nov/2011:15:55:22 -0300] "GET /test-security-client/WEB-INF/styles/images/login-btn.png HTTP/1.1" 404 952
127.0.0.1 - - [02/Nov/2011:15:55:23 -0300] "GET /test-security-client/WEB-INF/styles/login-box.css HTTP/1.1" 404 952

Rapidiablo · #6 (**permalink**) 03/11/2011, 09:47

Bueno gente.. despues de enfriar un poco la cabeza pude resolver el problema. Y para no dejarlos colgados les comento la solucion por si a alguien le pasa!.. Y gracias a Snoopy1413 por la buena ona!.

Solucion:
despues de varios intentos y varias modificaciones. Di con el problema, y la solucion fue agregar una linea de codigo a spring-mvc.xml y hacer una modificacion de la ubicacion de los recursos estaticos. Creo que esta es una propiedad de Spring 3.0 no se si funciona para versiones anteriores, creo haber leido esto en alguna parte de mi exploracion. De no ser asi.. por favor aclarenme la duda!

Código:

  <mvc:resources mapping="/static/**" location="/static/" />

Y en el directorio, cree una carpeta llamada static, en ella cree 2 carpetas, una "images" y otra "css". Y bueno coloque los archivos ahi.

si ven la imagen anterior del directorio, quedaria asi:

src
.....main
.............webapp
...................META-INF
...................static
...................WEB-INF

y bueno en el jsp:

Código:

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login-box.css"/>

Espero que les sirva.

Saludos.