interface jsf et css

Version imprimable

Bonsoir;
J'ai une interface jsf et je veux réaliser une déviation des coins du border de la page, j'ai utilisé "border-radius" dans un fichier css, mais elle n'a pas fonctionné.Voici mon modèle et le fichier css:
modele.xhtml:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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:h="http://java.sun.com/jsf/html"
		xmlns:p="http://primefaces.org/ui"
		xmlns:f="http://java.sun.com/jsf/core">
 
		<h:head>
		<!-- permet de déclarer une ressource qui se trouve dans le dossier css du dossier parent resources -->
		<h:outputStylesheet name="common-style.css" library="css" />
	</h:head> 
    <h:body >
				<p:layout fullPage="true">
<p:layoutUnit position="north">
<div id="header">
				<ui:insert name="header" >
					<ui:include src="/templates/header.xhtml">
					</ui:include>
				</ui:insert>
				</div>
</p:layoutUnit>
<p:layoutUnit position="center">
<div id="content">
				<ui:insert name="content" >
					<ui:include src="/templates/content.xhtml" />
				</ui:insert>
			</div>
			</p:layoutUnit>
  </p:layout>
    </h:body>
</html>

et le fichier css: common-style.css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#header{
border-radius: 30px;
border-top-left-radius:100px;
border-bottom-right-radius:100px;
 
border: 1px solid #000000;
 
}
 
#content{
	border-radius: 30px;
border-top-left-radius:100px;
border-bottom-right-radius:100px;
border: 1px solid #000000;
 
 
}

qui a une idée? :calim2: Merci

21/02/2015, 20h47
VirgApps

Bonsoir,
il y a plusieurs choses qui pourraient expliquer cela notamment la feuille de style est elle disponible ? Est ce que l'élément de header.xhtml à un fond qui masquerait les bords arrondis ?
Tu devrais utiliser les outils du navigateur, par exemple dans Firefox "inspecter l'élément" sur ta div afin de voir si elle a bien des propriétés de la feuille de style. Ou simplement mettre un fond coloré et voir si c'est pris en compte...
21/02/2015, 23h43
oufou

Je te remercie pour ta reponse, je suis debutant et j'ai pas compris ce que te designe par element du navigateur ou comment les faire, peux tu me donner un tuto ? car sur google ce qui existe , des choses generale sur css. Merci
22/02/2015, 08h32
tchize_

Tu appuie sur F12 dans ton firefox et tu verra apparaitre une console magique avec tout ce qu'il faut pour commencer à debugger des styles CSS, notamment un petit bouton à gauche te permettant de sélectionner un élement de ta page pour inspecter son état CSS: son style effectif, d'où est hérité ce style, etc.

Comme tu peux le voir sur ce fiddle, ton css fonctionne
http://jsfiddle.net/7s2eeyrk/

Maintenant, il est placé où ton css? Avec le library que tu as mis, JSF s'attends à le trouver dans /resources/css/common-style.css

A noter que tu devrais éviter d'appeler ta librairie "css", une librairies ca regroupe du css, du javascript et des images. J'aurais donc plutôt mis le css dans /resources/common/css/style.css et j'aurais appelé

Code:

<h:outputStylesheet name="css/style.css" library="common" />
22/02/2015, 13h48
oufou

ohh, merci bien pour cette explication.:bravo: