CODEWITHSUNDEEP
phphtmlcss
ShrimpCrackers
ShrimpCrackers

Reputation: 4532

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

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>

Upvotes: 0

Views: 415

Answers (5)

paulodiovani
paulodiovani

Reputation: 1295

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.

Upvotes: 0

Gaurav
Gaurav

Reputation: 341

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…

Upvotes: 0

hakre
hakre

Reputation: 197624

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.

Upvotes: 1

Svetoslav
Svetoslav

Reputation: 4676

<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..

Upvotes: 1

DannyTheDev
DannyTheDev

Reputation: 4173

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

Upvotes: 1

Related Questions