my CSS file "styles.css" isn't loading. I'm on a mac and my PHP server is set to be loading from my "PHP" folder on my desktop.
Here is the file path to the css folder: /Users/evanbutler/Desktop/PHP/css
Code from the PHP doc:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/Users/evanbutler/Desktop/PHP/css/styles.css">
<title>Create a Business Card</title>
Proper way is copy style.css from your desktop to project folder/css. then include css by href="css/styles.css"
They are four method to link css file into html:
Linking to a separate CSS file
<link rel="stylesheet" type="text/css" href="mystyles.css" />
Embedding CSS into the HTML
<style media="screen" type="text/css">
Add style rules here
</style>
Adding Inline CSS to HTML tags
<h2 style="color:red;background:black;">This is a red heading with a black background</h2>
Importing a CSS file from within CSS
#import "newstyles.css";
You should use a relative path to your css file from your root folder of your working project. Are you using an environment like XAMPP to test your local project on? If so, your css relative url would be a href="css/styles.css"
Related
I have two CSS links in the head of my PHP file.
<link rel="stylesheet" type="text/css" href="../styles/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../styles/style.css">
The first one (Bootstrap) works. The second one doesn't. They are both in the same path. I've double and triple checked that the second one is spelled correctly. What should I do?
Check the location of your file in a web site's folder structure.
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
css is located in the same folder as the current page
<link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css">
css is located in the styles folder in the current folder
<link rel="stylesheet" type="text/css" href="/styles/bootstrap.min.css">
css is located in the styles folder at the root of the current web
<link rel="stylesheet" type="text/css" href="../styles/bootstrap.min.css">
css is located in the folder one level up from the current folder
I am learning the php and get some difficulties, I am trying to include the php file in header of another file, but the css is not working?
here is my project directory structure
Project Structure
and here is my php code...
blogpage.php
<html lang="en">
<head>
<?php include 'head.php';?>
<title>Off Canvas Template for Bootstrap</title>
</head>
I have included the path in Struts-2/blogpage.php
here is my head.php
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet">
<link href="css/blog.css" rel="stylesheet">
Is CSS folder located under the head.php?
Try to add slash to all links:
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/offcanvas.css" rel="stylesheet">
<link href="/css/blog.css" rel="stylesheet">
You may check, adding the links directly, without including th php. Try in that way to see if the links work.
Solution One:
As per your folder structure you have all the style-sheets under the CSS folder and you are trying to include it in the PHP file which is located outside the CSS folder and the procedure it that you have to directly point it out to the CSS folder to pertain the links to all the files that you provide in head.php.
The head.php should look like this so that it will not pertain to any error.
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet" type="text/css">
<link href="css/blog.css" rel="stylesheet" type="text/css">
Errors:
Your forward slash trailing in the first link will fails since you have added the forward slash over to the bootstrap.css and hence that file will not call out in blogpage.php page. That is the reason you are not getting css over to the blogpage.php.
The type="text/css" is missing to the stylesheet call in the head.php and this may also cause the Error.
And pertaing to that you need to call the head.php in the blogpage.php as follows:
<html lang="en">
<head>
<?php include ('../head.php'); ?>
<title>Off Canvas Template for Bootstrap</title>
</head>
Best Practice
But you can wrap up all the head.php, footer.php, header.php into the includes folder so that it will be a constant under that folder and you can provide up the links without any error.
Since you are calling it inside the Struts-2 folder your path may fail sometimes and the CSS may result in Error.
Tips:One the site is loaded up fully you press CTRL+U so that your entire code will open up in the new window (View Page Source) and you can check to that whether all the links that you are proving are executing correct in the browser.
Solution Two:
You can add up the forward slash over to the CSS folder structure since it will not fails up when you try to add it u over to any of the page that you use. Since all the communication will be done from the root directory on all calls
And your head.php will look like
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="/css/offcanvas.css" rel="stylesheet" type="text/css">
<link href="/css/blog.css" rel="stylesheet" type="text/css">
Hello I am trying to move back 2 directories.
For example i have a file in my root folder ie: /root/FILE that links this stylesheet successfully with the file location being /root/blog/wp-content/themes/dazzling/inc/css/CSS-FILE.css"
<link href="blog/wp-content/themes/dazzling/inc/css/font-awesome.min.css" rel="stylesheet" type="text/css">
Now I want to link in the same stylesheet in a file located in a folder that is /root/eliquid/includes/FILE and in there and I am attempting to use
<link href="../../blog/wp-content/themes/dazzling/inc/css/font-awesome.min.css" rel="stylesheet" type="text/css">
I also attempted
<link href="../..blog/wp-content/themes/dazzling/inc/css/font-awesome.min.css" rel="stylesheet" type="text/css">
But not sure what im doing wrong! Any help is much appreciated!
Have you tried using an absolute link rather than a relative link? If your CSS file is at http://www.example.com/blog/wp-content/themes/dazzling/inc/css/font-awesome.min.css then you can include it on any page of your website as
<link href="/blog/wp-content/themes/dazzling/inc/css/font-awesome.min.css">
I am currently working on a admin backend and now want to move some pages into different folders (so I do not have all scripts in one folder).
Structure looks like this:
/
/theme/assets/...
/templates/head.php
/templates/foot.php
/top/index.php
/index.php
In head.php there are some stylesheets added like this
<link href="theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
This works fine for files in the root folder (e.g. index.php), but when I use the same head.php in /top/index.php it does not work because the path is wrong.
Is it somehow possible to properly include the stylesheets etc. while having the scripts in different folders?
Greetz,
Just specify the root identifier (/) at the beginning of the href attribute:
<link href="/theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
Try this,
<link href="../theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
In /top/index.php
OR
<link href="<?php echo $_SERVER['DOCUMENT_ROOT'] ?>/theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
This code can be used in any page. The $_SERVER['DOCUMENT_ROOT'] points to the root.
Use '../' to reference the folder above and work your way back.
e.g
<link href="../theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
Possibly a duplicate question, but I have searched all over and haven't found a definitive answer. My CSS files aren't being included in my Bootstrap 3 code.
Here is a sample from a header include file that is at the top of each page. The include is done through PHP.
<title>Page Title</title>
<!-- METAs -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel = "stylesheet">
<link href="css/social-buttons.css" rel = "stylesheet">
<link href="css/font-awesome.css" rel = "stylesheet">
<link href="css/styles.css" rel = "stylesheet">
</head>
<body>
<div class = "navbar navbar-default navbar-static-top">
...
All these files are sourced within a CSS file and the file is accessible. I feel like everything is being included properly. Could it be an issue with including the code from a PHP file instead of raw code inline?
The folder structure (for core php project) must be
Main Folder
-- css
--all css files
--index.php / index.html
If your paths are correct, it really shouldn't be a problem.
Let's assume your directory is like so:
/includes
/header.php (calls the below css files)
/css
/style.css
/bootstrap.css
/others.css
/index.php
In your index file, your include would be:
<?php include ('includes/header.php');?>
In your header.php:
<link href="css/style.css" rel="stylesheet"> (etc, your other css files)