CODEWITHSUNDEEP
phphtmlcss
maxichrome
maxichrome

Reputation: 69

'include' does not self-contain styling

I'm trying to set up a universal navigation bar. I'm using include to import menu.php into index.php. When I do, it works fine; however, when I add something after the menu.php include, the menu's CSS rules carries on.

index.php

<!DOCTYPE HTML>
<html>
<head>
    <link rel=stylesheet href="css/style.css" />
    <title>Home | Website</title>
</head>
<body>
    <?php include 'menu.php'; ?>
    <p>Test</p>
</body>
</html>

menu.php

<head>
    <title>Menu | Website</title>
    <style>
        // menu-only styles...
    </style>
</head>
<body>
    <a href="/">Home</a>
</body>
<?php return; ?>

Upvotes: 0

Views: 96

Answers (3)

Abhishek Panda
Abhishek Panda

Reputation: 30

You are almost a bit closer to what you code. A HTML page can have only one html,head,title,body tag.

Just remove these html,head,title,body tags from menu.php

index.html

<!DOCTYPE HTML>
<html>
  <head>
     <link rel=stylesheet href="css/style.css" />
     <title>Dare Network | Home</title>
  </head>
  <body>
    <?php include 'menu.php'; ?>
    <p>Test
  </body>
</html>

style.css

html,body {
    padding: 0;
    margin: 0;
    background-color: #777777;
}

menu.php

<style>
    body {
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: #7786ff;
        text-align: center;
    }

    a {
        transition: background-color .25s ease-in-out;
        transition: padding-bottom .25s ease-in-out;
        background-color: #b20000;
        color: #ffffff;
        text-decoration: none;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 10px;
    }

    a:hover {
        background-color: #cc0000;
        padding-bottom: 10px;
    }

</style>

<a href="/">Home</a>

<?php return; ?>

Upvotes: 0

Ryan Tuosto
Ryan Tuosto

Reputation: 1951

This is not a PHP issue

Your CSS in menu.php comes later in the DOM than your actual stylesheet and therefore is being overwritten. Either scope your menu.php styles with some containing element or put your menu CSS code earlier in the DOM (like before style.css)

Upvotes: 0

Jonathan
Jonathan

Reputation: 6537

You're essentially including an HTML page within an HTML page doing it your way.

To get your CSS to target only your menu, keep it in your style.css file, but make your div have a "menu" class.

Something like this should do what you're looking for, I believe.

index.html

<!DOCTYPE HTML>
<html>
<head>
  <link rel=stylesheet href="css/style.css" />
  <title>Dare Network | Home</title>
</head>
<body>
  <?php include 'menu.php'; ?>
  <p>Test</p>
</body>
</html>

style.css

html,body {
  padding: 0;
  margin: 0;
  background-color: #777777;
}

.menu {
  /* padding: top&&bottom left&&right; */
  padding:10px 0;
  background-color: #7786ff;
  text-align: center;
}

.menu a {
  /* merge transitions into one line to make both functional */
  transition: background-color .25s ease-in-out, padding-bottom .25s ease-in-out;
  background-color: #b20000;
  color: #ffffff;
  text-decoration: none;
  /* padding:top right bottom left */
  padding:10px 10px 5px 10px;
}

.menu a:hover {
  background-color: #cc0000;
  padding-bottom: 10px;
}

menu.php

<div class="menu">
  <a href="/">Home</a>
</div>

Upvotes: 2

Related Questions