Common layout in pages

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
ill
Forum Newbie
Posts: 2
Joined: Mon Aug 17, 2009 11:18 pm

Common layout in pages

Post by ill »

So I looked all over the place on google and whatever and I've found many links relating to layouts which I'm pretty familiar with, but nowhere did I find how to actually have a common layout in all pages without recoding it for each page.

Basically I want a sidebar and all those basic things, and the actual content to appear in a div taking up the right side of the page. So I can create an index.html where I code all of this, and then I click a link and I have to recode this entire layout again on the other page.

I've done some work with Ruby on Rails which isn't totally my favorite thing in the world but it was work. Now I'm trying to make a personal site with PHP. Anyway in Ruby on Rails you could define a layout for use by pages and a certain div in the layout would hold the content while the layout itself was the entire HTML document containing the head, title, sidebars, footers, all that.

Is there some nice clean way to do this with HTML/ Javascript/ PHP/ whetever else non Ruby on Rails related?

I'd prefer to start coding the site without too much PHP server side stuff yet and work my way into it eventually, but if this definitely requires some PHP then sure... I'll do it. I'm very familiar with HTML and CSS, pretty familiar with Javascript, and barely familiar with PHP except for how I like how some of the function names remind me of C.
User avatar
mrvijayakumar
Forum Commoner
Posts: 58
Joined: Tue Aug 18, 2009 12:39 am
Location: Chennai city, India
Contact:

Re: Common layout in pages

Post by mrvijayakumar »

Hi ill,
I hope my words will help you in developing website of yours. What u had done in Ruby rails done same thing in PHP also. I will say something to you to make flexible website,

1) Rename index.html to index.php,
2) Split index.php into 3 major part (remember that, it will be repeated in all pages),
a) First part is header.php,
b) Second is sidebar.php,
c) Third is footer.php.

Leave the remaining code as it( see the attached example) is. Not only this, analyze your site, if u found some spot to be repeat in all pages, Just cut that div tag part and place it in new file with identifying name. And call that file exactly on the place where u have cut that code.

OK, Now, i will say how to include file, just use this PHP function to include, include("header.php"); , include("sidebar.php"); etc.,

Cheers,
Vijaya Kumar S
Web Developer, +91 9952838699,
http://www.vijayakumar.org
Attachments
Common layout in pages.zip
Example for Common layout in pages. Both static and dynamic pages are given as example.
(3.6 KiB) Downloaded 155 times
ill
Forum Newbie
Posts: 2
Joined: Mon Aug 17, 2009 11:18 pm

Re: Common layout in pages

Post by ill »

OK, so I'm using includes.

I made a page layout that worked in Firefox and IE7. Then I started to split it up into sections and using include to load header and footer separately and all that. For some reason it still looks perfect in Firefox but the IE7 version got messed up. Somehow the entire main site div is no longer centered and there are vertical gaps between certain elements that are divided by the different includes.

I don't see how this is possible. The PHP runner should output the exact same HTML code as I understand. Why is it suddenly messing up the formatting. Do I have to nest all my tags properly in the included files? That would make it kindof inconvenient though. I really fail to see why there is a problem.

The PHP code is run by the server right? Not by the browser? Why do two different browsers interpret the same HTML output by the server differently when they both interpreted it properly before?

To give an idea of what I'm doing here is some code omitting the masive unimportant parts:

This is layoutA.php

Code: Select all

 
<!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>
 
        <title>
 
This is layoutB.php

Code: Select all

</title>
 
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />      
 
        <link rel="stylesheet" type="text/css" href="main.css" />
        <link rel="stylesheet" type="text/css" href="layout.css" />        
 
        <!--<script type="text/javascript" src="sideMenu.js"></script>-->
 
    </head>
 
    <body>
    
        <div id="mainLayout">                       
                    
            <div id="leftNavBar">
                <div id="navBarLinkBox">
                
                    <?php include("navBar.php"); ?>
                    
                </div>                
                
            </div>
            
            <div id="mainContent">
                                    
                <div id="mainContentStuff">
                
 
This is layoutC.php

Code: Select all

      </div>
            </div>
            
            <div id="footer">
                                
            </div>
        </div>
        
    </body>
</html>
And this is index.php linking it all together:

Code: Select all

 
<!--Page title goes here -->
<?php include("layoutA.php"); ?>
    
    Title
    
<?php include("layoutB.php"); ?>
                    
    Content would go here
    
<?php include("layoutC.php"); ?>

It appears to make a very clean page code so it would kinda suck to not be able to do it this way... The actual layout code becomes a tiny bit messier but whatever... It would overly complicate matters though since I'd have to include much more code on each page.

In Ruby on Rails though layout seemed to work in reverse. It was basically kinda like doing this in php:

This is the layout file

Code: Select all

 
<html>
  <head>
  </head>
 
  <body>
    <?php include(news.php)?>
  </body>
</html>
 
Is there some way to do this in php? I can't really think of a way to do this simply without possibly some kind of configuration.




Oh wow I just fixed it... I did some more searching and found that including

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
at the top of every single .php file fixes it.

I'm still very confused about why this could possibly affect anything though since the server should be generating the HTML read by the browser without the browser ever even seeing the separate files.

For now I have to actually include <title> tags in the main page since it includes the doctype declaration in the title unless anyone else has a better solution. This is just strange. What is going on here? (Godd I hate IE right now LOL)




Actually I just did some more tweaking and realized ONLY index.php requires it not all files. LOL, funny how a random fix like that makes it work. This makes a lot more sense now, although still a bit strange. It appears that IE is looking at the beginning of index.php not the entire code returned by the php parser on the server.




OK, I finally figured out what the original problem in the first place was. index.php had a comment at the top that said <!--Title goes here-->. When the code got generated by PHP that was the first line in the file not the doctype. All my troubles sparked because of a stupid comment. LOL. I came up with some ridiculous conclusions but now I learned my lesson. ALWAYS make sure the Doctype is the first thing in the HTML read by the browser no matter what...
Post Reply