including css in php from header

Question

I have a header file that is linked to a css file. When I run the header file it displays exactly as I want. I therefore know that the css and header file are working. When I include the header in my index.php the css is ignored and the header displays incorrectly.

In the header file I import the css as:

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

and in index.php I import the header as:

<?php include("header/header.php"); ?>

Any ideas what I need to do so that the css is also included so that the page will display correctly? My header.php is inside a header folder, which also includes the css folder.

It sounds like you need to include header/css/style.css since that is the relative location from the index.php page. — kainaw
– kainaw, Commented Feb 16, 2016 at 16:38
As @kainaw points out, when you include, your path changes to header/css/style.css. You probably want to either change the path to the full, absolute url, or else change it to be based on the relative root: /css/style.css — random_user_name
– random_user_name, Commented Feb 16, 2016 at 16:40

CodeGodie · Accepted Answer · 2016-02-16 16:56:47Z

4

I would define a constant BASE_URL and use that in your template header as such:

Example file structure:

|--- css
|    |--- main.css
|
|--- templates
|    |--- footer.php
|    |--- header.php
|
|--- index.php

index.php

<?php
define('BASE_URL', $_SERVER['SERVER_NAME'] . "/");
include 'templates/header.php';
?>

My content

<?php
include "templates/footer.php";
?>

header.php

<!DOCTYPE html>
<html>
<head>
    <link href="<?= BASE_URL ?>css/main.css" type="text/css" rel="stylesheet">
</head>
<body>

footer.php

</body>
</html>

answered Feb 16, 2016 at 16:56

CodeGodie

12.2k6 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Flash · Accepted Answer · 2016-02-16 16:43:15Z

0

I had the same problem and i do not know what the language makers did. If you want to use a header with css on an index.php or another file you will have to make sure that the header and that file are in the same directory and NOT the header in a subdirectory. With this you can at least work until you find a better answer

include('header.php'); //this works even with the css in it
include('header/header.php'); // this does not work when you have a css file in it

answered Feb 16, 2016 at 16:43

Flash

1,12514 silver badges17 bronze badges

Comments

David Wilkinson · Accepted Answer · 2016-02-16 16:54:22Z

Without seeing your project tree, etc it's difficult to pinpoint exactly the issue. From your question though I gather the header.php file is loading fine, but the CSS file you're trying to load isn't.

<?php include("header/header.php"); ?>

As above, when the header.php file is loaded, the browser is looking for the style.css file in the header/css/ folder, which probably doesn't exist.

You're then within the header folder of your site. Yet I'm guessing the css folder is located at one level above? In which case, I'd bet money on you needing to go back a level as follows within your header.php file:

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

If the css folder is located one level up further, you could just go up another level:

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

Failing that, you could revert back to the root level:

<link rel="stylesheet" href="/path/to/css/style.css">

Javi Montañez · Accepted Answer · 2016-02-16 17:15:34Z

there are two possible solutions.

The firts one, it is possible that in your header.php you put the link tag without echo:

<?php <link  rel = "stylesheet"  href = "css / style.css" > ¿>

The correct form is:

<?php echo "<link  rel = \"stylesheet\"  href = \"css / style.css\" > ?>

The second one, the css path is wrong. It is possible that you put the css file in the folder css, this folder is in the header folder. When you include the header.php in index.php, the browser look for css style sheet in css/style.css ,which is in the header folder, the correct path is header/css/style.css

enter image description here

You must change:

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

To:

Birendra Gurung · Accepted Answer · 2016-02-16 17:21:58Z

0

function base_url() {
    $hostName = $_SERVER['HTTP_HOST']; 

    $protocol = strtolower(substr($_SERVER["SERVER_PROTOCOL"],0,5))=='https://'?'https://':'http://';

    return $protocol.$hostName.'/';
    //Or return $protocol.$hostName.'/ your project folder'; -> if you are working on localhost
}

Call this function to get the base url of your site.

Now for defining location of each css or other assets, you may use this function.

<link rel="stylesheet" href="<?php echo base_url(); ?>path/to/style.css">

And remember to include the file containing the function base_url() in each file where you need to use this function.

edited Feb 16, 2016 at 17:21

answered Feb 16, 2016 at 16:59

Birendra Gurung

2,2632 gold badges19 silver badges29 bronze badges

Collectives™ on Stack Overflow

including css in php from header

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related