For some reason my CSS is only working when inline. I'm somewhat new to web design and not really sure about how to track down why this is occurring. It's not like I can open the console to check for errors, so what kinds of things should I look for? I'm sorry I'm not being more specific, I'm just really not even sure what to do.
Say the url is "www.example.com/testing/3"
The page testing.php would load, call API.php and determine what to do when on page testing.php with vale 3. API.php would then call a function on testing.php to deal with whatever that function tells it to do. So basically it calls out, determines which function to handle the URL, then calls back in.
When I include the CSS in the head of testing.php it works. When I just have a link, it doesn't. All of the files are in the same folder and I'm developing on localhost, no files are admin-restricted: I'm the admin anyway so permission isn't an issue.
//test.css
P.special {
color:green;
border:solid red;
margin-top:85px;
}
Head of testing.php
<link a href="test.css" rel="stylesheet" type="text/css"/>
A function on testing.php
function view_event($event_id){
?>
<p class ="special">
//stuff here
</p>
<?
}
<link a href="test.css" rel="stylesheet" type="text/css"/>
would need to be changed to:
<link a href="/test.css" rel="stylesheet" type="text/css"/>
Using relative URLs will not work when you traverse into other directories. Setting it to an absolute URL with / will allow it to work anywhere on site.
You can check the generated page source in your browser and make sure the CSS link is valid and loads the intended CSS file.
Web Developer Tools built into your browser (or as plugins) are very helpful in debugging html, css and js. Get to know them well.
Related
I am having a problem learning how proper website structure should be. And by that I mean how to code the pages and how folder structure should be.
Currently I am navigating around my website using GET variables in PHP when you want go to another page, so I am always loading the index.php file. And I would load the page I wanted like so:
$page = "error";
if(isset($_GET["page"]) AND file_exists("pages/".$_GET["page"].".php")) {
$page = $_GET["page"];
} elseif(!isset($_GET["page"])) {
$page = "home";
}
And this:
<div id="page">
<?php
include("pages/".$page.".php");
?>
</div>
The reason I am doing this is because it makes making new pages a lot easier as I don't have to link style sheets and javascript in every file like so:
<head>
<title>
Website Name
</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="shortcut icon" href="favicon.png"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
</head>
There is a lot of problems doing it this way as URLs don't look normal ("?page=apanel/app") if I am trying to access a page from inside a folder inside the pages folder to prevent clutter.
Obviously this is not the only way to go about it and I can't find the proper way to do it because I'm sure websites don't link style sheets in every file as that would be very bad if you changed a file name or needed to add another file you would have to change it in every file.
If anyone could tell me how it is actually done or point me towards a tutorial that would be great.
Thanks for your time :)
I think this is a good starting point for you, you could look into how MVCs (Model/View/Controller) like Zend/CodeIgnitor/CakePHP/Symphony etc handle views and templates (I don't really have much experience with these so I can't say how they do it).
Regarding URL's you can use Apache's RewriteRule to clean them up, so you could redirect www.yoursite.com/abc to www.yoursite.com/index.php?page=abc, and your example about folders you could have a URL www.yoursite.com/somefolder/somepage redirect to www.yoursite.com/index.php?page=somefolder/somepage, or www.yoursite.com/index.php?page=somepage&folder=somefolder.
Where I work we use a custom MVC, in which we have a global header and footer file, containing all CSS/JS file links, and any HTML that will be on every page, and then we include separate files for individual pages, but rather that including PHP file, we include Smarty files to template our HTML.
I'm using a MVC model and I can invoke webpages with URLs like http://mywebsite.com/product/productid.html. My folder structure is the following:
views - the views folder
js - the javascript and jquery folder
css - the stylesheets folder
images - the images folder
In views folder are contained web pages used to show data to the users. They can include scripts, images and stylesheets. The following snippet is incorrect
<link rel="stylesheet" href="css/style.css" media="all" type='text/css' />
since the webpage is called with the URL above, and css can't be found with a relative path. To solve the problem, I have defined a DOMAIN variable in PHP and changed the code into
<link rel="stylesheet" href="<?php echo DOMAIN;?>css/style.css" media="all" type='text/css' />
This works, but forces me to add the <?php echo DOMAIN;?> snippet to each href and src attribute on each page. Is it possible to automate it? I've tought to use the :before selector but I don't have idea how to use it in this case.
Any ideas? Thanks in advance.
:before only applies to CSS, so that's not of use here.
There's really no way to do automatically add it in PHP that wouldn't be cpu-intensive, and/or require a significantly more complex setup than it sounds like you have right now. Using find-and-replace in your code editor is the best option.
Using <?= DOMAIN; ?> instead would be shorter, BTW. (See this question for more info)
I have a big prob. We have a site that was working just fine but I was doing some fine tuning and somewhere along the line i messed things up. possibly in the .htaccess file.
My problem is that my css style sheet doesn't load nor do my images. ahh! They are all there.
I emptied my .htaccess file and deleted my robots.txt just to eliminate any blocking but that didn't fix it.
I validated my css file with The W3C CSS Validation Service and it said:
file not found: http://easybuildingproducts.ca/www.easybuildingproducts.ca/style.css
I feel like it has something to do with the fact that the URL is duplicated. It does that now when i click a link to any of my pages. It should be either or not both those links together. Is it possible a google cached my .htaccess or robots.txt when there was a potential redirect error? Is there a loop happening somewhere?
I was in the midst of making a custom 404 error page when this all went down.
www.easybuildingproducts.ca
Easy fix
<link href="www.easybuildingproducts.castyles/inside.css" rel="stylesheet" type="text/css">
That needs to be either one of the following
<link href="/styles/inside.css" rel="stylesheet" type="text/css">
or
<link href="http://www.easybuildingproducts.ca/styles/inside.css" rel="stylesheet" type="text/css">
I looked at the actual website source to find this example. there are quite a lot like it
Change the href to "/style.css" instead of writing your full domain out. Do the same kind of thing for all other resources that failed to load, too.
This will fix your problem, and it will also make your markup compatible if you decide to migrate to a different dsomain name in the future.
Your resources aren't being loaded (css, js, jquery, etc). Take a look at the screenshot taken from my Chrome Dev Tools > Sources tab:
This is because of your resources' file paths. It is definitely not a good idea to reference all of your resources with "www." in the file path.
Change
<link href="www.easybuildingproducts.castyle.css" rel="stylesheet" type="text/css" />
into
<link href="/castyle.css" rel="stylesheet" type="text/css" />
I used to create a unique header and load it in all my pages like this.
<?php
require_once('include/_header.php');
?>
<div id="main">
<!-- My Page -->
</div>
<?
require_once('include/_footer.php');
?>
In my root folder I have a folder named css where I put all my css stylesheets
in the header I call <link rel="stylesheet" href="css/style.css" type="text/css">.
Now, suppose I have to create a subfolder inside my root and I create a web page into it. When I call my stylesheets from the header, the page doesn't show correctly, because I call the stylesheet in a wrong way. How can I call my stylesheet in a way so that it can always be reachable from any position?
Here is the schema:
css
-style.css
include
-_header.php
-_footer.php
folder
-mypage.php
Use an absolute path:
<link rel="stylesheet" href="/css/style.css" type="text/css">
(Note the slash before the css directory)
Let me offer a way to debug this particular issue and other CSS reference issues in the future. Open up your page and then activate your browser's developer tools. (CTRL+SHIFT+I in Chrome).
Go to the Elements tab. Navigate the DOM until you see the CSS Entry. The URL for the stylesheet will be a clickable hyperlink. Click it. See where the browser navigates you. this should give you an indication as to what the fix is. Maybe you are too deep in the folder structure, maybe you are too shallow. In any case, I solve 99% of my CSS reference issues this way.
You should a base URL in your HTML header
<base href="http://website.com/"/>
Then everything regardless will become as follows..
<link href="css/style.css" rel="stylesheet" type="text/css">
Down the track for your menus you and simply go
Contact
Change your stylesheet href to href="/css/style.css"
<?php
// This is index.php
ob_start();
include 'tem/u.html';
ob_end_flush();
?>
<html>
<!-- This is u.html -->
<link rel="stylesheet" href="style.css" media="screen" />
<body>
<p> abc </p>
</body>
</html>
Now my problem is when i run h.html -> Ok with style.
But when i run index.php -> Ok without style (because now the index.php include style.css, not tem/style.css)
Need a fix
If possible, refer to a domain relative path to the style.css, for example
<link rel="stylesheet" href="/style.css" media="screen" />
If that is not possible, you need to keep track on the page base in some way, which I cannot tell because I do not know enough about your application. But anyway, like
<link rel="stylesheet" href="<?php echo $pageBase; ?>/style.css" media="screen" />
where $pageBase is a variable containing the url to the root of your application.
I'm assuming that the tem directory is supposed to be for some sort of template, and so you don't want it to be directly exposed to the user; rather, you want to be able to include the files so that they're accessible via index.php, possibly with the option of later changing what files are included.
You could create another PHP file called style.php (in the root directory) which would include tem/style.css. You could do this for any other files that your templates used as well — the idea being that each PHP file in the root directory would correspond to a "role" in the template, not a particular template file, so that the template could later be changed without everything needing to be rewritten.
This might get a bit cumbersome if you had a lot of files required by your template, so it might be better to have a single script that could be instructed which file to load (through a $_GET variable). But in that case, you need to be very careful not to allow the user to specify arbitrary files. I'd suggest avoiding this approach until you're more proficient in PHP.
EDIT: On second thought, I'd suggest using a <base> tag in your template HTML file, as suggested in my comment on #gnud's answer.
This has nothing to do with PHP or include. This has to do with your browser, and how URLs are interpreted.
When your browser is pointed at http://xyz.abc/tem/h.html and asked to load "style.css", it tries to load http://xyz.abc/tem/style.css - this is known as a relative url, relative to the current document location.
When your browser is at http://xyz.abc/index.php and is asked to load the stylesheet in the same way, it tries http://xyz.abc/style.css. Maybe you see the problem?
As for a solution, you might use a domain-relative path for the stylesheet ("/tem/style.css").
just always use absolute path to your css file
<link rel="stylesheet" href="/tem/style.css" media="screen" />
that's all