I recently asked a question about my php includes and received the answer. Now that the include accesses the correct file, my html/css/javascript web pages show some hope. The only issue is that the php includes of the pages have this look:
Instead of this:
Is there a way for the php includes to access the css files? My current code for one page that contains the includes is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="main.js"></script>
<title> Water Polo, The Best Sport</title>
</head>
<body>
<div class="wrapper">
<?php
include'../includes/header.php';
?>
<?php
include'../includes/navbar.php';
?>
<div class= "content">
</div>
<?php
include'../includes/footer.php';
?>
</div>
</body>
</html>
Header.php
<?php echo'<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> Water Polo!</h2></div>';>
To develop the website I am currently using MAMP and running the code which is in a folder by putting it in htdocs.
I took the header out of the php include and made the css file work with the document, but one thing remains the same. The code that I included in the document via php does not take on the effects of the css document, but the header, which now is out of the include and is written write in the document works. Is there a way to allow the code which has been included via php to access the working css file? If it would facilitate the answering process, I'll post any necessary pictures. Just comment below.
You have correctly identified the problem, that the HTML cannot find the CSS. That is directly because of this tag:
<link rel="stylesheet" href="styles.css" type="text/css" />
Specifically, this part of the tag:
href="styles.css"
You have told your code to look for the styles.css file in the same directory as the index.php file. Is that correct?
Usually, the web site structure looks like this:
public_html
- css
- js
- includes
- img
Your website seems to be structured like this:
includes
public_html
Imagine yourself inside the index.php file. All files that are INCLUDEd become part of index.php, as if they were there originally. So, you are expecting to find the CSS file here (as per your <link rel="stylesheet" tag):
public_html/style.css
If they are really inside a CSS folder, then perhaps this will fix it:
<link rel="stylesheet" href="css/styles.css" type="text/css" />
Update:
No need to echo out your HTML in PHP, you can literally just do this:
header.php
<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> Water Polo!</h2>
</div>
If the other include files are similar, then it appears your rendered file will all be HTML. Therefore, the next step is: where is your style sheet? Try this. In the address bar of your browser, type:
localhost/styles.css
And see if your stylesheet appears. If not, try this:
localhost/css/styles.css
If the second one works, then change this:
<link rel="stylesheet" href="styles.css" type="text/css" />
to this:
<link rel="stylesheet" href="css/styles.css" type="text/css" />
Note: I might not have your path structure correct. Amend as required.
Short answer = no.
You may want to look into using SASS. Besides minifying the css files, you can also set it up so the main (in your case styles.css) pull from several SASS files. For example you could have the following SASS files: main.scss, header.scss, navbar.scss, & footer.scss. If your IDE supports SASS, when you save any one of these files it can automatically compile all four into your styles.css file. Then all you need is to reference that one file and you are set.
http://thesassway.com/beginner/how-to-structure-a-sass-project
Related
I want to separate my code to make it clearer. To do so, instead of having one big php file I spare them and keep one "main" file where I include the others when I need. The problem is that CSS only apply to the "main" file, but not to included files.
I'm pretty sure this is not a path issue, for I'm working with every files in the same folder (I know it's not the best way to work, but so far I only have few files so it's not a big deal). I have double checked eventual writing mistakes.
Here is my "main" php file :
<!DOCTYPE html>
<html>
<head>
<title>A very nice title</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<meta charset="utf-8" />
</head>
<body>
<?php include("file2.php"); ?>
</body>
and here is my "file2.php" file :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<meta charset="utf-8" />
</head>
<div class="beer">
<img src="simple_beer.png" alt="beer picture"/>
<div class="description>
<p> a simple text </p>
<form id="add" action="[nothing interesting]">
<input type="number>
<input type="submit" value="add to card">
</form>
</div>
</div>
So i'm using the same CSS files for both php files. But it's not working on the file2.php when I have a look at it (I'm working on a local host). I've tried to delete cache from my browser (firefox). If you're wondering why I'm working on php files instead of HTML, it's simply because I intend to add php code later.
I have been looking for a solution for almost two hours, nothing seems to work. Thanks in advance !
Include everything header-related inside main.php file, remove head section from file2.php and then include file2.php in the body section of main.php. When you include that file, it will get everything that is above. That means whatever you have in main.php before include() function, will be accessible in called file (thanks to that you can link everything once and have it available in all called files).
Include() brings full code structure from the called file which you do not need (talking about head tag) if main file will hold everything that you need inside tag.
I wonder whether anyone could help me resolve some problems I'm having in creating a website using HTML, CSS...and PHP for the first time. (My previous attempts at web design were only in HTML and CSS).
The problem at present is that my home-page (index.php) somehow isn't 'seeing' my stylesheet.css.
The code for the index.php is basically as follows :
<?php
$page_title='Home';
[php-code here, to call in include1.php.....Please see below for details]
?>
<div class="copy">
[page content here, in html]
</div>
<?php
[php-code here, to call in include2.php.....Please see below for details]
?>
My folder structure is :
web
css
stylesheet.css
images
logo.png
includes
include1.php
include2.php
index.php
In attempting to call in include1.php (containing doc type declaration, and Head section including reference to stylesheet.css), I've tried the following (inserted between <?php and ?>, as shown above), all without success :
$pathtoinclude1 = $_SERVER]'DOCUMENT_ROOT'];
$pathtoinclude1 .= "/includes/include1.php";
include_once($pathtoinclude1);
and
include('/includes/include1.php')
In include1.php, my reference to the stylesheet.css is :
<link rel="stylesheet" href="../css/stylesheet.css" media="Screen" type="text/css"/>
When I preview the home-page, all I get is the text in default font (Times New Roman?). None of the styling via CSS is being applied.
Can anyone give me some pointers as to what I'm doing wrong?
If that first answer doesn't work, try replacing
<link rel="stylesheet" href="../css/stylesheet.css" media="Screen" type="text/css">
with <?php include 'style.php'?>
And then in the style.php file include the <style> tags and then add the css regularly.
Since you say you are using php for the first time, make sure you have the correct html declaration.
although you have already worked with html,css just a reminder:
<?php
$page_title='Home';
[php-code here, to call in include1.php.....Please see below for details]
?>
<!DOCTYPE html>
<html>
<head>
<!-- MAKE SURE YOU'RE INCLUDING THE
EXTERNAL CSS FILE HERE BUT NOT TO INCLUDE YOUR PHP INCLUDES!
WHICH ACCORDING TO YOUR FILE STRUCTURE SHOULD BE -->
<link rel="stylesheet"
href="../css/stylesheet.css"
media="Screen"
type="text/css"/>
</head>
<body>
<div class="copy">
[page content here, in html]
</div>
<?php
[php-code here, to call in include2.php.....Please see below for details]
?>
</body>
</html>
When you include() the file from index.php, the path looks like:
<link rel="stylesheet" href="../css/stylesheet.css" media="Screen" type="text/css"/>
This path is going one directory back from index.php which is not a valid path. Your path in include1.php should look like this when you include it in index.php:
<link rel="stylesheet" href="css/stylesheet.css" media="Screen" type="text/css">
Also, if CSS includes properly but styles still do not show up, try removing browser cache.
Try this. It worked for me
Let's assume that you CSS file is named 'css.css'
And it is located in the same directory with you home page.
Just add this at the head tag:
Head
Style
<?php include('css.css') ?>
style
head
Don't forget to add corresponding tags
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
I have top section and footage section common on all pages of my website. I have css classes defined for these sections. What I want to do is to create common file of classes of these two sections and use it on every page, so that if I want to edit something in this section, I have to do it at one place only.
I have different css for middle section of each web page. So if I want create one common css file for top and bottom section, I have to have two css files for one web page. So my real question is can I have two css files for one web page? If yes, how to include and manage them? If no, is there any way to achieve my purpose?
And the best solution will be if I don't need to change html of each page also. If I can create an html page which has top and bottom section. And use this html page on every web page. It will be very useful, as it will save many edits, if I want to change something.
It is not a problem to link two different style sheets:
<link rel="stylesheet" type="text/css" href="commonStyles.css" />
<link rel="stylesheet" type="text/css" href="specificAboutUsPageStyle.css" />
You can have multiple CSS files for a web page, like so:
<link rel="stylesheet" type="text/css" href="header_footer.css"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
Within the header_footer.css, define your styles, for header and footer.
Since your using php (according to your tags) as your scripting language you can use php includes to create your header, main content and footer.
Page: MainContent.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="headerStyles.css" />
<link rel="stylesheet" type="text/css" href="mainStyles.css" />
<link rel="stylesheet" type="text/css" href="footerStyles.css" />
</head>
<body>
<?php include("header.php"); ?>
<p>Main Content</p>
<?php include("footer.php"); ?>
</body>
</html>
Your header.php and footer.php then contain your code for those respective pages.
Personally I wouldn't recommend separate style sheets as it will increase your page load time because the client needs to make separate calls to retrieve these files. I'm sure you have common styles and creating one stylesheet will be more efficient to maintain.
I intent to create a template PHP file, this template will only serve the design, not the content. The purpose is to decrease the development time in a sense that when creating a new PHP file or new module, I can only need to concentrate on the main function of that PHP file not the design. Once I created the new file using the template, it should be able to display the consistent design and serve its specific function.
The issue is that I am not sure on how to make the design of the template works and applied to all of the new files created regardless of the location (as long as it is within the root directory).
As an example:
root directory (www.example.com): /
homepage (www.example.com/index.php): /index.php
css file: /style/style.css
template file: /template.php
newly created file (www.example.com/subone/find/css/file.php): /subone/find/css/file.php
another newly created file (www.example.com/subtwo/locate/css.php): /subtwo/locate/css.php
Content of the homepage (which is created base on the template.php, but the CSS file location is hard coded):
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">logo and login form goes here
<div class="nav"> navigation goes here;</div>
</div>
<div id="main">main content goes here;</div>
<div id="footer">footer goes here; </div>
</body>
</html>
but, when I created a new file, /subone/find/css/file.php
the location of the css must be changed and specified manually, like this:
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="../../../style/style.css" />
</head>
<body>
<div id="header">logo and login form goes here
<div class="nav"> navigation goes here</div>
</div>
<div id="main">main content goes here;</div>
<div id="footer">footer goes here;</div>
</body>
</html>
So, what I want to achieve is that, when creating a new file (/subone/find/css/file.php), I don't need to do anything, I can straight away concentrate on the main section:
<html>
<head>
<title>Testing</title>
...style.css is handled automatically
</head>
<body>
<div id="header">logo and login form goes here
<div class="nav"> navigation goes here</div>
</div>
<div id="main">main content goes here;
<?php
//I can continue to edit the file from this line onward
echo "I am concentrating on the main function of file.php right now!!";
?>
</div>
<div id="footer">footer goes here;</div>
</body>
</html>
example page can be seen at (only the desired design): neoborn.kodingen.com
I accept any answers as long as it can achieve my intention (template).
Thank you :)
Why don't you use absolute paths when referring to CSS files and other resources in your template file?
For example:
<link rel="stylesheet" type="text/css" href="/style/style.css" />
There are 2 options,
Use absolute paths for your css files <link rel=stylesheet href="/style/style.css">
Use HTML's <base> element to cause all relative paths on the page relate to it.
I would use a easy to install template engine. That will help speed up development and still give you the freedom to do whatever PHP you like.
Try http://www.raintpl.com/ that should be quick and easy for you to install and get back to coding the pages. If you include it in your PHP inc folder, it will be available for every PHP file you create. So you won't need to add an include line at the top of each PHP file.
Index.php
<?php define('BASE_URL', 'http://localhost'); ?>
Template.php
<link rel="stylsheet" type="text/css" href="<?php echo BASE_URL; ?>/style/style.css ?>" />