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%; }
Related
I have this pretty neat slider, and would love to have it work in some way or another with bootstrap. Can I simply add it or does it require a lot of customization?
It is really easy to use and looks good on any site and automatically resizes ect so I am not to sure what to do with it.
I don't want to start playing with it if there is a simply way or alternative out there?
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test</title>
<meta name="Description" content="Test"/>
<meta name="Keywords" content="Test"/>
<link href="style2.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/slider.css" />
<script src="js/modernizr.custom.63321.js"></script>
<link href="https://fonts.googleapis.com/css?family=Catamaran:100|Luckiest+Guy|Quicksand:300|Asap:700|Montserrat:700|Open+Sans|Roboto|Signika:700" rel="stylesheet">
</head>
<body>
<div id="mi-slider" class="mi-slider" style="left: 0px; top: 0px">
<ul>
<li><img src="images/1.jpg" alt="img01"><h4>slasssgs</h4></li>
<li><img src="images/2.jpg" alt="img02"><h4>Oxforssds</h4></li>
<li><img src="images/3.jpg" alt="img03"><h4>Loafesssrs</h4></li>
<li><img src="images/4.jpg" alt="img04"><h4>Sneaksssers</h4></li>
</ul>
<ul>
<li><img src="images/5.jpg" alt="img05"><h4>slasg</h4></li>
<li><img src="images/6.jpg" alt="img06"><h4>Hassts & Caps</h4></li>
<li><img src="images/7.jpg" alt="img07"><h4>Sunglassssssses</h4></li>
<li><img src="images/8.jpg" alt="img08"><h4>Scssarves</h4></li>
</ul>
<ul>
<li><img src="images/9.jpg" alt="img09"><h4>ssssss</h4></li>
<li><img src="images/10.jpg" alt="img10"><h4>Luxury</h4></li>
<li><img src="images/11.jpg" alt="img11"><h4>Sport</h4></li>
</ul>
<ul>
<li><img src="images/12.jpg" alt="img12"><h4>sssss</h4></li>
<li><img src="images/13.jpg" alt="img13"><h4>Duffel Bags</h4></li>
<li><img src="images/14.jpg" alt="img14"><h4>Laptossssssp Bags</h4></li>
<li><img src="images/15.jpg" alt="img15"><h4>Briefsssscases</h4></li>
</ul>
<nav>
Limos
Coaches
Minibuses
Executive cars
</nav>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.catslider.js"></script>
<script>
$(function() {
$( '#mi-slider' ).catslider();
});
</script>
</body>
</html>
You have to include the bootstrap libraries in your html head and at the bottom of your body
Bootstrap pages usually look like the example in the snippet
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text-css">
.example {
min-height: 400px;
background-color: #333333;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 example">
<p>This is column 1</p>
</div>
<div class="col-md-4 example">
<p>This is column 2</p>
</div>
<div class="col-md-4 example">
<p>This is column 3</p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
And the Bootstrap template is based on the 12-grid, so every row has a maximum of 12 columns (as default). For YOUR purposes, you can put your code inside the container-fluid, place the jquery library link on the bottom, and it would work.
I want click on Desserts and other list items , by right clicking on it i am getting
x path : //*[#id="foodMenuPanels"]/div[2]/div/div[1]/ul/li[1]/a/text()
HTML
<!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 name="generator" content=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
<title></title>
</head>
<body>
<div id="foodMenuPanels" class="food-menu-wrapper">
<div class="food-menu-panel food-panel-results">
<div class="food-menu-content">
<ul class="food-menu-list"></ul>
</div>
</div>
<div class="food-menu-panel food-panel-categories">
<div class="food-menu-subpanel-wrapper">
<!-- food-menu-content food-panel-categories -->
<div class="food-menu-content food-panel-categories">
<ul data-id="14386" class="food-menu-list">
<li class="">
Desserts
<div class="ripples"></div>
</li>
<li class="">
<a href="/menu/small-plates-snacks-appetizers/" data-internal="17145"
class="ripple">Small Plates & Snacks & Appetizers</a>
<div class="ripples"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I gave couple of try but it is not working and i am new to the selenium tool.
I would say go for css instead of xpath
a[href='/menu/desserts/']
Translation: find the anchor tag whose href = "/menu/desserts/"
Second anchor
a[href$='small-plates-snacks-appetizers/']
Translation: find the anchor tag whose href ends with "small-plates-snacks-appetizers/"
I am having some issues getting Thymeleaf to behave the way I want regarding templates. I was previously using Apache Tiles which worked but I thought it was heavy weight with the configuration / XML. I had an elegant solution where I was even defining my JavaScripts and Sytlesheets in Tiles XML configuration. However I want to move away from JSPs entirely. I have seen references for both Thymeleaf and Facelets. I decided to give Thymeleaf a try but I'm having issues getting a default layout for all my other pages.
Just for some background this was my default layout file I was using with Apache Tiles.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:importAttribute name="javascripts"/>
<tiles:importAttribute name="stylesheets"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="XXXXXXXXXXX">
<meta name="description" content="Something">
<title><tiles:insertAttribute name="title"></tiles:insertAttribute></title>
<!-- stylesheets -->
<c:forEach var="css" items="${stylesheets}">
<link rel="stylesheet" type="text/css" href="<c:url value="${css}"/>">
</c:forEach>
<!-- end stylesheets -->
</head>
<body>
<!--[if lt IE 10]>
<p class="alert alert-warning">
Warning: You are using an unsupported version of Internet Explorer. We recommend using Internet Explorer
10+. If you are a Windows XP user you'll need to download an alternative browsers such as FireFox, Chrome,
Opera, or Safari.
</p>
<![endif]-->
<!-- header -->
<div id="header">
<tiles:insertAttribute name="header"></tiles:insertAttribute>
</div>
<!-- end header -->
<!-- content -->
<div id="content">
<tiles:insertAttribute name="content"></tiles:insertAttribute>
</div>
<!-- end content -->
<!-- footer -->
<div id="footer">
<tiles:insertAttribute name="footer"></tiles:insertAttribute>
</div>
<!-- end footer -->
<!-- scripts -->
<c:forEach var="script" items="${javascripts}">
<script src="<c:url value="${script}"/>"></script>
</c:forEach>
<!-- end scripts -->
</body>
</html>
I want to replicate similar behavior with Thymeleaf where the view would be rendered inside the template, hopefully that makes since.
As far as I understand it right now Thymeleaf does not work that way. Instead you define fragments and include them on each page. It works the opposite direction.
I found this example of GitHub https://github.com/michaelisvy/mvc-layout-samples/tree/master/src/main/webapp/WEB-INF/view/thymeleaf
I don't understand the following file.
!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link th:href="#{/style/app.css}" rel="stylesheet" />
</head>
<body>
<div class="container" style="padding-top: 50px;">
<div th:fragment="menuFragment">
<div class="header well">
<img th:src="#{/images/springsource_banner_green.png}"/>
</div>
<div class="page-header">
<h1 th:text="${title}"></h1>
</div>
<ul>
<li><a th:href="#{/users/all/jsp-plain.htm}">No template</a></li>
<li><a th:href="#{/users/all/jsp-custom-1.htm}">Custom tags</a></li>
<li><a th:href="#{/users/all/jsp-custom-2.htm}">Custom tags with table tag</a></li>
<li><a th:href="#{/users/all/jsp-tiles.htm}">Apache Tiles</a></li>
<li><a th:href="#{/users/all/thymeleaf.htm}">Thymeleaf</a></li>
</ul>
</div>
</div>
</body>
</html>
This line is pointless as its not part of the fragment as when it gets included in the users.html the html structure is lost.
<div class="container" style="padding-top: 50px;">
Essentially I want something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container" style="padding-top: 50px;">
<div>
<div class="header well">
<img th:src="#{/images/springsource_banner_green.png}"/>
</div>
<div class="page-header">
<h1 th:text="${title}"></h1>
</div>
<ul>
<li><a th:href="#{/users/all/jsp-plain.htm}">No template</a></li>
<li><a th:href="#{/users/all/jsp-custom-1.htm}">Custom tags</a></li>
<li><a th:href="#{/users/all/jsp-custom-2.htm}">Custom tags with table tag</a></li>
<li><a th:href="#{/users/all/jsp-tiles.htm}">Apache Tiles</a></li>
<li><a th:href="#{/users/all/thymeleaf.htm}">Thymeleaf</a></li>
</ul>
</div>
</div>
<div id="content">
<!-- PAGES SHOULD RENDER HERE, example User.html -->
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Any ideas or best practices?
You want the Thymeleaf Layout Dialect.
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