CSS background not showing on browser - html

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.

Related

Does VSCode automatically compile my SCSS into CSS?

In this tutorial:
https://www.youtube.com/watch?v=Zz6eOVaaelI
They say to hit a button on the bottom of the window (I have, 'Live Sass Compiler,' downloaded) and that would make a CSS file that VSCode compiles my SCSS to.
Which, it does not seem to be doing; here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="stylesheet" href="style.scss"/>
<title>Sassy</title>
</head>
<body>
<header>
<h1>Hello!</h1>
<button>Hello--again!</button>
</header>
<div class="contact">
<button>Submit</button>
<div class="info">
<h1>Our contact info</h1>
<p>This is our info</p>
</div>
</div>
</body>
</html>
Here is the SASS:
header {
background: lightblue;
};
However, when I open a live server, the background does not appear light blue; just basic white.
Lastly, my differs from the video as I just put the HTML and the SASS file in the same folder.
<link rel="stylesheet" href="style.scss"/>
You need to link the actual .css file that's compiled from your .scss file. Sass files themselves cannot be used as the stylesheet for your page.
<link rel="stylesheet" href="style.css"/>

How can I switch between elements using AJAX

I am relatively new to Ajax. I've created two <li> elements with <a> elements inside of them, both of them lead to other HTML files. What I am trying to achieve is that whenever I click on one of the links, the page automatically loads the HTML file related to it, however its not working for me. Whenever I click on one of the links, nothing happens. Thanks in advance! I am using JQuery with Ajax.
FIRST HTML FILE
$('li').find('a').on('click',function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('.main-content').load(href + 'content-ajax');
});
.ajax-img {
margin-top: 8em;
float: left;
}
.ajax-img2 {
float: left;
margin-left: 10em;
margin-top: -5em;
}
.ajax-nadpis {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
font-size: 2.7em;
}
.ajax-text {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
margin-top: -13em;
}
nav {
display: flex;
}
ul li {
display: inline-block;
padding-left: 18em;
margin-top: 2em;
}
ul li:hover {
cursor: pointer;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
//FIRST HTML PAGE
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Tinos&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<h2 class="podnadpis">Automaticke nacitanie clanku pomocou ajaxu (bez refreshu stranky)</h2>
<section class="ajax">
<div class="section-container">
<div class="img-holder">
<img src="ajax-IMGs/talltales.png" class="tall-tales-logo" alt="logo tall tales">
</div>
</div>
</section>
<article id="article">
<nav class="navigation">
<ul>
<li>Shroudbreaker</li>
<li>Skeleton Lords</li>
</ul>
</nav>
<div class="main-content">
<div class="content-ajax">
<img src="ajax-imgs/graymarrow.png" class="ajax-img" alt="">
<h3 class="ajax-nadpis">SKELETON LORDS</h3>
<p class="ajax-text">Tall Tales – Shores of Gold introduces Skeleton Lords, imposing characters clambering out of the oldest legends into the present day. Meaner than any of the bony marauders you’ve fought so far, these intimidating adversaries can only be encountered by following the story as it unfolds. Be prepared for anything when seeking out Skeleton Lords – these resourceful foes will resist any attempt to send them back to their resting place beneath the sands. They’re big, tough and full of surprises…</p>
</div>
</div>
</article>
<script src="javascript/jquery.js"></script>
<script src="javascript/jquery.parallax.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
SECOND HTML FILE
<!DOCTYPE html>
<html lang="en">
<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">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Tinos&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<article id="article">
<nav class="navigation">
<ul>
<li>Shroudbreaker</li>
<li>Skeleton Lords</li>
</ul>
</nav>
<div class="main-content">
<div class="content-ajax">
<img src="ajax-imgs/shroudbreaker.png" class="ajax-img2" width=700px height=600px alt="">
<h3 class="ajax-nadpis">SHROUDBREAKER</h3>
<p class="ajax-text">The Shroudbreaker is the first Tall Tale in the Shores of Gold Arc. The Tale Book can be voted for on the table next to the Mysterious Stranger in the Tavern of any Outpost. The Tall Tale can be voted to be cancelled at the Ship's Voyage Table. Players can unlock three Checkpoints during this Tall Tale. If they wish to continue the Tall Tale at a later time, they can vote on any acquired Checkpoints at the Voyage Table.</p>
</div>
</div>
</article>
<script src="javascript/jquery.js"></script>
<script src="javascript/jquery.parallax.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
These are the errors I am getting
Load page content using AJAX
First of, you should use a templating engine (i.e: PHP) since it makes it infinitely easier to just change a head tag in one place than in N files. Same goes for scripts in footer etc.
Every page should be accessible on its own (via URL) but give the feel of no tab refresh, here's where AJAX comes at play:
header.php :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title><?= $page_title ?></title>
<link rel="shortcut icon" href="#!" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="nav">
Home
About
Contact
</nav>
and footer.php :
<footer>
© <?= date("Y") ?> - Lorem Ipsum
<footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Create three files index.php, about.php and contact.php like the following and change the <h1> text respectively
<?php
$page_title = "Home";
include 'header.php';
?>
<div id="page">
<div id="content">
<h1>This is Home page</h1>
</div>
</div>
<?php
include "footer.php";
?>
<?php
$page_title = "About";
include 'header.php';
?>
<div id="page">
<div id="content">
<h1>This is About page</h1>
</div>
</div>
<?php
include "footer.php";
?>
<?php
$page_title = "Contact";
include 'header.php';
?>
<div id="page">
<div id="content">
<h1>This is Contact page</h1>
</div>
</div>
<?php
include "footer.php";
?>
Finally here's the JS script.js file:
jQuery(function ($) {
// Read history states
window.onpopstate = function (e) {
if (e.state) {
$("#content").html(e.state.html);
document.title = e.state.pageTitle;
}
};
$("#nav").on("click", "a", function (ev) {
ev.preventDefault(); // prevent default anchor behavior
const URL = $(this).attr("href"); // get page URL
const name = $(this).text(); // get page name
document.title = name;
// AJAX LOAD and pushState for browser history
$("#page").load(URL + " #content", function (data) {
const html = $(data).find("#content").html();
const pageTitle = $(data).find("h1").text();
// Handle history and browser's AddressBar
window.history.pushState({html, pageTitle}, "", URL);
});
});
});
Install PHP and set the php binaries paths in your Environment Variables (Windows).
Open terminal from your project folder and spin up a lightweight PHP cli-server:
php -S localhost:8080
and head to http://localhost:8080
The above is crawler friendly, meaning that a crawler visiting your page can index every other page and its contents.

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.

Spring MVC - CSS not being imported

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.

Bootstrap 2.3.2 styles not being found/applied

I'm trying to create a basic Hello World page in Bootstrap, but the styles in the .css file are not being applied to the content on the page. In chrome dev tools, the .js and .css files are successfully loaded and can be looked through in-browser, but the styles are not applied to the element.
html:
<!DOCTYPE html>
<html>
<head>
<title>Alex Rules</title>
<link href="bootstrap/css/bootstrap.min.css" rel="styelsheet" media="screen" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="postContent" class="row">
<div class="span6 offset3">
Hello World!
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Is there a step that I'm missing?
In your link tag it says rel="styelsheet" and it should say rel="stylesheet".