Includes (With CSS)

[Jealy]

Hey everyone,

My issue is thus: Basically I have a page that is;

<? include "header.php"; ?>
<? switch ($HTTP_GET_VARS[page]) {
default:
include "home.php";
break;

case 'me':
include 'myself.php';
break;

case 'work':
include 'mywork.php';
break;

case 'stuff':
include 'stuff.php';
break;

case 'links':
include 'links.php';
break;

case 'contact':
include 'contact.php';
break;

}
?>
<? include "footer.php"; ?>
http://www.jealy.co.uk/index.php

Which works exactly how I want to on IE (with everything in the middle)
however when I check the same page on firefox, the "content" seems to have self aligned itself to the left. It does the same with this;

<? include "header.php"; ?>
<? include "home.php"; ?>
<? include "footer.php"; ?>
So it's not my page-swapping code.

I'm just totally stumped as to why firefox wants to put it over to the left, and IE makes it centered.

On the "content" pages (they are all the same at the moment) there is a table, which is aligned in the center.

Does anyone know why and/or how I can make it not do this?

Thanks in advance,

Jealy.

[jscheuer1]

This is a layout issue. An include doesn't do anything different because a different browser is viewing it, unless the way it was made would cause that anyway, even if it were a regular HTML page.

I see that your table - the one that is sliding over to the left in Firefox has the align="center" attribute. This attribute has been deprecated. I'm not sure if Firefox ever followed it in the way that IE does, at least not for tables, it certainly doesn't now. In any case, if you give your table a margin of 0 auto it will center in Firefox. Put this in your stylesheet:


table {
margin: 0 auto;
}

Or if that messes something else up, target the specific table or tables invloved for this style.

[Jealy]

Oh my, what a simple fix. Thank you!

[Jealy]

Ok I have come across another *problem*

Would it be possible to have a PHP include inside a DIV tag, so that I could define its width & height, etc?

Kind of like an iframe...

[jscheuer1]

I'm pretty sure you throw an include into any point on the page. The only restriction I can think of would be that the resulting HTML code be valid. Like I've often thrown an include that was a table row or two into a table. Since the resulting HTML code is still a valid table, it's fine. Like:


<table>
<tr><td>some stuff</td></tr>
<?php include 'some.htm' ?>
</table>

It's a little more complicated than that because what tr's (what page) gets included depends upon the date, but I think you get the idea. The important thing is that on 'some.htm' there are nothing other than valid tr's, no header info, etc. That way, after the server side import, the resulting code is valid.

[Jealy]

Hmmm, a table eh.

I'll have a go at that, thanks again, John.

[djr33]

The include tag ONLY puts the code of two php pages together.

You should think of it like a "DETOUR" sign-- you go for a while one way, start on the detour, finish the detour, then continue on the original path.

The steps are this:

1. The main php script runs until it hits an include.

2. The execution of the main php script PAUSES.

3. The include(PAGE) runs all the way through.

4. The main php script RESUMES.

(And for complex pages, you might have many layers like that.)

Thus if you have two pages like this:


NAME: 1.php
<?php
echo '1';
include('2.php');
echo '3';
?>

NAME: 2.php
<?php
echo '2';
?>

Then your output will be exactly '123', just like if you had the original code:

<?php
echo '1';
echo '2';
echo '3';
?>

That is: the include tag is ONLY used to separate a "single page" into many files. You can have a separate file for each part of the page, or maybe borrow one section into a lot of pages (like a menu).
It is helpful for organizing your code, but the resulting HTML is NOT AFFECTED, beyond being stored in different files and being combined by include().


So, any problems you have will be caused by one of two things:

1. The HTML is the problem, and you just need to adjust it, like you would with a page without includes.

2. Your organization is the problem-- ex. you forgot how the includes were layered and put something in the wrong order. Here the complication is that you must remember how the pages fit together and do it that way.


The easiest way to fix a problem like this is to just fix the html. Do this by viewing your page and choosing view> source. Then make a temporary page from that, fix the source code, and you will have found the problem.
Next, you will copy those same fixes into the original separate php files, now that you know what the problem is.

[Jealy]

Thanks for that post djr, was a big help!

I have put the include in a table, as you can see on my site (http://www.jealy.co.uk) if you have a look I have put my Twitter Widget on the left (which is part of the index.php - I may put that seperate and have it as an include), then the "content" on the right as a php include, so that when the page changes, the Twitter Widget will not be fully reloaded (just refreshes to see if any new "Twits", or whatever they call them, has come up).

Saving load time between pages.

Thanks again for all the help fellas, you're the best.

EDIT - Put the Twitter Widget in a seperate php and included it, works a treat. Nice tidy index, I love it!

[Jealy]

Come across another problem, this time to do with CSS! (Wont waste another thread)

As you will know, i'm doing php includes, however: Is it possible to have a seperate css sheet for a certain php include, as when I change the link attributes on one of my php includes, it changes it for the index.

I hope this makes sense!

You can see what I mean by checking my site (http://www.jealy.co.uk)and clicking Myself, this actually changes the look of the navigation links, as it loads the myself.php's stylesheet over the index's stylesheet.

[bluewalrus]

Whats it each include at the end of the page your code is not coded properly you have another pages full content coming in.


<div class="roundbottom"><img src="images/bottomleft.gif" alt=""
width="13" height="14" class="corner"
style="display: none"> </div>

</div>
</td>

</tr>
</table></div>
</body>
</html>
</td>
</tr>
</table>
HERE AND BELOW -----><!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>Jealy.co.uk</title>

<style type="text/css">
<!--
body {
background-color: #444;
background-image: url(images/bggrad.jpg);
background-repeat: repeat-x;
margin: 0; padding: 0;
font-family: Arial;

}
-->
.banner {
text-align: center;
}

</style>

</head>

<body>
<div class="banner"><img src="images/footer.PNG" width="1024" height="47" /></div>
</body>
</html>