?
Solved

CSS background does not work when I include header.php

Posted on 2011-02-14
7
Medium Priority
?
322 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

800 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