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.
Related
I am trying to create a PHP file that will contain scripts, css links and resources just like I have header.php and footer.php. However, when I create that file and include it in my <head> it does not apply to the page in question.
I have tried including it in <head> tags and <body> tags above the PHP include header.php but still no results. I tried different formats as well.
<?php include 'includes/scripts.php'; ?>
<?php include ('includes/scripts.php'); ?>
I want to inlcude files such as:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
header location for the code
index code location
scripts file
In your header.php file, and script.php file remove the <HTML>, <HEAD>, <BODY> tags, and also remove the <meta charset="utf-8">. In both of the files, keep only what you want to include into your index.php file.
You do not need to include the script.php file in the header.php file, instead include it only in the index.php file.
So you can keep only these things in your script.php file:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
Also in your header.php file you can keep only the contents which is wrapped with the <nav> element, and finally include the both files in your index.php file as below:
<!DOCTYPE html>
<html>
<head>
<?php require('includes/script.php');?>
</head>
<body>
<?php require('includes/header.php');?>
// your rest of your elements here
</body>
</html>
I have a zend framework application up and running. I have created a layout. Now I need to include bootstrap css file to my layout.
I tried with 'baseUrl' but it didn't work. I have the css files inside 'public/assets/css'.
I also tried with tutorial in zend framework website. But it didn't work.
They mentioned to use
<?php echo $this->headLink()->appendStylesheet('/assets/css/bootstrap.css') ?>
I added the above line in layout page but it didn't work.
Also for your information when I use this headlink, in console it's showing as
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8010/assets/css/bootstrap.css".
Any help is greatly appreciated. Thanks in advance.
Head Tag:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Zend Framework Quickstart Application</title>
<link href="/assets/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css">
</head>
Extra information: I have a controller 'HomeController' in it I have defined an action
public function homeTwoAction()
{
// action body
$this->_helper->layout->setLayout('layout');
}
In views -> I have home-two.phtml inside 'scripts/home'.
In layout I have the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap</title>
<!-- <link rel="stylesheet" href="style/bootstrap.min.css">-->
<!-- <link rel="stylesheet" href="style/customstyle.css">-->
<!--<link type="text/css" rel="stylesheet" href="/assets/css/customstyle.css">-->
<?= $this->headLink()->appendStylesheet('/assets/css/customstyle.css') ?>
<?= $this->headLink()->appendStylesheet('/assets/css/bootstrap.min.css') ?>
</head>
<body>
<div class="container-fluid">
<?php echo $this->layout()->content ?>
</div>
</body>
</html>
I am accessing
http://localhost:8010/home/home-two
HTML content is loaded but css not loading. Thanks.
Changing Mime type is explained here
Go to Tools -> Options
Then under Miscellaneous tab choose the file type css and make sure the Associated File Type is text/css
Edit
Try opening http://localhost:8010/assets/css/ or http://localhost:8010/assets/ what do you see?
This is how I have used the link tag inside the Head tag. But it is not working. Please help me to solve this.
<head>
<meta charset="UTF-8">
<link href="ccc.css" rel="stylesheet" type="text/css">
<title></title>
</head>
Both the CSS and php files are in the same folder.
I want to use LESS, but it is doesn't work at my localhost.
Here is my index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; utf-8">
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
and here is my styles.less
#nice-blue: #5B83AD;
body{
backgroud-color: #nice-blue;
}
You shouldn't be using your less files directly in your HTML. Less is a CSS pre-processor, and needs to be compiled in order to be read by your browser.
Follow the examples here (http://lesscss.org/) on how to compile your LESS file so that you can use the CSS.
My file structure is as follows....
iamdan > css > style.css
My php file, head.php is in a file called includes which is in:
iamdan > includes > head.php
which contains the following code:
<head>
<title>Website title!!!</title>
<meta charset="UTF"-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
Now it's loading the info fine and some of the style sheet (just the font style) none of the other styling is coming through...
Any ideas?
You have a mistake in your meta charset:
<meta charset="UTF-8">
And the other thing is:
<link rel="stylesheet" href="css/style.css" type="text/css">
This is relative from your script position. When you are in a subfolder. The path is wrong.
<link rel="stylesheet" href="/css/style.css" type="text/css">
Put a / before your path. Then your browser load the css file always from the root:
xx.de/css/style.css
Or put the complete URL before your script.
<link rel="stylesheet" href="http://xx.xx.de/css/style.css" type="text/css">