Is it possible to change the font size of different lines within a table cell? (While keeping to xhtml strict)
#Sam: Yes:
<!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>
<title></title>
</head>
<body>
<table>
<tr>
<td>
<span style="font-size: 10px">10px</span>, <span style="font-size: 14px">14px</span>, <span style="font-size: 21px">21px</span>
</td>
</tr>
</table>
</body>
</html>
Related
I am creating a html template for a webpage in a free HTML-kit text editing program. Both my xhtml and css files are in the same directory. I can link pictures to xhtml template but my css page is not affecting any change.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmln="http-"http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="teggxt/html; charset=utf-8" http-equiv="Content- Type"/>
<title>Spaghetti & Cruft: Geek Pizzeria</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="branding">
<h1><img src="images/logo.gif" alt="Spaghetti and Cruft: Geek Pizzeria">
<p id="address">
Spagetti & Cruft<br />
742 Cederholm Ave.<br />
Gotham, CA 00234<br />
510-555-0987
</p>
</div>
<div id="main-content">
<h2>The page title will go here.</h2>
<p>The page content will go here.</p>
</div>
<ul id="navigation">
<li>Our Menu</li>
<li>About Us</li>
<li>Raves and Reviews</li>
<li>News and Events</li>
<li>Contact Us</li>
</ul>
<div id="tagline">
<p>Pizza, pasta, and WiFi.</p>
<p>Enjoy a bite with your bytes.</p>
</div>
<p id="copyright">© 2007 Spaghetti & Cruft: Geek Pizzeria</p>
</body>
</html>
and the CSS code.
html {
background-color: #ffffff;
background-image: url(images/background.gif) repeat-x;);
}
body {
width: 80%;
}
Is the HTML-kit having difficulty processing XHTML 1.0 Strict? I'm not sure.
You are missing the closing " after styles.css.
If you are using html strict, you need to close all of your tags always. html, body, div and h1 tags is not closed right now. You miss some closing in the end of css description in meta tag also.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmln="http-"http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Spaghetti & Cruft: Geek Pizzeria</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="branding">
<h1><img src="images/logo.gif" alt="Spaghetti and Cruft: Geek Pizzeria" /></h1>
</div>
</body>
</html>
And your css is also quite clumzy. No need to put background elements in html if you can all put in body description. And also width is probably for that div, not for all body.
body { background: #FFFFFF url(images/background.gif) repeat-x; }
div#branding { width: 80%; }
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'm completely new to PrimeFaces, so sorry if this is a stupid question.
According to the primefaces.org website, there's no configuration needed. You just put the primefaces jar in your classpath and add the namespace to the page, and that's it. This is exactly what I did, and I can access and create the primefaces components, but no style is applied to them.
This is what the page source looks like
<!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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<head><title>...</title></head>
<body>
<p:accordionPanel>
<p:tab title="First Tab Title">
<h:outputText value= "Lorem"/>
</p:tab>
<p:tab title="Second Tab Title">
<h:outputText value="Ipsum" />
</p:tab>
</p:accordionPanel>
</body>
</html>
And this is what's rendered
<!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><title>...</title></head>
<body><div id="j_id_3" class="ui-accordion ui-widget ui-helper-reset ui-hidden-container" role="tablist"><h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true"><span class="ui-icon ui-icon-triangle-1-s"></span>First Tab Title</h3><div id="j_id_3:j_id_4" class="ui-accordion-content ui-helper-reset ui-widget-content" role="tabpanel" aria-hidden="false">Lorem</div><h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false"><span class="ui-icon ui-icon-triangle-1-e"></span>Second Tab Title</h3><div id="j_id_3:j_id_6" class="ui-accordion-content ui-helper-reset ui-widget-content ui-helper-hidden" role="tabpanel" aria-hidden="true">Ipsum</div><input type="hidden" id="j_id_3_active" name="j_id_3_active" value="0" /></div><script id="j_id_3_s" type="text/javascript"><!--
PrimeFaces.cw('AccordionPanel','widget_j_id_3',{id:'j_id_3',active:0});
//--></script>
</body>
</html>
As you can see, the primefaces component is rendered, with all css styles attached, but there's no reference to any style sheet rendered. Should this be rendered automatically, or is this something I should add to the page?
I'm using myFaces 2.1.5, PrimeFaces 3.5 and I'm running it on Tomcat 7.0.26
The <head> incompatibility with Primefaces, the <h:head> will include automatically all necessary JavaScript files for Css files for layout, so when you don't use it,Css will not be included automatically.
If you want to include automatically CSS, you should use <h:head>, not <head>:
<h:head>
// ...
</h:head>
<h:body>
// ...
</h:body>
Other reference question: unable-to-understand-hhead-behaviour
I have a webpage in which I am using 2 jsp:include directives. Basically one is the header and other is the footer. The headers and footers are aligned correctly. But the central body of the main page is aligned to the left side.
This is the code of the page.
page.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<%#page contentType="text/html" import="java.util.*" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="images/style.css" type="text/css" />
<title>HireZilla</title>
</head>
<body>
<jsp:include page="../top_and_left.jsp" flush="false"></jsp:include>
<div id="contenttext" align="center">
Hello World!!
</div>
<jsp:include page="../footer.jsp" flush="false"></jsp:include>
</body>
</html>
This is the code in the browser. I can see that there are lot of tags lying here and there because of the "jsp:include"s. But i dont know how to remove them.
The div tag with "Hello World" gets aligned in the left most corner of the page after the header and before footer elements. My header("top_and_left.jsp") as the name suggests has an 'L' shape with links in the left side of the page and a banner in the top. I want the div tag to come inside the L. I am able to do this in browsers ie8 and above but not in ie7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../../css/style.css" type="text/css" />
<title>HireZilla</title>
</head>
<body>
<div id="page" align="center">
<div id="toppage" align="center">
<div id="date">
<div class="smalltext" style="padding:13px;"><strong>Wed Jul 27 23:14:08 IST 2011</strong></div>
</div>
<div id="topbar">
--Links in the top right corner--
</div>
</div>
<div id="header" align="center">
<div class="titletext" id="logo">
<div class="logotext" style="margin:30px">Hire<span class="orangelogotext">Z</span>illa</div>
</div>
<div id="pagetitle">
<div id="title" class="titletext" align="right" >Welcome to HireZilla!</div>
</div>
</div>
<div id="content" align="center">
<div id="menu" align="right">
<div id="linksmenu" align="center">
--Left link panel menu--
</div>
</div>
</div>
<div id="contenttext" align="center">
Hello World!!
</div>
<div id="footer" class="smallgraytext" align="center" style="margin-left:225px" >
--Footer goes here--
</div>
</div>
</body>
</html>
This is the contenttext element in my css
#contenttext{
width:608px;
background-color:#F7F7F7;
border-left:solid 1px #999999; border-right:solid 1px #999999;
border-bottom:solid 1px #999999; border-top:dotted 1px #CCCCCC;
min-height:360px;
}
I am not sure whether I have put the question in the right way. I would be happy to clarify.
I dont want to crowd this page more with the css also. If you can let me know which elements you want to see, I can paste their code here.
Thanks in Advance
You are including a full html page within the body of another html page. This is causing all kinds of invalid html.
To fix this, strip all of the extra stuff out of footer.jsp and top_and_left.jsp. Remove the <html>, <head>, <body>, etc. The file should only include the html which you want injected into your body. This will likely clean up most of your issues.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="myStyle.css"/>
</head>
<body>
<div>
<h1>Heading One</h1>
<p class="para1">Paragraph One</p>
<h3>Heading Two</h3>
<p>Paragraph Two</p>
<h3>Heading Three</h3>
<p>Paragraph Three</p>
<br />
Link One
<br />
Link Two
</div>
</body>
</html>
<p>Paragraph Three<p>
That is the problem.
Edit: the other <p> should obviously be </p>
Edit 2: Noticed a larger problem: The XML definition or whatever-it's-called should always be on the first line. If I recall correctly.
Edit 3: Yup, I checked. W3 validator tells this:
XML declaration allowed only at the start of the document
Run it through the W3C validator, and it will point you right at the problems: http://validator.w3.org/
Specifically:
This:
<?xml version="1.0" encoding="UTF-8"?>
Must go at the very top of the document, not below the DOCTYPE.
And you've forgotten a '/' on the closing p tag here:
<p>Paragraph Three<p>
Once those problems are corrected, it validates just fine.
You can run it through the W3C checker here (click on the "direct input" tab and copy/paste) and it will give you very specific feedback as to what doesn't validate
Try this:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="myStyle.css"/>
</head> <body>
<div>
<h1>Heading One</h1> <p class="para1">Paragraph One</p>
<h3>Heading Two</h3> <p>Paragraph Two</p>
<h3>Heading Three</h3> <p>Paragraph Three</p>
<br /> Link One <br /> Link Two
</div>
</body> </html>
The <?xml version="1.0" encoding="UTF-8"?> must be the first line in the XML document.
See the XML Specifications: http://www.w3.org/TR/2006/REC-xml11-20060816/
To pass XHTML validator http://validator.w3.org you need to change
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
to
<!DOCTYPE html>
See this answer