Including a CSS file in a PHP file that is included in a PHP file

Question

I have a php file that doesn't (for now) use any php code, that holds code for the header and main menu that will be used across all pages. The CSS file has no effect, even though I've created a style class for h1. The text "TEST" shows up, but the style is not applied. How do I properly include the CSS file?

mainMenu.php

<!--This code is included within the <head> of each page, and the stylesheet for the header and main menu are included here-->
<link href="styles/headerMenu.css" ref="stylesheet" type="text/css">

<!--Header and menu code-->
<div>
    <h1>TEST</h1>
</div>

index.php

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>untitled</title>
    <?php include ('./includes/mainMenu.php') ?>
</head>

<body>
</body>

</html>

and styles/headerMenu.css is relative to index.php ? The path is correct ? Also you are including in head section .. — Mihai Iorga
– Mihai Iorga, Commented Oct 26, 2012 at 10:19
Your are shoving div tags into the head tag there, also are you sure it is loading the CSS? Check f12 in your browser. Also check that you have applicable rules in your css — Sammaye
– Sammaye, Commented Oct 26, 2012 at 10:20
Use a browser debugger to verify the stylesheet is loaded - as pointed out above - this is 99% a problem with the path — Manse
– Manse, Commented Oct 26, 2012 at 10:20
you should use absolute path for the css file.. /styles/headerMenu.css — Mihai Matei
– Mihai Matei, Commented Oct 26, 2012 at 10:21
What are you trying to do? If mainMenu.php is itself a full html file, how are you trying to include it in the head of other html/php file. Do check your use case first... — mtk
– mtk, Commented Oct 26, 2012 at 10:23

hakre · Accepted Answer · 2012-10-26 10:50:07Z

1

The CSS file is not found. Double check the link and correct it:

<link href="menu.css" rel="stylesheet" type="text/css">
                        ^- REL not REF

Also to prevent additional problems, remove the start and end tags of <head> and <body> from the code. The way you output the HTML elements, you would create wrong HTML if you keep those tags. Remove them and your page will be valid HTML again.

index.php:

<!DOCTYPE html>
<html>    

    <meta charset="utf-8" />
    <title>untitled</title>
    <?php include ('menu.php') ?>    

</html>

Valid HTML has the benefit that you can run it through a validator to spot errors early.

edited Oct 26, 2012 at 10:50

answered Oct 26, 2012 at 10:24

hakre

200k55 gold badges454 silver badges865 bronze badges

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

Comments

DannyTheDev · Accepted Answer · 2012-10-26 10:20:48Z

1

I think it may be because you have got your menu appearing inside your <head> tag.

The CSS needs to go inbetween the <head> and </head> but the rest needs to be inside the <body> tag

answered Oct 26, 2012 at 10:20

DannyTheDev

4,1732 gold badges24 silver badges36 bronze badges

5 Comments

hakre Over a year ago

The browswer knows that the <div> belongs into <body> only and will move it there.

ShrimpCrackers Over a year ago

hakre, that is my newbie mistake. I thought div was okay in the head.

hakre Over a year ago

@ShrimpCrackers: Well, I would not say it's a mistake of you, because you are right: The div should not be placed into the <head> section in the first place. It's just with this case, that the browser will correct the mistake.

DannyTheDev Over a year ago

@hakre just because the browser knows doesn't mean it should not be amended. How can you expect to debug something if not everything is in the correct place to start with? If ShrimpCrackers is learning HTML/PHP, he should learn properly.. not a "ah its ok the browser will fix it".

hakre Over a year ago

@DannyHearnah: Sure, no objection to that. But for learning it's also important (or at least good) to understand the exact cause of a problem. For the standards, please see as well: stackoverflow.com/questions/5641997/…

Svetoslav · Accepted Answer · 2012-10-26 10:44:04Z

1

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

This must be at <HEAD></HEAD>

<div>
    <h1>TEST</h1>
</div>

This must be at <BODY></BODY>

You have to separate this file into 2 files and include them in Head and in Body..

edited Oct 26, 2012 at 10:44

answered Oct 26, 2012 at 10:22

Svetoslav

4,6862 gold badges30 silver badges43 bronze badges

8 Comments

hakre Over a year ago

Thought so as well, but then saw that it is inside the head.

Svetoslav Over a year ago

currently you put both link and div inside the head and THIS is your mistake.. head is for style links and body is for all other html data.

hakre Over a year ago

That is no problem at all, the browser knows that <div> can not appear in <head> and moves it into the <body> automatically. The <link> is already within the <head> section, so this even if not "correct" is actually "not wrong" and not an issue.

Svetoslav Over a year ago

Its wrong programming if you do mistakes and don't care about them.. Such code cant be valid.. and when you dont have valid code you dont know what will happen..

hakre Over a year ago

If you would have read my earlier comment, you would have seen that we share a lot here. I also edited my answer and gave an example how to make the script outputting valid HTML.

|

Gaurav · Accepted Answer · 2012-10-26 10:53:21Z

0

Don't include your HTML code in HEAD part. Only include CSS and JavaScript files in HEAD section. and you need to prefix the css or images path in some php file.
E.g.
create new php file with name "conn_path.php"

<?php
define('SITE_PATH',$_SERVER['DOCUMENT_ROOT'].'siteName/');
define('SITE_HTTP_PATH','http://localhost/'siteName/');
define('CSS_PATH','http://localhost/siteName/styles/');
define('IMAGE_PATH','http://localhost/siteName/images/');
?>

And then you path will be like below:- mainMenu.php

<?php include "conn_path.php" ?>
<link href="<?php echo CSS_PATH ;?>headerMenu.css" rel="stylesheet" type="text/css">

It will help you in whole project…

answered Oct 26, 2012 at 10:53

Gaurav

3414 silver badges18 bronze badges

Comments

paulodiovani · Accepted Answer · 2012-10-26 11:33:00Z

0

Create a template file, with your essential (and re-used) html. Also with <html>, <head> and <body> tags and anything you must have in all pages – As your stylesheets and menu.

Then add a content section with a single variable.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>untitled</title>
    <link href="styles/headerMenu.css" rel="stylesheet" type="text/css">
</head>

<body>
    <!--Header and menu code-->
    <div>
        <h1>TEST</h1>
    </div>

    <?php echo $page_content; ?>
</body>

</html>

This way, any page content shoud be assigned to $page_content instead of echoed.

answered Oct 26, 2012 at 11:33

paulodiovani

1,3252 gold badges16 silver badges35 bronze badges

Collectives™ on Stack Overflow

Including a CSS file in a PHP file that is included in a PHP file

5 Answers 5

Comments

5 Comments

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related