Jump to content

[SOLVED] php inlcude


tushar707

Recommended Posts

basically I have a simple css menu based of images in a separate php file.  I want to do a php include command on my website.  is this possible?  I want to do a php include command on the home page and every other page on my website for the menu.  I am running a static website.  I tried this:

 

<?php include("menu.html"); ?>

 

but nothing shows up.

Link to comment
Share on other sites

I have a Stupid Question .... do your pages your including this in all end in .php??

 

If yes, then

<?php include("menu.html"); ?>

should work

 

You have to be aware of your directory structure. if your trying to include into /folder1/folder2/file.php and your menu.php file is in /menu.html

 

You would have to use

<?php include("../../menu.html"); ?>

 

 

Link to comment
Share on other sites

also one more thing. I will also be doing an include command for the content.  Is it possible somehow that when I click a link on my css menu, it just changes the content and I dont have to reload the page?  I am new to php.  but found the include command online which I see as very very useful.  any help will be appreciated a lot.

Link to comment
Share on other sites

Save menu.html as menu.php (you don't need to change anything in the code, just have HTML in the PHP file.

 

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page Title</title>
</head>

<body>
<?php include("menu.php"); ?>
<!-- Rest of code -->
</body>
</html>

 

Sample menu.php file:

 

<div id="menu"><a href="index.php">Home</a> | <a href="contact.php">Contact</a></div>

 

Output:

 

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page Title</title>
</head>

<body>
<div id="menu"><a href="index.php">Home</a> | <a href="contact.php">Contact</a></div>
<!-- Rest of code -->
</body>
</html>

Link to comment
Share on other sites

Having a page display 'current' data depending on the users actions can be done a few ways.  Some ways people will tell you not to go with (for accessibility reasons) and others will always be winners.

 

You could load your new pages in different frames, iframes, divs, layers etc.  You could link to another include within the same file.

 

Try looking these things up on google.

 

:)

Link to comment
Share on other sites

If I were you I'd go for <divs> with simple JavaScript to edit the content of them. Frames are too old in my opinion. This is what I would do:

 

Menu

 

<a href="#" onclick="onclick="document.getElementById('content').innerHTML = 'This is the homepage.';">Home</a> | <a href="#" onclick="onclick="document.getElementById('content').innerHTML = 'This is the contact page.';">Contect</a>

 

Where you want the main content to be displayed

 

<div id="content" name="content">Default value</div>

Link to comment
Share on other sites

Here is my menu.  thanks for all the help!!!  My menu isn't completely done yet, as I have to change the some of the buttons.  but I can do that later right?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Suckerfish Dropdowns - Vertical</title>

<style type="text/css">

 

body {

font-family: VladimirScrD;

font-size: 24px;

}

 

#nav, #nav ul { /* all lists */

padding: 0;

margin: 0;

list-style: none;

float : left;

width : 149px;

}

 

#nav li { /* all list items */

position : relative;

float : left;

line-height : 29px;

margin-bottom : -1px;

width: 144px;

}

 

#nav li ul { /* second-level lists */

position : absolute;

left: -999em;

margin-left : 144px;

margin-top : -1.20em;

}

 

#nav li ul ul { /* third-and-above-level lists */

left: -999em;

margin-top : -29px;

}

 

#nav li a {

width: 5em;

w\idth : 5em;

display : block;

color : #1463a5;

font-weight : 300;

text-decoration : none;

border : none;

background-image: url(images/button.jpg);

padding-top: 0;

padding-right: 0em;

padding-bottom: 0;

padding-left: 1em;

}

 

#nav li a:hover {

color : white;

background : url(images/button_rollover.jpg);

}

 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

 

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */

left: auto;

}

 

#content {

margin-left : 6em;

}

    </style>

 

<script type="text/javascript"><!--//--><![CDATA[//><!--

 

sfHover = function() {

var sfEls = document.getElementById("nav").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls.onmouseover=function() {

this.className+=" sfhover";

}

sfEls.onmouseout=function() {

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

}

}

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

 

//--><!]]></script>

 

</head>

<body>

<ul id="nav">

 

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

  </li>

 

<li><a href="#">Our Programs</a>

 

<ul>

<li><a href="#">Climbing perches</a></li>

<li><a href="#">Labyrinthfishes</a></li>

<li><a href="#">Kissing gouramis</a></li>

<li><a href="#">Pike-heads</a></li>

<li><a href="#">Giant gouramis</a></li>

 

</ul>

</li>

 

  <li><a href="#">Resources</a>

  <ul>

  <li><a href="#">Burrowing gobies</a></li>

  <li><a href="#">Dartfishes</a></li>

  <li><a href="#">Eellike gobies</a></li>

  <li><a href="#">Gobies</a></li>

 

  <li><a href="#">Loach gobies</a></li>

  <li><a href="#">Odontobutidae</a></li>

  <li><a href="#">Sandfishes</a></li>

  <li><a href="#">Schindleriidae</a></li>

  <li><a href="#">Sleepers</a></li>

  <li><a href="#">Xenisthmid</a></li>

  </ul>

  </li>

<li><a href="#">Events</a>

  <ul>

  <li><a href="#">Burrowing gobies</a></li>

  <li><a href="#">Dartfishes</a></li>

  <li><a href="#">Eellike gobies</a></li>

  <li><a href="#">Gobies</a></li>

 

  <li><a href="#">Loach gobies</a></li>

  <li><a href="#">Odontobutidae</a></li>

  <li><a href="#">Sandfishes</a></li>

  <li><a href="#">Schindleriidae</a></li>

  <li><a href="#">Sleepers</a></li>

  <li><a href="#">Xenisthmid</a></li>

  </ul>

  </li>

  <li><a href="#">Testimonials</a>

  <ul>

  <li><a href="#">Burrowing gobies</a></li>

  <li><a href="#">Dartfishes</a></li>

  <li><a href="#">Eellike gobies</a></li>

  <li><a href="#">Gobies</a></li>

 

  <li><a href="#">Loach gobies</a></li>

  <li><a href="#">Odontobutidae</a></li>

  <li><a href="#">Sandfishes</a></li>

  <li><a href="#">Schindleriidae</a></li>

  <li><a href="#">Sleepers</a></li>

  <li><a href="#">Xenisthmid</a></li>

  </ul>

  </li>

  <li><a href="#">About Me </a>

  </li>

  <li><a href="#">Contact Us </a>

  <ul>

  <li><a href="#">Burrowing gobies</a></li>

  <li><a href="#">Dartfishes</a></li>

  <li><a href="#">Eellike gobies</a></li>

  <li><a href="#">Gobies</a></li>

 

  <li><a href="#">Loach gobies</a></li>

  <li><a href="#">Odontobutidae</a></li>

  <li><a href="#">Sandfishes</a></li>

  <li><a href="#">Schindleriidae</a></li>

  <li><a href="#">Sleepers</a></li>

  <li><a href="#">Xenisthmid</a></li>

  </ul>

  </li>

</ul>

 

 

 

</body>

</html>

 

Link to comment
Share on other sites

no.  I dont have the website up yet.  so I dont have it online. I am so confused now. :'(  I have edited it a little bit:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Suckerfish Dropdowns - Vertical</title>

<style type="text/css">

 

body {

font-family: VladimirScrD;

font-size: 24px;

}

 

#nav, #nav ul { /* all lists */

padding: 0;

margin: 0;

list-style: none;

float : left;

width : 149px;

}

 

#nav li { /* all list items */

position : relative;

float : left;

line-height : 29px;

margin-bottom : -1px;

width: 144px;

}

 

#nav li ul { /* second-level lists */

position : absolute;

left: -999em;

margin-left : 144px;

margin-top : -1.20em;

}

 

#nav li ul ul { /* third-and-above-level lists */

left: -999em;

margin-top : -29px;

}

 

#nav li a {

width: 5em;

w\idth : 5em;

display : block;

color : #1463a5;

font-weight : 300;

text-decoration : none;

border : none;

background-image: url(images/button.jpg);

padding-top: 0;

padding-right: 0em;

padding-bottom: 0;

padding-left: 1em;

}

 

#nav li a:hover {

color : white;

background : url(images/button_rollover.jpg);

}

 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

 

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */

left: auto;

}

 

#content {

margin-left : 6em;

}

    </style>

 

<script type="text/javascript"><!--//--><![CDATA[//><!--

 

sfHover = function() {

var sfEls = document.getElementById("nav").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls.onmouseover=function() {

this.className+=" sfhover";

}

sfEls.onmouseout=function() {

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

}

}

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

 

//--><!]]></script>

 

</head>

<body>

<ul id="nav">

 

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

  </li>

 

<li><a href="#">Our Programs</a>

 

<ul>

<li><a href="#">Climbing perches</a></li>

<li><a href="#">Labyrinthfishes</a></li>

<li><a href="#">Kissing gouramis</a></li>

<li><a href="#">Pike-heads</a></li>

<li><a href="#">Giant gouramis</a></li>

 

</ul>

</li>

 

  <li><a href="#">Resources</a>

  <ul>

  <li><a href="#">My Articles</a></li>

  <li><a href="#">Newsletters</a></li>

  <li><a href="#">Useful Links</a></li>

 

  </ul>

  </li>

<li><a href="#">Events</a>

  <ul>

  <li><a href="#">Burrowing gobies</a></li>

  <li><a href="#">Dartfishes</a></li>

  <li><a href="#">Eellike gobies</a></li>

  <li><a href="#">Gobies</a></li>

 

  </ul>

  </li>

  <li><a href="#">Testimonials</a></li>

  <li><a href="#">About Me </a></li>

  <li><a href="#">Contact Us </a> </li>

</ul>

 

 

 

<p> </p>

</body>

</html>

 

Link to comment
Share on other sites

well I have not put any links yet.  What I wan to do is have a php include for the menu on the index.  have it so when the someone clicks on a link, the content is the only that changes (towards the right of the menu).  I dont want to whole page to load again. I dont know how to do that so content is the only thing that loads again (Posted the question in the same post).  Do you know how to help me with both problems?

Link to comment
Share on other sites

index.php

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Page title</title>
   <style type="text/css">

   body {
   font-family: VladimirScrD;
   font-size: 24px;
   }
   
   #nav, #nav ul { /* all lists */
      padding: 0;
      margin: 0;
      list-style: none;
      float : left;
      width : 149px;
   }
   
   #nav li { /* all list items */
      position : relative;
      float : left;
      line-height : 29px;
      margin-bottom : -1px;
      width: 144px;
   }
   
   #nav li ul { /* second-level lists */
      position : absolute;
      left: -999em;
      margin-left : 144px;
      margin-top : -1.20em;
   }
   
   #nav li ul ul { /* third-and-above-level lists */
      left: -999em;
      margin-top : -29px;
   }
   
   #nav li a {
   width: 5em;
   w\idth : 5em;
   display : block;
   color : #1463a5;
   font-weight : 300;
   text-decoration : none;
   border : none;
   background-image: url(images/button.jpg);
   padding-top: 0;
   padding-right: 0em;
   padding-bottom: 0;
   padding-left: 1em;
   }
   
   #nav li a:hover {
      color : white;
      background : url(images/button_rollover.jpg);
   }
   
   #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
      left: -999em;
   }
   
   #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
      left: auto;
   }
   
   #content {
      margin-left : 6em;
   }
    </style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls.onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls.onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

</head>
<body>
<?php include("menu.php"); ?>

<div id="content" name="content">Default value</div>

</body>
</html>

 

menu.php

 

<ul id="nav">

   <li><a href="#" onclick="document.getElementById('content').innerHTML = 'This is the homepage.';">Home</a>
  </li>

   <li><a href="#" onclick="document.getElementById('content').innerHTML = 'This is the our programs page.';">Our Programs</a>

      <ul>
         <li><a href="#">Climbing perches</a></li>
         <li><a href="#">Labyrinthfishes</a></li>
         <li><a href="#">Kissing gouramis</a></li>
         <li><a href="#">Pike-heads</a></li>
         <li><a href="#">Giant gouramis</a></li>

      </ul>
   </li>

  <li><a href="#">Resources</a>
     <ul>
        <li><a href="#">My Articles</a></li>
        <li><a href="#">Newsletters</a></li>
        <li><a href="#">Useful Links</a></li>
       
     </ul>
  </li>
<li><a href="#">Events</a>
     <ul>
        <li><a href="#">Burrowing gobies</a></li>
        <li><a href="#">Dartfishes</a></li>
        <li><a href="#">Eellike gobies</a></li>
        <li><a href="#">Gobies</a></li>

     </ul>
  </li>
  <li><a href="#">Testimonials</a></li>
  <li><a href="#">About Me </a></li>
  <li><a href="#">Contact Us </a> </li>
</ul>

<p> </p>

 

Notes

 

Do all the links in menu.php like I have done the first two. In index.php the div there will contain the pages, you can style it as required. You will also have to upload your files or install PHP locally to test this.

 

Chigley :)

Link to comment
Share on other sites

thanks a lot for the help!  so this will solve both my problems?  Also I am a little confused by this "In index.php the div there will contain the pages, you can style it as required. You will also have to upload your files or install PHP locally to test this."

 

Like how do i add the content so it is the only thing that will change when i click on a link.  I am sorry if i sound stupid.

Link to comment
Share on other sites

so I can type in anything there?  anything in html and etc?  that is so cool!  also can i delete "default value" from "<div id="content" name="content">Default value</div>"

 

one last thing.  because you split the css from the links, when i do php include will the links know that a css is attached to it?

 

So it doesn't show up.  you are awesome. 

Link to comment
Share on other sites

one last thing.  because you split the css from the links, when i do php include will the links know that a css is attached to it?  and i can delete "default value" from the div code so it doesn't show up?  Lastly, on index.php I have template.  can I just save that as php instead of html and everything will flow fine?

Link to comment
Share on other sites

Yes you can get rid of the default value. In your template, put <div id="content" name="content"></div> where you want the content to be displayed. The page can be left as .html. The CSS is fine, and your menu will work perfectly :)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.