[SOLUCIONADO] Problema con imagenes y CSS en JSP

PGH · #1 (**permalink**) 29/05/2013, 19:18

Buenas noches,

Les comento que soy muy nuevo en esto de la programación java y jsp...

Los problemas que estoy teniendo son los siguientes:

- No logro hacer que se apliquen estilos CSS a mi JSP.
- No logro mostrar imagenes desde mi JSP.

Particularmente estoy usando Tomcat y cree un proyecto web en el cual tengo la siguiente estructura:

Proyecto1 ------ WebContent-------Imagen
------------------------------estilo1.css
------------------------------vista.jsp

EL codigo es el siguiente:

Código HTML:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="estilo1.css">
<title>No Style no IMG</title>
</head>
<body  background="/Imagen/background.jpg">
	
	<p> HOla no tengo estilo </p>

</body>
</html>

La hoja de estilo es

Código CSS:

Ver original@CHARSET "ISO-8859-1";
body {
  background-color:#eafadd;
}
h1 {
  color:#0000cc;
  font-family:times new roman;
  font-size:25px;
  text-align:center;
  text-decoration:underline;
}
p {
  color:#555555;
  font-family:verdana;
  text-align:justify;
}

Probe todas las combinaciones posibles para el path de la imagen y ninguna funciono. Solo funciona si le paso la dirección raiz completa

"C:\Users\Documents\workspace-sts-2.8.1.RELEASE\Proyecto1\WebContent\Imagen\backgrou nd.jpg"

Y los estilos no hay manera de que logre que me los levante.

Espero puedan ayudarme.

Muchas gracias de antemano.

Saludos.

Pd: no modifique ni toque ningun archivo de Tomcat.. por ahi lei algo del web.xml, pero sinceramente no entendi muy bien para que era y si tenia algo que ver con estos problemas.

cazador1992 · #2 (**permalink**) 29/05/2013, 21:00

<body background="Imagen/background.jpg"> Intenta de ese modo, en cuanto a los estilos, ni idea.

PGH · #3 (**permalink**) 29/05/2013, 21:03

Cita:

Iniciado por cazador1992

<body background="Imagen/background.jpg"> Intenta de ese modo, en cuanto a los estilos, ni idea.

Muchas gracias por la respuesta.

Probe nuevamente y no funciona....

Ojala alguien me pueda ayudar.

Saludos.

Xerelo · #4 (**permalink**) 30/05/2013, 01:12

¿La jsp sí carga?

Prueba a entrar desde el navegador en

http://localhost:8080/Proyecto1/Imagen/background.jpg
http://llocalhost:8080/Proyecto1/estilo1.css

PGH · #5 (**permalink**) 30/05/2013, 05:45

Cita:

Iniciado por Xerelo

¿La jsp sí carga?

Prueba a entrar desde el navegador en

[url]http://localhost:8080/Proyecto1/Imagen/background.jpg[/url]
[url]http://llocalhost:8080/Proyecto1/estilo1.css[/url]

Hola Xerelo,

Probe:

http://127.0.0.1:8080/Proyecto1/WebContent/Imagen/background.jpg
http://127.0.0.1:8080/Proyecto1/Imagen/background.jpg

http://127.0.0.1:8080/Proyecto1/WebContent/estilo1.css
http://127.0.0.1:8080/Proyecto1/estilo1.css

Y ninguno funciona.

me da el siguiente error:
HTTP Status 404 -

--------------------------------------------------------------------------------

type Status report

message

description The requested resource is not available.

--------------------------------------------------------------------------------

Apache Tomcat/7.0.40

Xerelo · #6 (**permalink**) 30/05/2013, 10:01

Cita:

¿La jsp sí carga?

Pon una captura del explorador desde tu IDE (Netbeans, Eclipse) donde se vean los directorios.

PGH · #7 (**permalink**) 30/05/2013, 10:25

Si la JSP carga.

Adjunto imagenes:

http://www.subirimagenes.net/i/130530062636813308.png

http://www.subirimagenes.net/i/130530062640491901.png

http://www.subirimagenes.net/i/130530062642613930.png

Muchas gracias,

Saludos.

Xerelo · #8 (**permalink**) 30/05/2013, 16:46

En la carpeta Imagen no se puede ver qué hay dentro, y el css no es fácil de distinguir si está funcionando <p> con una letra gris y la fuente verdana. Prueba con el <H1>.

Mejor que uses un navegador de verdad, no el de eclipse, a fin de cuentas es donde se va a ver tu página.

Otra cosa, parece que body background no se lleva muy bien con HTML 4.01

http://www.w3schools.com/tags/att_body_background.asp

Definition and Usage
The <body> background attribute is not supported in HTML5. Use CSS instead.

