Solved

CSS background does not work when I include header.php

Posted on 2011-02-14
7
316 Views
Last Modified: 2012-05-11
I have index.php that has an attached stylesheet. The css background works when its simply attached. It does not work when I include my php header.

Header.php is basically just a basic html header.

My CSS
body
{ 
background-image:url('images/bg.gif');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center; 
}

Open in new window

My Index.php
<?php include("header.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />

Open in new window


Should my header also have an attached style sheet?
0
Comment
Question by:cnl83
7 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34893906
what is in your header.php and how are you including it?

May be header.php styles are overriding the original ones in index.php
0
 
LVL 3

Expert Comment

by:wwwdeveloper2
ID: 34893945
Your header.php should be overriding your css file, since the header file is called before your css file.  The browser will listen to the last instructions it receives.

What I found interesting is that you said your hearder file was just a basic html page.  That caught my attention because you are calling it before your start your <html>

Do this.

1) make sure you header file doesn't have any <!DOCTYPE, <head> or <body> information in it.  Just make sure it has your html code you would typically see between the opening <body> and closing </body> tags.

2) In your php file, call your header file like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />

//close your head and open a body
</head>
<body>
//include your html header - make sure it doesn't head, html, or body tags since they are already declared here.  also make sure you are not calling other styles that are named the same as what you have in the css file linked above

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

//rest of your php/html page for index.php


//now close your body and html

</body>
</html>

Open in new window

0
 
LVL 3

Expert Comment

by:wwwdeveloper2
ID: 34893950
Sorry for re-post - I wish we could edit!  The first line in my previous suggestion should have read:

Your header.php should NOT be overriding your css file, since the header file is called before your css file.  The browser will listen to the last instructions it receives.
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

Author Comment

by:cnl83
ID: 34894187
I tried the above and it still does not work.

http://www.actionfx.net/rootandfruit/
http://www.actionfx.net/rootandfruit/header.php

Here is header code
<center>
<table width="1200" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="98" height="259">&nbsp;</td>
    <td width="990" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/headerPNG.png">
      <!--DWLayoutTable-->
      <tr>
        <td width="990" height="259">&nbsp;</td>
        </tr>
    </table></td>
    <td width="112">&nbsp;</td>
  </tr>
  <tr>
    <td height="39">&nbsp;</td>
    <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="990" height="39" valign="top"><div align="center"><img src="images/nav.gif" width="990" height="39" border="0" usemap="#Map" /></div></td>
        </tr>
      
    </table></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="827">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

<map name="Map" id="Map"><area shape="rect" coords="13,1,168,38" href="index.php" />
<area shape="rect" coords="169,1,315,36" href="about.php" />
<area shape="rect" coords="315,-13,469,35" href="products.php" />
<area shape="rect" coords="469,3,625,35" href="benefits.php" />
<area shape="rect" coords="626,3,786,35" href="locations.php" />
<area shape="rect" coords="788,0,976,34" href="contactus.php" />
</map>

Open in new window

0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 34894351
Hi I think you want to get result as your first link Now here is your code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Root &amp; Fruit Juice</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include "header.php";?>
<map name="Map" id="Map"><area shape="rect" coords="13,1,168,38" href="index.php" />
<area shape="rect" coords="169,1,315,36" href="about.php" />
<area shape="rect" coords="315,-13,469,35" href="products.php" />
<area shape="rect" coords="469,3,625,35" href="benefits.php" />
<area shape="rect" coords="626,3,786,35" href="locations.php" />
<area shape="rect" coords="788,0,976,34" href="contactus.php" />
</map></body>
</html>
<center>
<table width="1200" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="1200" height="1125">&nbsp;</td>
  </tr>
</table>

</body>
</html>

Open in new window

0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 34894360
Sorry There was a mistake again like </body> and </html> have been closed two times so now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Root &amp; Fruit Juice</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include "header.php";?>
<map name="Map" id="Map"><area shape="rect" coords="13,1,168,38" href="index.php" />
<area shape="rect" coords="169,1,315,36" href="about.php" />
<area shape="rect" coords="315,-13,469,35" href="products.php" />
<area shape="rect" coords="469,3,625,35" href="benefits.php" />
<area shape="rect" coords="626,3,786,35" href="locations.php" />
<area shape="rect" coords="788,0,976,34" href="contactus.php" />
</map>
<table width="1200" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="1200" height="1125">&nbsp;</td>
  </tr>
</table>

</body>
</html>

Open in new window

0
 
LVL 3

Accepted Solution

by:
wwwdeveloper2 earned 500 total points
ID: 34895986
If you look at your index.php in a browser and view source,  you will see that you have multiple html head, html, and body declarations!  As my first solution mentioned, this is probably why it is failing.

Are you sure your header.php code doesn't have html, head, and body tags in it?  In the code you posted, it looks like it doesn't.  But yet when it is rendered in a browser from your example link it looks like it does?  

Maybe you forgot to ftp the new header.php to your server after you made the changes?

Here is what I'm seeing rendered in my browser from the top of your index.php page.  Notice the redundant heads, html, and doctypes?


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Root &amp; Fruit Juice</title>
<link href="styles.css" rel="stylesheet" type="text/css" />

</head>

<body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />

</head>

<body><center>

Open in new window

0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question