I am trying to divide my page into three parts using thymeleaf fragments/layouts.
Lets say I have following page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Demo Title</title>
</head>
<body>
<div class="container">
<div class="content">Some content goes here</div>
</div>
</body>
</html>
And I am trying to divide it into following three fragments.
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Demo Title</title>
</head>
<body>
<div class="container">
bottom.html
</div>
</body>
</html>
page-content.html
<div class="content">Some content goes here</div>
I DID TRY AS BELLOW BUT DID NOT WORK:
top.html
<div th:fragment="top">
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Demo Title</title>
</head>
<body>
<div class="container">
</div>
page-content.html
<div th:replace="/top :: top"></div>
<div class="content">Some content goes here</div>
</div>
</body>
</html>
Please suggest me possible direction to look into.
Related
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<!-- bootstrap -->
<link href="../css/lib/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div style="padding:2mm;border-bottom:2px solid blue;">
</div>
</body>
</html>
I don't have any idea about the negative height of div.
Any advice would be usefull.
Edit:
console.log($("#1").outerHeight());
console.log($("#2").outerHeight());
console.log($("#3").outerHeight());
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<style type="text/css">
</style>
</head>
<body>
<div id="1">
<div id="2">
<hr>
</div>
<div id="3">
<p>Text</p>
</div>
</div>
</body>
</html>
If You Mean The Margin Using Negative Value Then We Can Use
<div style="padding:5mm;margin-top:-40px;border-bottom:2px solid blue;">
</div>
Here Margin Holds Negative Value To Displace The Object Towards The Direction Opposite to The Normal Movement Path Simply Margin-top If It Holds Negative Value Then It Moves Towards The Top Instead Of Going Down. Did This Fulfill Your Request?
I want to build a semantic html page with a two column layout. Which is the correct way to structure the page. Please take note of where the aside is placed.
Option 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header></header>
<main>
<section class="col-1"></section>
<aside class="col-2"></aside>
</main>
<footer></footer>
</body>
</html>
Option 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header></header>
<main class="col-1">
<section></section>
<aside></aside>
</main>
<aside class="col-2"></aside>
<footer></footer>
</body>
</html>
Which option is correct?
The following html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body class="w3-red">
<div class="w3-main w3-content w3-padding">
<div class="w3-row w3-blue">
<div class="w3-quarter">
<img src="http://www.w3schools.com/w3images/girl_mountain.jpg" style="width:100%">
</div>
<div class="w3-threequarter">
<p>Hello World</p>
</div>
</div>
</div>
</body>
</html>
gives the following result. As you can see there is an extra pixel of padding below the image. Is this by design? An error on my part? A bug? Either way I find it very annoying and would love to know how to get rid of it. Thanks.
Credit here to Mats at bugzilla.
img{margin-bottom:-5px}
should be
img{vertical-align:bottom}
in w3.css
I'm doing my view based on a template, but there are some areas where I want to enter fragments.
Template : base.html
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>HELLO</title>
</head>
<body>
<div layout:fragment="content"></div>
<footer>
Year Template
</footer>
</body>
</html>
view: list.html
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="base">
<head th:replace="fragments/init :: head">
<title>Title</title>
</head>
<div layout:fragment="content">
<h1> <remove>List</remove> <small></small> </h1>
</div>
<footer th:replace="fragments/init :: footer">
Year List
</footer>
</html>
Fragments : fragment/init.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
<footer th:fragment="footer">
2004
</footer>
</body>
</html>
With the head fragment, it works correctly. But in the footer, But in the footer, the code of the template is displayed.
Output:
<html lang="en"><head>
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body screen_capture_injected="true">
<div>
<h1> <remove>List</remove> <small></small> </h1>
</div>
<footer>
Year Template
</footer>
</body>
</html>
I hope you can help me. Thanks in advance.
UPDATE
base.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Template title</title>
</head>
<body>
<header>
<h1>Template Title</h1>
</header>
<section layout:fragment="content">
<p>Text Template</p>
</section>
<footer layout:fragment="footer">
<p>Footer template</p>
</footer>
</body>
</html>
list.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="base">
<head th:replace="fragments/init :: head">
<title>Title List</title>
</head>
<body>
<section layout:fragment="content">
<p>Content List page</p>
</section>
<footer layout:fragment="footer">
<div layout:include="fragments/init :: extra" th:remove="tag">
<p>Footer List page</p>
</div>
</footer>
</body>
</html>
init.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head layout:fragment="head">
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
<div layout:fragment="extra">
<p>Extra Content Fragment </p>
</div>
</body>
</html>
Output:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body screen_capture_injected="true">
<header>
<h1>Template Title</h1>
</header>
<section>
<p>Content List page</p>
</section>
<footer>
<p>Extra Content Fragment </p>
</footer>
</body></html>
I managed to include the code fragment in the footer, but my goal is to replace it.
Solution:
<footer layout:fragment="footer" layout:include="fragments/init :: extra" th:remove="tag">
<p>Footer List Page</p>
</footer>
The footer in your layout page doens't contain an fragment element, so the footer doesn't change.
The content page was 'decorated' by the elements of Layout.html, the
result being a combination of the decorator page, plus the fragments
of the content page (<head> elements from both pages with the <title>
element from the content page taking place of the decorator's, all
elements from the decorator, but replaced by all content page
fragments where specified).
https://github.com/ultraq/thymeleaf-layout-dialect#decorators-and-fragments
Hello friends i have created two page one is index.html and second is about.html . I just want to add back button on about.html using jQuery mobile . i have tried it but back button is not working in my code i dont know what is the problem
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="data-add-back-btn ">Back</div>
<div><h1>Page title</h1>
About us</div>
</div>
</body>
</html>
Please help me. Thanks in advance...
You may try creating your back button by using data-rel="back" as follows:
<a data-role="button" data-rel="back">Back</a>
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<a data-role="button" data-rel="back">Back</a>
<div>
<h1>Page title</h1>
About us
</div>
</div>
</body>
</html>
Check the section "Back" button links of the online doc for more information: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html