The background attribute of <body> is deprecated in HTML 4.01.

The background attribute specifies a background image for a document.

PGH · #9 (**permalink**) 30/05/2013, 16:57

Cita:

Iniciado por Xerelo

En la carpeta Imagen no se puede ver qué hay dentro, y el css no creo que seas capaz de distinguir si está funcionando <p> con una letra gris y la fuente verdana. Prueba con el <H1>.

Mejor que uses un navegador de verdad, no el de eclipse, a fin de cuentas es donde se va a ver tu página.

Gracias por la respuesta.

Probe con <H1> en el explorer y en el chrome y obtengo el mismo resultado.

En la carpeta Imagenes estan los archivos .jpg

Pd: Puede ser que esto sea problema de configuración en el Tomcat??

Saludos.

Xerelo · #10 (**permalink**) 31/05/2013, 01:42

Es muy raro, normalmente cuando a alguien le pasa eso es que no ha puesto los ficheros donde debe o no pone la ruta bien, en tu caso todo parece estar bien.

¿Has tocado algo de tomcat?¿Y del web.xml?

Con el chrome ctrl + mays + I, luego accede a tu página y a ver que te aparece en network.

http://stackoverflow.com/questions/1...04-on-web-page
http://tinypic.com/r/5yztxi/5

Prueba a hacer un proyecto nuevo.

agusnovak · #11 (**permalink**) 31/05/2013, 04:05

Bien, te comento que lo que te ocurre son dos problemas distintos y ambos problemas me los encontre yo al comenzar a programar en eclipse:

- Sobre el problema de los errores el cargar las direcciones en el navegador, imagino que posiblemente sera porque estas utilizando un servidor "simulado por eclipse", te recomiendo que le eches un vistazo a este tutorial que te sera de gran ayuda:
http://ayudaenjava.wordpress.com/2012/07/18/45/
aunque posiblemente donde se encuentre el problema reside en esta imagen de dicho tutorial:
http://ayudaenjava.files.wordpress.com/2012/07/conf_eclipse.jpg
Una vez lleves a cabo lo que te explican ahi tu problema de no poder cargar las URL fijo que se soluciona

- Sobre el problema de la imagen, segun la ruta de directorios que has pegado y suponiendo que la imagen sea por ejemplo "imagen.png" y se encuentra en el directorio "Imagen" (dado que eso no lo muestras) bastaria con añadir dentro del atributo body de tu "estilo1.css" el cual ya tienes definido, la siguiente linea

Código:

background-image: url('Imagen/imagen.png');

y por supuesto a tu "JspEstilo.jsp" deberas indicarle de donde debe tomar su estilo, dentro de la etiqueta head con:

Código:

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

Espero serte de ayuda

PGH · #12 (**permalink**) 31/05/2013, 08:12

Cita:

Iniciado por agusnovak

Bien, te comento que lo que te ocurre son dos problemas distintos y ambos problemas me los encontre yo al comenzar a programar en eclipse:

- Sobre el problema de los errores el cargar las direcciones en el navegador, imagino que posiblemente sera porque estas utilizando un servidor "simulado por eclipse", te recomiendo que le eches un vistazo a este tutorial que te sera de gran ayuda:
http://ayudaenjava.wordpress.com/2012/07/18/45/
aunque posiblemente donde se encuentre el problema reside en esta imagen de dicho tutorial:
http://ayudaenjava.files.wordpress.com/2012/07/conf_eclipse.jpg
Una vez lleves a cabo lo que te explican ahi tu problema de no poder cargar las URL fijo que se soluciona

- Sobre el problema de la imagen, segun la ruta de directorios que has pegado y suponiendo que la imagen sea por ejemplo "imagen.png" y se encuentra en el directorio "Imagen" (dado que eso no lo muestras) bastaria con añadir dentro del atributo body de tu "estilo1.css" el cual ya tienes definido, la siguiente linea

Código:

background-image: url('Imagen/imagen.png');

y por supuesto a tu "JspEstilo.jsp" deberas indicarle de donde debe tomar su estilo, dentro de la etiqueta head con:

Código:

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

Espero serte de ayuda

Muchas Gracias por la respuesta!!

Te cuento que el problema lo pude soluciona...

cuando intente hacer lo que decía la página: http://ayudaenjava.wordpress.com/2012/07/18/45/

me di cuenta que ya de entrada tenia configurado distinto el tomcat.

cuando probe el localhost en el navegador, directamente no me mostraba las imagenes del panel de tomcat....

Entonces decidi borrar el tomcat e instalarlo de nuevo... para mi sorpresa cuando lo probe nuevamente FUNCIONO!!

Los estilos y la imagen las levanto sin problemas, tanto en el explorer como en el chrome.

Agradezco mucho a todos por la colaboración.

Saludos.