problema css con jsp

**digipato** · 14-12-2012, 18:25

Ciao a tutti,
spero innanzitutto di non sbagliare sezione.
Ho un problema con l'impostazione della dimensione orizzontale di un blocco <div> attraverso i fogli di stile in un file jsp; ho realizzato più pagine html nelle quali ho inserito un blocco <div>, che contiene a sua volta un <img....>, che ho centrato "linkando" nei file html il medesimo file css che contiene le regole per ottenere il risultato voluto.
Tutto ciò non funziona se inserisco il medesimo <div> in una pagina jsp eseguendo il link al medesimo file css; il file css in questione contiene il seguente codice:

codice:

body {
	background-image: url(up_bar.jpg);
	background-repeat: repeat-x;
}
#topHeader /* div contenente immagine di testata */{
	width: 960;
	padding-top:60;
	padding-bottom:60;
	margin: 0 auto;
}

Il blocco div incriminato, invece, è:

codice:

<div id='topHeader'>[img]images/headerimg.jpg[/img]</div>

Se carico la pagina html, il blocco <div>, e quindi l'immagine in esso contenuta, è centrato orizzontalmente e distanziato dal bordo superiore di 60 pixel così come imposto dalle regole del file css linkato, mentre se carico la pagina jsp, il blocco <div> assume dimensione orizzontale pari alla larghezza della pagina e non ha il padding come indicato; ho notato con firebus, che vengono ignorate le righe relative all'impostazione delle proprietà "width", "padding-top" e "padding-bottom".
Qualcuno saprebbe spiegarmi perché?
Grazie per l'attenzione.

**LeleFT** · 14-12-2012, 18:33

Che sia una pagina HTML o una JSP non ha alcuna importanza. Ciò che ha importanza è il risultato che viene inviato al browser (che è sempre e solo HTML). Quindi, analizza la pagina risultante e verifica che il file CSS sia raggiungibile secondo il percorso che hai impostato.

Eventualmente posta qui la pagina JSP e forniscici le informazioni relative ai percorsi fisici di questi file.

Ciao.

**digipato** · 14-12-2012, 18:49

I file css, html e jsp sono nella stessa cartella e il fatto che il file css sia raggiungibile è verificato dal fatto che la regola body viene regolarmente applicata; inoltre l'ho verificato anche con firebugs.
il codice jsp è il seguente:

codice:

<%@ 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">
<%@ page import = "tm.bean.Account" %>
<html>
<head>
	<meta http-equiv='Content-Type' content='text/html; charset=windows-1252'>
  	<title>Menu utente</title>
	<meta name='description' content=''>
	<meta name='keywords' content=''>
	<meta name='author' content='Unregistered User'>
	<meta name='generator' content='AceHTML Freeware'>
	<link rel="stylesheet" href="template.css" type="text/css" media="screen">
</head>
<body>
	<%
		out.write("<div id='topHeader'>[img]images/xmas_headerimg.jpg[/img]</div>");
		out.write("<div align='center'>");
		String message = null;
		Account user = new Account();
		user.setEmail(request.getParameter("usr"));
		user.findUser();
		if (user.getResultUser() == -2) {
			out.write("<table style='border: 0px; margin: 20'>");
			out.write("<tr>");
			out.write("<td colspan=6 width='200' align='center' height='30' valign='top'>");
			out.write("Si è verificato un errore SQL durante la ricerca dell'utente nel Database");
			out.write("</td>");
			out.write("</tr>");
			out.write("<tr>");
			out.write("<td colspan=6 width='200' align='center' height='30' valign='top'>");
			out.write("se il problema persiste contattare l'amministratore");
			out.write("</td>");
			out.write("</tr>");
			out.write("</table>");
		} else if (user.getResultUser() == -1) {
			out.write("<table style='border: 0px; margin: 20'>");
			out.write("<tr>");
			out.write("<td colspan=6 width='200' align='center' height='30' valign='top'>");
			out.write("Connessione al Database SQL non disponibile");
			out.write("</td>");
			out.write("</tr>");
			out.write("<tr>");
			out.write("<td colspan=6 width='200' align='center' height='30' valign='top'>");
			out.write("riprovare più tardi");
			out.write("</td>");
			out.write("</tr>");
			out.write("</table>");
		} else if (user.getResultUser() == 0) {
			out.write("<table style='border: 0px; margin: 20'>");
			out.write("<tr>");
			out.write("<td colspan=6 width='200' align='center' height='30' valign='top'>");
			out.write("Indirizzo email errato");
			out.write("</td>");
			out.write("</tr>");
			out.write("<tr>");
			out.write("<td colspan=6 width='200' align='center' height='30' valign='top'>");
			out.write("Verificare i dati inseriti e riprovare ad eseguire l'accesso");
			out.write("</td>");
			out.write("</tr>");
			out.write("</table>");
		} else {
			if (!user.getPassword().equals(request.getParameter("pwd"))) {
				out.write("<table style='border: 0px; margin: 20'>");
				out.write("<tr>");
				out.write("<td colspan=6 width='200' align='center' height='30' valign='top'>");
				out.write("Password errata");
				out.write("</td>");
				out.write("</tr>");
				out.write("<tr>");
				out.write("<td colspan=6 width='200' align='center' height='30' valign='top'>");
				out.write("Verificare i dati inseriti e riprovare ad eseguire l'accesso");
				out.write("</td>");
				out.write("</tr>");
				out.write("</table>");
			} else if (user.getEnable().equals("n")) {
				out.write("<table style='border: 0px; margin: 20'>");
				out.write("<tr>");
				out.write("<td colspan=6 width='200' align='center' height='30' valign='top'>");
				out.write("Utente non abilitato");
				out.write("</td>");
				out.write("</tr>");
				out.write("</table>");
				out.write("</div>");
				
				out.write("<div align='center'>");
				out.write("<form action='Abilitazione.jsp' method='post'>");
				out.write("<table style='border: 0px; margin: 20'>");
				out.write("<tr>");
				out.write("<td colspan=6 width='200' align='center'>");
				out.write("Inserire codice di attivazione");
				out.write("</td>");
				out.write("</tr>");
				out.write("<tr>");
				out.write("<td colspan=4 width='200' align='center'>");
				out.write("<input type='hidden' name='codfis' id='codfis' value='");
				out.write(user.getCodiceFiscale());
				out.write("'>");
				out.write("</td>");
				out.write("</tr>");
				out.write("<tr>");
				out.write("<td colspan=4 width='200' align='center'>");
				out.write("<input type='text' name='code' size='20' maxlength='10'>");
				out.write("</td>");
				out.write("</tr>");
				out.write("<tr>");
				out.write("<td colspan=6 width='200' align='center'>");
				out.write("<input type='submit' value='Verifica codice'>");
				out.write("</td>");
				out.write("</tr>");
				out.write("</table>");
				out.write("</form>");
			} else {
				if (user.getType()==0 || user.getType() == 1 || user.getType() == 99) {
					out.write("<form action='cedolini.jsp' method='post' target='_blank'>");
					out.write("<table style='border: 0px; margin: 20'>");
					out.write("<tr>");
					out.write("<td>");
					out.write("<input type='hidden' name='cf' id='cf' value='");
					out.write(user.getCodiceFiscale());
					out.write("'>");
					out.write("<input type='hidden' name='usr' id='usr' value='");
					out.write(user.getEmail());
					out.write("'>");
					out.write("<input type='submit' value='Elenco mensile' onMouseOver=\"this.className='boldOn';\" onMouseOut=\"this.className='boldOff';\">");
					out.write("</td>");
					out.write("</tr>");
					out.write("</table>");
					out.write("</form>");
				} 
				if (user.getType() == 1 || user.getType() == 99) {
					out.write("<table style='border: 0px; margin: 20'>");
					out.write("<form action='uploadFile.jsp' method='post' target='_blank'>");
					out.write("<tr>");
					out.write("<td>");
					out.write("<input type='hidden' name='cf' id='cf' value='");
					out.write(user.getCodiceFiscale());
					out.write("'>");
					out.write("<input type='hidden' name='usr' id='usr' value='");
					out.write(user.getEmail());
					out.write("'>");
					out.write("<input type='submit' value='Carica lista mensili' onMouseOver=\"this.className='boldOn';\" onMouseOut=\"this.className='boldOff';\">");
					out.write("</td>");
					out.write("</tr>");
					out.write("</form>");
					out.write("</table>");
				}
				if (user.getType() == 1 || user.getType() == 99) {
					out.write("<table style='border: 0px; margin: 20'>");
					out.write("<form action='viewLista.jsp' method='post' target='_blank'>");
					out.write("<tr>");
					out.write("<td>");
					out.write("<input type='hidden' name='cf' id='cf' value='");
					out.write(user.getCodiceFiscale());
					out.write("'>");
					out.write("<input type='hidden' name='usr' id='usr' value='");
					out.write(user.getEmail());
					out.write("'>");
					out.write("<input type='submit' value='Visualizza lista completa' onMouseOver=\"this.className='boldOn';\" onMouseOut=\"this.className='boldOff';\">");
					out.write("</td>");
					out.write("</tr>");
					out.write("</form>");
					out.write("</table>");
				}
			}
		}
		out.write("</div>");
	%>
</body>
</html>

**LeleFT** · 17-12-2012, 11:19

Poi ci spiegherai perchè effettui tutto tramitre scriptlet, ovvero usando out.write() quando è sufficiente inserire il codice HTML così com'è e usare lo scriptlet (e, magari, anche un po' di JSTL) solo per le parti dinamiche... rendendo il tutto molto più facile da gestire e leggere.

Non hai scritto se hai analizzato la pagina risultante... ovvero, se vi sono differenze fra quella HTML e quella generata da JSP.

Noto solo che stai mischiando diversi stili: usi quasi dappertutto gli apici singoli (che sono ammessi dalle specifiche, anche se solitamente si usano i doppi apici), tranne sulla riga di inclusione del CSS.

Eventualmente posta il sorgente della pagina risultante dall'elaborazione JSP.

Ciao.

**digipato** · 17-12-2012, 11:49

L'utilizzo dello scriptlet è la risultante di tutte le prove eseguite, così come anche le virgolette.
Comunque, questo è il risultato del file prodotto dalla pagina jsp:

codice:

<!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=windows-1252'>
  	<title>Tempi Moderni - Menu utente</title>
	<meta name='description' content=''>
	<meta name='keywords' content=''>
	<meta name='author' content='Unregistered User'>
	<meta name='generator' content='AceHTML Freeware'>
	<link href='template.css' rel='stylesheet' type='text/css'>
</head>
<body>
	<div id='topHeader'>[img]images/xmas_headerimg.jpg[/img]</div>
	<div align='center'>
		<form action='cedolini.jsp' method='post' target='_blank'>
			<table style='border: 0px; margin: 20'>
				<tr>
					<td>
						<input type='hidden' name='cf' id='cf' value='ABCDEF01G23H456I'>
						<input type='hidden' name='usr' id='usr' value='jack'>
						<input type='submit' value='Elenco mensile' onMouseOver="this.className='boldOn';" onMouseOut="this.className='boldOff';">
					</td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>

Discussione: problema css con jsp

Strumenti discussione

Ricerca discussione

Visualizza

problema css con jsp

Permessi di invio