This question already has answers here:
How to reference CSS / JS / image resource in Facelets template?
(4 answers)
Closed 8 years ago.
This is my project structure:
I am going to add css file into HeaderTester.xhtml file:
This is HeaderTester.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Here is header</title>
<link rel="stylesheet" type="text/css" href="headerStyle.css"/>
</h:head>
<h:body>
This is Header tester class
<div id="header">
<h3>Sajjad HTlo</h3>
</div>
</h:body>
</html>
Css File:
*{
margin: 0;
padding: 0;
}
#header{
background-color: gray;
width: 100%;
height: 60px;
}
h1{
color: silver;
}
But just displays texts in result!
Regarding your XML namespaces declaration, you are using JSF 2.2.
Since JSF 2.0, you can place CSS, JavaScript files and images(and other files) into a resources directory in the root of your web application.
Then, you can include your CSS using the h:outputStylesheet :
<h:outputStylesheet library="css" name="styles.css"/>
Related
I am trying to build a template with common header/footer.
for some reason,my other pages are not showing the template
My pages:
layout/layout.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<h:html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta charset="ISO-8859-1"/>
<title>Test</title>
<link href="../stylesheet/template.css" rel="stylesheet" type="text/css" />
</h:head>
<h:body>
<div id="templateHearderDiv" class="templateHearder">
<h1> Test logo</h1>
</div>
<div id="content" class="contentBody">
<ui:insert name="content">
default content
</ui:insert>
</div>
<div id="templateFooterDiv" class="templateFooter">
<p> 2016-2017. All Rights Reserved</p>
</div>
</h:body>
</h:html>
CSS, stylesheet/template.css
#CHARSET "ISO-8859-1";
* { margin:0; padding:0; }
.templateHearder{
background: #FFCF75;
height: 10%;
}
.contentBody{
}
.templateFooter{
height: 10%;
background: #FFCF75;
}
.contentBody{
margin-left: 20%;
margin-right: 20%;
}
.logoFont{
font-family: "Impact";
padding-top: 10px;
}
home.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/layout/layout.xhtml">
<ui:define name="content">
<h2>This is page1 content</h2>
</ui:define>
</ui:composition>
home.xhtml is my welcome page, when i see that page the template is not shown.
Any clue?
The problem was servlet mappings in web.xml.
Understanding their significance.
We need default servlet handler(depends on the server).
The default servlet helps listing out directories,static resources etc.
I missed default servlet mappings and for that reason the template was not loaded.
I want to block scroll in my pages
this is the html pages :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>
<script src="frise.js"></script>
<link rel="STYLESHEET" type="text/css" href="style.css">
<script>
var a;
function start()
{
a = new frise("frisekk", 'Mon Nov 15 2014 19:25:00', 'lab', 600);
}
</script>
</head>
<body onload="start();">
<div id="blocantiscroll">
<div id="frisekk"> <br/> </div>
</div>
</body>
</html>
So I call my CSS in <div id="blocantiscroll">
but nothing happen, I have look on the web and this should work but it doesn't, the sroll is always active.
Is there a problem in my html page or in my CSS ?
my CSS :
blocantiscroll {
height: 100%;
overflow: hidden;
}
blocantiscroll is an ID so you need to use # in your selector:
#blocantiscroll {
height: 100%;
overflow: hidden;
}
Your current selector is looking for an element of type blocantiscroll which doesn't exist.
Further reading
Also, if you want #blocantiscroll to be 100% height of the window, you will need to set the below:
html, body {
height: 100%;
}
blocantiscroll is an ID..
so you need to specify # before "blocantiscroll"
give it as:
#blocantiscroll
Add this to your css
body {overflow: hidden;}
I have a common header for all the html pages, so I want the header.html page to be included in another html page.
Suggest some ways as this header needs to be given in all the html pages.
<!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">
<title>Insert title here</title>
<style type="text/css">
header#arriba {
width:1350px;
height:30px;
clear:both;
margin:auto;
text-align:center;
background-color:red;
color: white;
}
header#arriba img {
vertical-align:middle;
margin:2px 700px 2px 35px; /* YOU CAN ADJUST IMAGES SPACE WITH THIS MARGINS */
}
header img{
float:left;
margin-right:5px;
}
</style>
</head>
<body>
<header id="arriba">
<h2><img src="header.png" alt="1" width="150px" height="25px"/>Data</h2>
</header>
</body>
</html>
First of all change the extension of all the pages from "html" to "shtml".
Create an HTML Page having your header.
And now what you can do it you can include your header into any shtml page by the following command
<!--#include virtual="Web/Controls/TopPanel.html" -->
The only thing which is the prerequisite is the SSI(Server Side Injection) should be supported by the server.
Client side page inclusion is only possible using AJAX. Look at jQuery for a simple AJAX library.
Example code (assuming jQuery is included):
$.ajax("includes/header.html").then(function(data) {
$('body').prepend(data);
});
This will insert the html in the includes/header.html at the top of the body element.
You could also insert stuff to the head. (replace 'body' with 'head')
I have a Razor layout MVC3 page as below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style "text/css">
</style>
</head>
After the word "style" and under the word text it is showing a syntax error that says: Element text is obsolete or nonstandard. Everything still works but I am just wondering why the error is showing. Not sure but I think it is coming from ReSharper. Prior to version 6 I don't recall seeing this message.
I think you missed the type.
<style type="text/css">
You missed the type.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
See http://www.w3.org/TR/html4/present/styles.html#h-14.2.2
When I added
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
line to the top of my html file, my css rules disappear in firefox. Also i can't see them with firebug.
Do you have any idea about this problem ?
Make sure that the files are sent by the server with the correct MIME type (text/css). Have a look in the error console ( IIRC the menu should be Tools / Error Console in the English version).
Usually, if the file ends with .css, this should happen automatically, however there are still badly configured servers around. If you are using a Apache web server, you may be able to correct this with a .htaccess file, otherwise you'll need to ask your support.
Details: https://developer.mozilla.org/en/incorrect_mime_type_for_css_files
You need to add attributes to your start-html tag to get it right. This is done since XHTML really is XML.
<!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" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>
The code above suggest you to have the style.css file in the root-catalog of your website.
Please check it
http://www.w3schools.com/tags/tag_doctype.asp
i think you have more idea of doctype
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>