CODEWITHSUNDEEP
phphtmlcss
Mazzy
Mazzy

Reputation: 14209

Load CSS file from a header used in many pages

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

Upvotes: 2

Views: 4877

Answers (4)

Story Teller
Story Teller

Reputation: 427

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

<a href="contact.html">Contact</a>

Upvotes: 4

Rich
Rich

Reputation: 191

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.

Upvotes: 3

Canute Bigler
Canute Bigler

Reputation: 220

Change your stylesheet href to href="/css/style.css"

Upvotes: 0

konsolenfreddy
konsolenfreddy

Reputation: 9671

Use an absolute path:

<link rel="stylesheet" href="/css/style.css" type="text/css">

(Note the slash before the css directory)

Upvotes: 4

Related Questions