I am trying to include a CSS to my JSP and I tried a lot of suggestions from the internet but none of them works for me.
Grateful if anyone can help!
My JSP class:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="${pageContext.request.contextPath}/css/Login.css" rel="stylesheet" type="text/css"/>
<title>Login</title>
</head>
<body>
<p>test</p>
<s:form action="loginAction" method="post">
<s:textfield type="text" label="User Name:" name="username"/>
<s:password type="text" label="Password: " name="password"/>
<s:submit value="login" type="submit"/>
</s:form>
</body>
</html>
My CSS class:
p {
font-family: verdana;
font-size: 20px;
color: red;
}
My directory:
WebContent
- css/Login.css
- WEB-INF
- ... jsp -s
...
Related
I'm using angularJS in an asp.net user control (UC), but, unfortunately, when I try to add my UC in my page, the whole page part that uses angular stops working.
I tried to use angular reference separate from UC and the page, but no success.
Page Code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Abc.aspx.cs" Inherits="WebApplication1.Abc" %>
<%# Register Src="~/filterUC.ascx" TagPrefix="uc1" TagName="filterUC" %>
<!doctype html>
<html>
<head>
</head>
<body>
<uc1:filterUC runat="server" ID="filterUC" />
<div>
<label>Name:</label>
<input type="text" ng-model="myModel" placeholder="Enter a name here">
<hr>
<h1>Hello {{myModel}}!</h1>
</div>
</body>
</html>
UC code:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="filterUC.ascx.cs" Inherits="WebApplication1.filterUC" %>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
How can I accomplish it?
Regards.
I made your example work with these changes:
Move the script to invoke AngularJS into the page Abc.aspx.
Set in the <body> tag ng-app="app" and remove it from the div in your User Control.
Add a script to create your Angular app module.
<%# Register Src="~/Controls/filterUC.ascx" TagPrefix="uc1" TagName="filterUC" %>
<!DOCTYPE html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js">
</script>
<script>
angular.module('app', []);
</script>
</head>
<body ng-app="app">
<div>
<label>Name:</label>
<input id="input1" type="text" ng-model="myModel" placeholder="Enter a name here">
<hr>
<h1>Hello {{myModel}}!</h1>
</div>
<uc1:filterUC runat="server" id="filterUC" />
</body>
</html>
How to import file css into project java web?
This is my code:
<%# 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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Demo Form Angular</title>
<script src="lib/angular.min.js"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/formAngular.css"" />
</head>
<body>
<div>
<p class="contain">Hello Angular</p>
</div>
</body>
</html>
place that link:
<link type="text/css" rel="stylesheet" href="css/formAngular.css"/>
Instead of:
<link type="text/css" rel="stylesheet" href="<c:url value="/css/formAngular.css"" />
I dont understand why css classes doesnt work.
newcss.css:
.greenClass {
color: green;
}
index.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>
<h:outputStylesheet library="css" name="newcss.css"/>
</h:head>
<h:form styleClass="greenClass">
<h:outputLabel styleClass="greenClass" value="AAA"/>
</h:form>
</html>
HTML code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2"><link type="text/css" rel="stylesheet" href="/WA/faces/javax.faces.resource/newcss.css" /></head>
<form id="j_idt4" name="j_idt4" method="post" action="/WA/faces/index.xhtml" class="greenClass" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt4" value="j_idt4" />
<label class="greenClass">AAA</label><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-7146797988252848648:-7580080555543519594" autocomplete="off" />
</form>
</html>
and this doesnt work
<?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:form>
<h:outputLabel styleClass="greenClass" value="AAA"/>
</h:form>
</html>
But the following works correctly:
<?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:form>
<h:outputLabel style="color: green" value="AAA"/>
</h:form>
</html>
HTML Code:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<form id="j_idt2" name="j_idt2" method="post" action="/WA/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt2" value="j_idt2" />
<label style="color:green">AAA</label><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="8578298320156968921:4997153480898762925" autocomplete="off" />
</form>
</html>
Can you explain what can be reason of this and how to fix this?
In your example, that doesn't work, you're missing the
<h:head>
<h:outputStylesheet library="css" name="newcss.css"/>
</h:head>
part.
I have a following .aspx page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>Test Control</title>
<style type="text/css">
input[type="radio"][checked] +label
{
font-weight: bold;
color: Green;
}
input[type="radio"][disabled] +label
{
font-weight: bold;
color: Green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="radio" name="abc" value="val1" disabled="disabled"/>val1<br/>
<input type="radio" name="abc" value="val2"/>val2
<input type="radio" name="abc" value="val3"/>val3
</div>
</form>
</body>
</html>
Am I doing anything wrong here?
because the css styles that I defined in the tag are not getting implied on the page.
Here's the JSFiddle for the said sample
As per the code the disabled button should be of green color but it is not..
similarly for the checked one
You haven't declared labels for the radio buttons...Do this.
<input id="abc1" type="radio" name="abc" value="val1" disabled="disabled"/><label for="abc1">val1</label><br/>
<input id="abc2" type="radio" name="abc" value="val2" checked="checked"/><label for="abc2">val2</label>
You should put radio button text in label
<input type="radio" id="val1" name="abc" value="val1" disabled="disabled"/>
<label for="val1">val1</label>
And then you can use your css selectors
input[type="radio"]:checked+label
{
font-weight: bold;
color: Green;
}
input[type="radio"]:disabled+label
{
font-weight: bold;
color: Green;
}
This is my CSS:
body {
text-align:center;
vertical-align:central;
width:480px;
height:800px;
}
#content {
width:100px;
height:200px;
background-image:url("../App_GlobalResources/TopBanner.png");
display:inline-block;
}
And my HTML (Master page):
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Mobile.master.cs" Inherits="m.mysite" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TestTitle</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="header">
test1234
</div>
<form id="form1" runat="server">
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
And i have a Default.aspx site which uses my masterpage, but it simple wont show my image..
if i make an img scr tag in the html it shows fine.. so the path is correct.. what else could it be?
'
This is the output HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
TestTitle
</title>
<link href="App_Themes/MobileTheme/MobileLayout.css" type="text/css" rel="stylesheet" /> </head>
<body>
<div id="header">
test1234
</div>
<form method="post" action="" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkNWnHplPoHce7cSIeDENrnMaUn20Ibq7H6yKbaedCCPw=" />
</div>
<div id="content">
test
</div>
</form>
</body>
</html>
Okay it works now, seems like Internet explorer was looking in the wrong folder.. must be somekind om Visual studio bug/setting i diden't notice..