interface jsf et css

**oufou** · 21/02/2015, 15h54

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

Merci

**VirgApps** · 21/02/2015, 20h47

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...

**oufou** · 21/02/2015, 23h43

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

**tchize_** · 22/02/2015, 08h32

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<h:outputStylesheet name="css/style.css" library="common" />

**oufou** · 22/02/2015, 13h48

ohh, merci bien pour cette explication.

interface jsf et css

JSF Java

Vue hybride

Discussions similaires

Partager

Partager