css in alcune pagine funzionano in altre no

**max8787** · 10-12-2011, 13:18

salve sto realizzando un applicazione in jsf 2.0 con tomcat 7 ed eclipse,
ho creato una masterpage , cioe' un template che va importato in tutte le pagine ed in cui e' contenuto il css che gestisce sia il tempate che la pagina in cui viene importato,
per capirci meglio:

masterpage.xhtml: (contiene 2 menu laterali e una barra alta con il titolo )

codice:

<!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" 	xmlns:ui="http://java.sun.com/jsf/facelets" 	xmlns:f="http://java.sun.com/jsf/core" 	xmlns:p="http://primefaces.prime.com.tr/ui" 	xmlns:h="http://java.sun.com/jsf/html">   	
<h:head>  		
<title><ui:insert name="windowTitle"/></title>  		
<link type="text/css" rel="stylesheet"href="resources/csscupertinoskin.css"/> 		 		 
<link type="text/css"rel="stylesheet"href="resources/cssstyle.css"/> 		  
					 	</h:head> 
 	 <h:body> 	 <h:form>          
             		<div class="header">  	
.................
</div>
 			
		..............
.......

home.xhtml:

codice:

<!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"
 	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:cc="http://java.sun.com/jsf/composite"
	xmlns:palIo="http://java.sun.com/jsf/composite/compositecomponent/io">
	
 	<head><title>temp</title></head>
 	<body>
 	<ui:composition template="/MasterPage.xhtml">
 		<ui:define name="windowTitle">
 				Home
 		</ui:define>
		
		
 		<ui:define name="content">
 			<div class="home">	
......
......
</div>

notebook.xhtml:

codice:

<!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"
 	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:cc="http://java.sun.com/jsf/composite">
	
 	<head>
 		<title>temp</title>
 		
 	</head>
 	<body>
 	<ui:composition template="/MasterPage.xhtml">
 		<ui:define name="windowTitle"> 				
 				 <h:outputText value="Notebook" />		
 		</ui:define>
		
		
 		<ui:define name="content">
 			<div class="home">
......
......
</div>

style.css:

codice:

.header {
    text-align: center; /* orizzontale */
    border: 1px solid;
    margin: 0px 0px 0px 0px;
    height:100px;
}



.home {
    text-align: center; /* orizzontale */
    border: 1px solid;
    margin: 0px 0px 0px 180px;
    height:490px;
    width: 1065px;
    background: silver; 
}

#sidebar {
	 padding: 0;
	 float:left;
	 border:1px solid #CC0033; 
	 height:490px;
	 width:178px;
	 margin: 0px 30px 0px 0px;
}

#sidebarlogin {
	 padding: 0;
	 float:left;
	 border:1px solid #CC0033; 
	 height:100px;
	 width:164px;
	 margin: 15px 15px 0px 0px;
	 background: silver;
}

#sidebarLeft {
     border:1px solid #CC0033; 
	 padding: 0;
	 float:left;
	 height:248px;
	 width:164px;
	 margin: 15px 15px 0px 0px;
}

la struttura e' questa:
webcontent
------informatica
----------------notebook.xhtml
------resources
----------------css
--------------------style.css
--------------------cupertinoskin.css
------home.xhtml

praticamente il css funziona cosi: i 3 sidebar e header gestiscono dei div che stanno su masterpage.xhtml(il template)e che contiene 2 menu laterali e l header, mentre .home gestisce il div principale che sta sia su home.xhtml che su notebook.xhtml che e' il blocco testo e componenti quindi le pagine home.xhtml e notebook.xhtml sono uguali cambiano solo i componenti all interno del div home, l'unica differenza e' che home.xhtml sta sotto webcontent invece notebook sta sotto webcontent /informatica/notebook.xhtml
ora sulla home il template (masterpage.xhtml) viene visualizzato nel modo corretto(2 menu laterali a sx una barra con il titolo in cima e un blocco testo nel centro-dx dello schermo) , quindi i css funzionano mentre su notebook.xhtml si vede il template(quindi il template viene importato) ma nn funzionano i css(vedo il testo dei menu e il titolo della barra alta del template ma non sono posizionati come dovrebbero).
se la pagina notebook.xhtml la sposto sotto webcontent(cioe' allo stesso livello di home.xhtml) i css funzionano anche li.
quindi praticamente il problema e' la posizione della pagina notebook, quello che non capisco e' il perche i css non funzionano? loro hanno il loro link che nn dipende dalla posizione della pagina.
sbaglio qualcosa?

grazie

**ResianTaxidrive** · 10-12-2011, 15:06

scusa la domanda cretina che non c'entra molto con la soluzione del problema. Ma perchè il link al css che hai postato è href="resources/csscupertinoskin.css" e non href="resources/css/cupertinoskin.css" (cioè manca lo /)?

**max8787** · 10-12-2011, 16:25

si per cercare di allineare il testo mi si e' cancellata la barra
cmq i link sono :

codice:

<link type="text/css" rel="stylesheet" href="resources/css/cupertinoskin.css"/> 	
	 		 
<link type="text/css" rel="stylesheet" href="resources/css/style.css"/>

non so perche non riesco su pagine che non sono direttamente sotto webcontent non riesco a farli funzionare

**max8787** · 11-12-2011, 12:24

risolto!
ho sostituito i 2 link dei css con questi 2

<h

utputStylesheet library="css" name="cupertinoskin.css" />
<h

utputStylesheet library="css" name="style.css" />

ora funziona, si puo' chiudere!

Discussione: css in alcune pagine funzionano in altre no

Strumenti discussione

Ricerca discussione

Visualizza

css in alcune pagine funzionano in altre no

Permessi di invio