php 'include' errors in css

Tags: php html css
Question!

I am developing a website in php. I have a navigation.php page, a design.php page and a footer.php page. All the three pages have their own internal CSS. I am adding all the three pages in index.php using include command. Something like this:

index.php :

<?php
include 'navigation.php';
include 'design.php';
include 'footer.php';
?> 

But as some of the html elements in navigation.php and footer.php are identical like unordered lists ul or li but their CSS is different in both the files. But when I open index.php page some of the parts of footer.php get messed up due to different CSS for same html elements in navigation.php. But when I open them separately no problem is there.

Pages are like this:

navigation.php:

<style>
....css...
</style>
<body>
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Log In</li>
</ul>
</body>

footer.php

<style>
...css...
</style>
<body>
<ul>
<li>Privacy Policy</li>
<li>Report Bug</li>
</ul>
</body>

This is just sample code. How can I solve this problem?



Answers

It looks like you are redefining the same styles in your various php files. Try to set a class on the ul element and define your styles for ul, e.g. likle this

header.php

<style>
.header {
color: red;
}
</style>
<ul class="header">
<li>blabla</li>
<li>bla</li>
</ul>

footer.php

<style>
.footer {
color: blue;
}
</style>
<ul class="footer">
<li>aaa</li>
<li>bbb</li>
</ul>

You should also remove the <body> tags from the includes. You can have only one body tag in the html page.

By : Guenther


I dnt know what is inside your design.php but for index.php try this

  <?php include_once( 'header.php');?>
    <html lang="en">
       <head>
         <title>index.php</title>
       </head>

         <body>
           ..something.... 
         </body>
       <?php include_once('footer.php');?> 
     </html> 


You can do it like following.

$('.medium-item-price').contents().last()[0].textContent='100';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="medium-item-price">
  <span class="denominator">$</span>
  699.99
</div>

By : Azim


This video can help you solving your question :)
By: admin