Java - Thymeleaf - HTML: Linebreak <br/> does not work? - html

I am using IntelliJ and Spring Boot and Thymeleaf for a database visualisation project. The following HTML-Template is for the view of one gene:
gene.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
<title>Gene</title>
<meta http-equiv="Content-Type" content="content/html; charset=UTF-8">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!--import header-->
<header th:include="header"></header>
<div id="main">
<!--GeneID as page heading -->
<h2 th:text="'Gene: '+${identifier}" style="text-align: center"></h2>
<!--Gene description -->
<p th:text="${description}" style="text-align: center"></p>
<br/>
<!-- Sequence -->
<h3 th:text="'Sequence:'"></h3>
<!-- For each char in sequence-->
<th:block th:each="char:${sequence}">
<!-- Print the char. Color encoding done by main.css -->
<div th:class="${'gene ' + char}" th:text="${char}"></div>
</th:block>
<!--Protein encoded by gene -->
<h3 th:text="'Protein:'"></h3>
<a th:href="${'protein?id='+protein}" th:text="${protein}"></a>
</div>
</body>
</html>
In my later view, I have a problem.
I want the "Protein: Q6GZX4" to be in one line below the sequence. Yet I could not achieve it with <br/>or anything else.
What am I missing?
Thanks for your time and effort :)

Based on #manfromnowhere:
Change gene.html to:
[...]
<!--Protein encoded by gene -->
<div class="breaker">
<br/>
<h3 style="display:inline-block;" th:text="'Protein:'"></h3>
<a th:href="${'protein?id='+protein}" th:text="${protein}"></a>
</div>
breaker-class in main.css:
div.breaker{
clear:both;
}
Output:

Related

Any change in the my index.html is not reflected on webpage. Why?

I downloaded demo version of particles.js and am trying to modify it using basic HTML . But none of the changes are getting reflected on the webpage. Is there any obvious thing which I am missing ? TIA
<!DOCTYPE html> <html lang="en" >
<head><meta charset="UTF-8"> <title>particles.js demo</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- particles.js container --> <div id="particles-js"></div>
<!-- stats - count particles --> <div class="count-particles">
<span class="js-count-particles">--</span> particles </div>
<!--particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib -->
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="./script.js"></script>
<h1 class="main-title">Hello all </h1>
<p class="text-content">Welcome to my website! Click on a link to get started.</p>
</body>
</html>
please use position: relative to your overall container
below code will works for you ...
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>particles.js demo</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- particles.js container -->
<div id="particles-js" class="tt"></div>
<!-- stats - count particles -->
<div class="count-particles">
<span class="js-count-particles">--</span> particles </div>
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib -->
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="./script.js"></script>
<div class="body-container" style="position: relative;">
<h1 class="main-title">Hgdfgdfello all </h1>
<p class="text-content">Welcome to my website! Click on a link to get started.</p>
</div>
</body>
</html>

My CSS isn't being applied at all. What is my error?

I was trying to load a CSS file to HTML to style it except the CSS doesn't load. I placed both the files in the same directory
I have an HTML file called Homepage.html and a CSS file called Homepage.css:
<html>
<title>
Welcome to Sids World!
<link rel="stylesheet" type="text/css" href="homepage.css">
</title>
<body>
<div id="header"> <!-- menu here -->
This Site is Under Construction
</div>
<div><!-- global division -->
</div>
</body>
</html>
Furthermore, my CSS file (located in the same directory) has the following code:
body
{
font-size:100%;
background-color:red;
}
#header
{
text-align:center;
font-size:4em;
font-family:sans-serif;
background-color:blue;
}
I expect when this loads that the background of the entire site will be red and the background surrounding my text will be blue, but this does not occur. What am I missing here?
The file paths of both files are:
C:\Sid\Rutgers\ComputerScience\SiteForDeploy\htmlfiles\Homepage.html
C:\Sid\Rutgers\ComputerScience\SiteForDeploy\htmlfiles\Homepage.css
I am using Sublime Text Editor for my processing if that helps
Your problem is twofold. Firstly, you fail to specify a <head> section for your document. Secondly, your <link> tag is within your <title> tag. The <link> tag should be within <head>, but not within <title>. Change to this and you'll see pretty colors:
<html>
<head>
<title>
Welcome to Sids World!
</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
</head>
<body>
<div id="header"> <!-- menu here -->
This Site is Under Construction
</div>
<div> <!-- global division -->
</div>
</body>
</html>
<html>
<title>
Welcome to Sids World!
<link rel="stylesheet" type="text/css" href="homepage.css">
</title>
<body>
<div id="header"> <!-- menu here -->
This Site is Under Construction
</div>
<div> <!-- global division -->
</div>
</body>
</html>
should be changed to
<html>
<head>
<title>
Welcome to Sids World!
</title>
<link rel="stylesheet" type="text/css" href="Homepage.css"/>
</head>
<body>
<div id="header"> <!-- menu here -->
This Site is Under Construction
</div>
<div> <!-- global division -->
</div>
</body>
</html>
Css url's are case sensitive, so you'll need <link rel="stylesheet" type="text/css" href="Homepage.css">
Otherwise your code is working just fine for me http://jsfiddle.net/3deg1h05/

