In this link, https://editor.p5js.org/, there are three files, html, javascript and css.
I duplicate those files on my own computer and then run it with Chrome browser. It does not render anything. However, when I run this page with a web server, Xampp, it runs successfully. What are the reasons?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
Put your <script> tag into the head tag of your html
https://p5js.org/get-started/ page
like :
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5#1.4.0/lib/p5.js"></script>
<script src="sketch.js"></script>
</head>
<body>
<main>
</main>
</body>
</html>
It worked for me over Google Chrome
It MIGHT be CORS, CORS is usually for images & sound files & stuff like that, but maybe it's different in google chrome, you should google how to disable it in google chrome and see what works for you, i think it's something with the shortcut, not sure. Browser should also throw a crap tone of things into your console about CORS.
otherwise maybe your files are in wrong locations, everything should be under a single folder:
jsProject:
sketch.js
index.html
style.css
Related
In base.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Base</title>
<style>
body {
background: blue;
}
</style>
</head>
<body>
<h1>Base</h1>
</body>
</html>
the background of <body> is blue.
But if the CSS is linked, like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Base</title>
<link rel="stylesheet" href="http://localhost/exp/mysite/css/style.css" type="text/css">
</head>
<body>
<h1>Base</h1>
</body>
</html>
with CSS in http://localhost/exp/mysite/css/style.css
body {
background: blue;
}
it doesn't work. Why?
Can you check error and write text of error for your post? To do that, open Developer Tools, reload page, and when style.css will be red, copy and paste code of Error and text of answer from the server.
I think here may be few common problems:
localhost follows to your computer/server, but web server (Apache / Nginx) doesn't know where your link (http://localhost) should follows. I mean to which directory where css file located.
Second common problem is permissions. For example directory with your CSS or css file has not readable permissions.
There can be few more problems, like CSP or something more complicated, but i need more information from you.
Try to use a relative filepath, this will also make the transfer to a production server easier:
<link rel="stylesheet" href="css/style.css" type="text/css">
instead of
<link rel="stylesheet" href="http://localhost/exp/mysite/css/style.css" type="text/css">
(of course it depends where your html or php document is placed in the file system – if that's in a folder, it will be something like href="../css/style.css"
You should link the css this way
<link rel="stylesheet" href="css/style.css" type="text/css">
or link the css file the exact folder name
Set your folder is:
mysite/index.html
mysite/css/style.css
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Base</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<h1>Base</h1>
</body>
</html>
The problem was
SetHandler application/x-httpd-php
in the .htaccess file.
As the question suggests I have an index.php file with html in it and when I try to style it using external or internal css, it doesn't work. But inline css works. By the way I am using xampp on win7 to test the website. And the file structure looks like this c:/xampp/htdocs/test/index.php
Relevant html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<!--This css file contains the css shown below as internal css-->
<style>
body{
background-color: blue;
color: white;
}
.header{
color: white;
}
</style>
<?php
function somefuntion(){
/*I will be adding this function later once the html skeleton
is done.
This function will be calculating some numbers based on the
current date and echoing it.*/
}
?>
</head>
<body>
<section class="header">
<p>Spring</p>
</section>
<section class="body">
<p>Hello world</p>
</section>
</body>
</html>
Can someone also explain why internal css is not working?
Solution found by hRdCoder: missing " mark in the content attribute of meta tag.
<link rel="stylesheet" type="text/css" href="style.css"></link>
Only things to check for are that you add the closing tag and that the style.css file is in the same directory as your index.php.
Edit:
I just noticed that in your that you're missing the last set of quotation marks (") in the content attribute. Could that be affecting the rest of the page?
Also make sure you don't include the <style></style> tags in your external css file
Do one thing. open css file through xampp or wampp.. like
open browser -> search localhost/your folder and then open css or js file ,now copy that address and paste in href or src. hope this will help
the answer could be as simple as adding a class or id to the html tag like lets say there is a button tag like this..
<button>open</button>
and the code you wrote on external css is not working but inline does cuz there might be a class or id or the selector itself imposing the code without you knowing it so that's why it might not be working .That's why try adding a class or id to it like this..
<button class="btn">open</button>
<style>
.btn {
background-color:red;
}
</style>
it might just work..
there is something wrong with your path when linking your external css
is your index.php is in the same folder as your style.css?
<link rel="stylesheet" type="text/css" href="style.css">
try to put it in a separate folder named css
then link it as
<link rel="stylesheet" type="text/css" href="css/style.css">
you can also use firebug plugins for firefox or firebug lite plugin for chrome to check the errors
I've created an CSS external style sheet for a webpage of my website. I have uploaded it to the server and have used the following code in my PHP file to load the webpage. However, the webpage just loads as if it ignores the style sheet. Here's the code in the PHP file that I have used so I just uploaded the HTML tags here. Any help would be a great help. Thanks.
<html>
<head>
<link rel="styleshhet" type="text/css" href="/webspace/httpdocs/new_select3_style_sheet.css">
<script>function goBack() {window.history.back()}
</script>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<link rel="styleshhet" type="text/css" href="/webspace/httpdocs/new_select3_style_sheet.css">
goes to:
<link rel="stylesheet" type="text/css" href="new_select3_style_sheet.css">
First you had a typo -> stylesheet not stylshhet second all paths run from above httpdocs in public facing HTML (where your site will be) so you need to remove everything above that! e.g.
/webspace/httpdocs/new_select3_style_sheet.css
If your domain was example.com then /webspace/httpdocs/ = example.com/ when building URLs
This question already has answers here:
I want to add CSS to my my PHP index file [closed]
(2 answers)
Closed 9 years ago.
Hello my Code here is very simple. For some reason it is not picking up anything from the CSS file and adding it to the php file in the body section. If I make changes for the p tag in CSS it does not display the changes when I use P in php and go into the website here is my code.
PHP CODE
<!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">
<!-- Created by: Sivaram Penumarty [skpenuma] -->
<?php
include("style.css");
?>
<head>
<title>WireLess Networking Group US PDE</title>
</head>
<body>
<h3>Ye Olde Storye</h3>
<p><span>A</span> long time ago there was an intrepid young student who wanted to learn CSS...</p>
</body>
</html>
STYLE.CSS
p {
font-family:Garamond;
font-size:16px;
}
h3 {
font-family:cursive;
color:#36648b;
text-align:center;
}
span {
color:#cc0000;
font-size:24px;
}
This is the output onto the webpage after I try running it.
p { font-family:Garamond; font-size:16px; } h3 { font-family: cursive; color: blue; text-align: center; } span { color:green; font-size:24px; }
Ye Olde Storye
A long time ago there was an intrepid young student who wanted to learn CSS...
As you can see the text is not aligned to the center for Ye Olde Storye and the span doesn't work for A as well as nothing for the p tag changes either. Also it reprints all the code from the style.css file in the beginning. Why is this happening?
You probably just want to do this instead of the include
<!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">
<!-- Created by: Sivaram Penumarty [skpenuma] -->
<head>
<title>WireLess Networking Group US PDE</title>
<link rel='stylesheet' href="style.css"/>
</head>
<body>
<h3>Ye Olde Storye</h3>
<p><span>A</span> long time ago there was an intrepid young student who wanted to learn CSS...</p>
</body>
</html>
You are using a PHP include to dump the CSS file as text into the HTML document … where it will be treated as HTML.
If you really want to include it that way, then you need to put it inside a <style> element.
That method, however, means that the CSS will have to be downloaded every time the HTML document is downloaded (and can't be reused between pages).
Tell the browser to load the CSS instead:
<link type="text/css" rel="stylesheet" href="style.css">
You need to put a <style> container around your css file, because css is no html!
<style type="text/css">
<?php
include("style.css");
?>
</style>
As others proposed: Include the external file using the proper syntax.
First open notepad, put all your html code in it, then save it as index.html(don't forget the .html extension)
Then make a new notepad file and add all your css to to it. and save it as style.css, make sure they are in same directory.
and Finally, add this code anywhere in your html file:
<link rel="stylesheet" type="text/css" href="/style.css">
You don't need PHP to just load the stylesheet. If style.css is in the same directory, you could use the following line of code to reference the stylesheet:
<link rel="stylesheet" type="text/css" href="style.css"/>
If
include() just fetches the CSS file and dumps the whole code in your document. So, if you want that instead, you could do something like this:
<head>
<style>
<?php include("style.css"); ?>
</style>
<head>
Hope this helps!
Take a look here and see if it helps.
Of taken from that page by Stefan:
<?php
define('CSSPATH', 'template/css/'); //define css path
$cssItem = 'style.css'; //css item to display
?>
<html>
<head>
<title>Including css</title>
<link rel="stylesheet" href="<?php echo (CSSPATH . "$cssItem"); ?>" type="text/css">
</head>
<body>
...
...
</body>
</html>
I have an .html file with a login form and wish to recreate it and save it as a .php file. However, I'm encountering difficulties with setting the background image and other CSS related stuff.
Below is my code for the .php which I'm sure it won't provide guidance to answering my question, but I don't know where to start. I've checked W3schools and many other sites.
A great start to helping me out would on how I would include a .CSS file in .PHP file. Perhaps giving me the a quick source code example. Also, the code to set a fixed background
image would be amazing.
<?php
$url = 'C:\Users\George\Documents\HTML\bg.jpg';
?>
<html lang="en">
<head>
<title>This is a test</title>
<style type="text/css">
body
{
background-image:url('<?php echo $url ?>');
}
</style>
</head>
<body>
<p>This is a test.</p>
</body>
</html>
I found my answer.
<?php
$profpic = "bg.jpg";
?>
<html>
<head>
<style type="text/css">
body {
background-image: url('<?php echo $profpic;?>');
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hey</title>
</head>
<body>
</body>
</html>
It's not a good coding to put PHP code into CSS
body
{
background-image:url('bg.png');
}
that's it
Your question doesn't have anything to do with PHP... just CSS.
Your CSS is correct, but your browser won't typically be able to open what you have put in for a URL. At a minimum, you'll need a file: path. It would be best to reference the file by its relative path.
You should consider have other php files included if you're going to derive a website from it. Instead of doing all the css/etc in that file, you can do
<head>
<?php include_once('C:\Users\George\Documents\HTML\style.css'); ?>
<title>Title</title>
</hea>
Then you can have a separate CSS file that is just being pulled into your php file. It provides some "neater" coding.