Spring MVC - CSS not being imported - html

So I tried hundreds of combinations, but nothing helps.
I have my JSP:
about.jsp
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<base href="${pageContext.request.contextPath}">
<link href="resources/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="resources/css/core.css" rel="stylesheet" media="screen"/>
<title>foo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body >
<header>
<jsp:include page="/WEB-INF/view/fragments/header.jsp" />
</header>
<div class="something">
<div class="container" id="alex" >
<div class="panel panel-default">
<div class="panel-body">
<div class="text-center" >
<h1>Test</h1>
<p class="lead">
bla bla bla
</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<jsp:include page="/WEB-INF/view/fragments/footer.jsp" />
</footer>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/resources/js/bootstrap.min.js"></script>
</body>
</html>
I have the bootstrap.min.css which is being applied with no problem, and in the same directory I have:
core.css
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
padding-bottom: 40px;
background-color: #6977f5;
}
Which for some reason has no effect on my about.jsp no matter its content.
I tried to change the reference, added the base href, removed bootstrap.min.css, but no matter what I do it simply doesn't work.

Nothing was actually wrong, it was just being cached by the browser, thus not showing the changes I was making.

Related

Css error using bootstrap and millimeter unit for padding

<!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?

CSS background-image not showing my image

I have a problem with background-image property in one of my sections. Here is the HTML code:
<!DOCTYPE html>
<html lang="pl">
<head>
<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="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css">
<link rel="stylesheet" href="css/custom.css" type="text/css">
<title>Elipsis</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
</head>
<body>
<header id="intro">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</header>
<main>
<section id="about">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</section>
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</section>
</main>
<footer id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And CSS:
#intro {
background-image: url(.../.../img/intro.png);
background-image: url(intro.png);
background-image: url(".../.../img/intro.png");
background-image: url("intro.png");
}
Index.html is in root folder, css file is in root/css/... and intro.png is in both root/img/... and root folders. Why it's not showing? I've read a couple of topics here on stack and some articles from google but nothing seems to work.
The way you wrote that CSS rule only the very last line will apply, which is
background-image: url("intro.png");
(it overwrites the other lines before it)
So you probably want to change that to
#intro {
background-image: url("../img/intro.png");
height: 300px; /*whatever value, if there is no content */
}
Plus, as someone wrote in the comments: if that element has no content and no defined height, it will have height 0, therefore the background image will not be visible.
Try this.
background-image: url('../img/intro.png');
I usually drag and drop that image to get the proper path. I hope this helps.

CSS background not showing on browser

My css background image shows on dreamweaver but not in my google chrome browser for some reason it just shows a white background can anyone understand why? This is my code:
about.php file
<?php
include 'secure/db_connect.php';
include 'secure/functions.php';
sec_session_start(); // Our custom secure way of starting a php session.
if(login_check($mysqli) == true) { ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Referee Perception Exam</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/aboutstyle.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>title</h1>
<p>paragraph here</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Contact:</h3>
</div>
<div class="col-sm-4">
<h3>Social:</h3>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
</div>
</div>
</div>
</body>
</html>
<?php } else {
header( 'Location: http://localhost/project/index.php' ) ;
}
;?>
aboutstyle.css file
#charset "UTF-8";
body {
background-image: url("../img/pitch.jpeg");
background-color: #cccccc;
background-size:cover;
}
Guessing from the file structure I can see you might need to alter
background-image: url("../img/pitch.jpeg");
maybe to
background-image: url("../../img/pitch.jpeg");
or similar to correctly reach the image file from your stylesheet. But I can't be sure without seeing the structure. 404 errors in your browser should point you in the right direction.

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...

Back button not working in jquery mobile

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