Angularjs not working

I am working on web project where i am working on angular js to display images and if i click an image it will zoomed. I have created one sample application its working fine but when i started to create one sample application it gives warning for its internal tags.
My Html file where it gives warnings(for ng-app,ng-controller,ng-src,ng-repeat) ..
<!DOCTYPE html>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <script src="http://code.angular.org/angular-1.0.0rc4.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="${pageContext.request.contextPath}/js/underscore-min.js"></script>
<link rel="stylesheet"
href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
<script src="${pageContext.request.contextPath}/css/album.css"></script>
<title>Angular album</title>
</head>
<body>
jsp
<div ng-controller="AlbumCtrl">
<div id="albumImage">
<img ng-src="{{currentImage.image}}" alt="{{currentImage.description}}">
</div>
<div id = "thumbWrapper">
<ul id="thumbList">
<li ng-repeat ="image in images" ng-click="setCurrentImage(image)">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>
</div>
</body>
</html>
Seems that your problem is here:
<div ng-controller="AlbumCtrl">
I don't see where this controller is defined. It's possible you got your file extension wrong, and that's why:
<script src="${pageContext.request.contextPath}/css/album.css"></script>
<!-- I would have expected to see .js, not .css, in the path above -->

Compiling html templates to complete website

I'm used to using ASP.NET and visual studio to develop websites. I'm trying to develop a plain .html website in a similar matter. What I mean is use master pages etc so there is code reuse and maybe deploy these template files to a group of .html files.
For example
head.html
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
header.html
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
footer.html
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
layout.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
#include(head.html)
</script>
</head>
<body>
<div data-role="page">
#include(header.html)
#include_body()
#include(footer.html)
</div><!-- /page -->
</body>
</html>
index.html
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
and combine all of these into a single output file....
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Does anything like this exist? I'm not familiar with ruby or anything...
Server-side includes (SSI) may meet your needs. With some basic server requirements met, you can do, for example:
<!--#include virtual="includes/my_file.html" -->
You could use a little PHP to do this using includes.
Header, footer etc could be created as new .php files where you place everything you want to be displayed in that section in.
Then, in say your index.php file you do something like
<?php
include ('header.php');
?>
<html>
<head>
</head>
<body>
</body>
<?php
include ('footer.php');
?>
Everything inside the header and footer PHP files will be included.

jQuery mobile page link not working

In my jQuery mobile (v 1.2) web site, I have several separate pages (i.e. each page has one header, content and footer). The problem is I can't link the pages. The following line is not working.
Another Page shows "Error loading page".
If I add rel="external" to the <a> element, it works. However, it turns off the automatic loading via Ajax. But I want to use the Ajax loading as well as keep the pages separate. Just wondering whether it's possible.
Code Page 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
click me
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
Code Page 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
page 2 content
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
The problem is that you are trying to load your pages from the filesystem.
Chrome settings prevents that, assuming that a security risk.
Serve your pages with a web server. You can use IIS on Windows XP Pro for that.
or
You can start chrome with --allow-file-access-from-file command line option
I believe you are supposed to give each 'data-role="page" and id like "page2 so in effect it would be:
<div data-role="page" id="page"> <!--Home Page-->
<div data-role="page" id="page2"> <!--2nd Page-->
<div data-role="page" id="page3"> <!--3rd Page-->
Im not sure if that is what you are looking for in this case though...