Structuring A Php Website With Css Layout what is a common way to get this kind of thing done

Samleeuwenburg · February 27, 2010

Hey guys,Ive been pondering around with different ways of doing this but it seems i must be missing something, there must be an easier way.here is what I want to do: I got an mydesign.css file this contains the following custom divs: -header ( huge banner at the top, logo kinda way) -menu ( small height with the items next to each other: home - pictures - more - more - even more )-content ( pretty obvious ) now here is how I do it now: Index.php

<html> <body><head> <link rel="stylesheet" type="text/css" href="mydesign.css"> </head><?php require("layout.php"); ?><div id="content">my text and titles go here</div></html> </body>

layout.php

<html><head> <link rel="stylesheet" type="text/css" href="mydesign.css"> </head><body><div id="header">logo </div><div id="menu">home - pictures - more - more </div></body></html>

This way i dont have to rebuild the menu and overal background design etc. but I still have to build the main window that holds the content everytime i build a pageisnt there a way to include ALL my css desing into one php / html file? well what I really want to know is: how do most website do this? how do they use their css and layout designs to be included on every page?Thanks alot for all your replies

web_designer · February 27, 2010

hi, i am not quite sure of what your code about and wy you have index.php separated from the index. so, i will answer your question about how to we add css to our websites?there are two ways:1-use the old way, create a css file (external file like style.css) and add css code of the entire web page in it. like css for your background, header, divs , menus, footer ...ect.2- use the new way which is themes. you can make a theme for your web page and add its properties in css and add it to your main page using include function in php. that means you create a separate files for each of the following header.php, menu.php, content.php and footer.php. these are the main files but of course there is more. after that you should call your files by include function to make one file which is finally puts all the files together and give the final look to our page.also there is another way but not recommended by adding css directly to your divs or body tag, in this case you will not have an external css file. but it is not recommended because it is more harder to edit.these are how we use it.

Baniboy · February 27, 2010

Index.php <html> <body> <head> <link rel="stylesheet" type="text/css" href="mydesign.css"> </head>  <?php require("layout.php"); ?>  <div id="content"> my text and titles go here </div>  </html> </body>

First of all, you need to put the body tag opening after the head tag. Which is what you have done in the second code box. Just a side note here, it causes mobile browser incompatibility. Also, you're closing <html> before you do the body tag! You gotta be careful with these in the future. :angel:

Now, talking about the code you've got there, it's good. Although I wouldn't call it layout.php and more like header.php, just to be clear. You might also want to make a footer.php and use include() or require() to get a footer after your content div as well.

BUT, the way you've done your layout.php isn't correct. Because now this is the page source after being processed by apache and sent to the browser(notice i've fixed the tag orders for you):

<html>  <head> <link rel="stylesheet" type="text/css" href="mydesign.css"> </head> <body> <html> <head> <link rel="stylesheet" type="text/css" href="mydesign.css"> </head> <body>  <div id="header"> logo </div> <div id="menu"> home - pictures - more - more </div>  </body></html>  <div id="content"> my text and titles go here </div>  </body></html>

Now, notice you now have 2 heads, 2 bodies, 2 stylesheet links and 2 htmls. This puts the browser in quirks mode. You only have to get the stylesheet once, as the contents of both of these are represented in the same page. So, change your layout.php to this:

<div id="header"> logo </div> <div id="menu"> home - pictures - more - more </div>

And now the code output on the page will be this:

<html> <head> <link rel="stylesheet" type="text/css" href="mydesign.css"> </head> <body>  <div id="header"> logo </div> <div id="menu"> home - pictures - more - more </div> <div id="content"> my text and titles go here </div> </body> </html>

Also, notice you're lacking a title tag in your head tag, remember to include that, too!

And yes, as web_designer said, you can use the require() or include() functions in php code to get the stylesheets and scripts embedded in the head tag. Doing this will reduce the amount of http requests required for the browser to make and further optimizes your website if you're using a heavy CSS file. If you want to do the thing mentioned above, get rid of the stylesheet link in the head tag and use this instead:

<head><style type="text/css"><?php require("mydesign.css"); ?></style></head>

Good luck.

Edited February 27, 2010 by Baniboy (see edit history)

Samleeuwenburg · February 28, 2010

Also, notice you're lacking a title tag in your head tag, remember to include that, too! :angel:
And yes, as web_designer said, you can use the require() or include() functions in php code to get the stylesheets and scripts embedded in the head tag. Doing this will reduce the amount of http requests required for the browser to make and further optimizes your website if you're using a heavy CSS file. If you want to do the thing mentioned above, get rid of the stylesheet link in the head tag and use this instead:
<head><style type="text/css"><?php require("mydesign.css"); ?></style></head>
Good luck.

the body before the head tag must have mixed up because I'm posting all of this from my iPhone ( doesn't always work so smooth ).
Right now I have removed the double HTML and body tags and also put the content div inside the layout .php didn't even close the tag. I think it does it automaticly? Strange but it works.
http://forums.xisto.com/no_longer_exists/ < progress so far ( try to ignore my bad taste ).

The design works, it's all in one css and it's easy to edit for every page. Perfect!!
After this I'll make a different php file for each segment ( like web_designer said ) cause the css file im using now is getting pretty unorganized very quickly!

Thanks for the replies!!

truefusion · February 28, 2010

You should note the CSS @import rule. @import works similar to PHP's include, in that the browser grabs the content of the CSS file that the @import rule points to and parses it along with the remaining CSS. You can avoid the overhead from PHP by using @import instead if you're going to slice your CSS code into pieces. You can read more about the @import rule here.

Baniboy · February 28, 2010

Your code is invalid:

http://validator.w3.org/check?verbose=1&amd.trap17.net%2F

Sometimes, the code is invalid but doesn't put the browser in quirks mode, which is better, you should still fix the errors tho. But this code you have now, forces the browser into quirks mode. So, fix all the errors, take care of the warnings as well if necessary. And tags don't close themselves automatically, you have to do that yourself. If you need help fixing an error but don't understand what the w3 validator is telling you, post it up here and I can help you. :angel:

Also, if you're having problems with organizing CSS in one file (which I think is a nicer way of doing it), you can check this article, which contains a small tip on how to do it:

http://tutoriary.com/

Edited February 28, 2010 by Baniboy (see edit history)

Samleeuwenburg · February 28, 2010

Your code is invalid:

http://validator.w3.org/check?verbose=1&amd.trap17.net%2F

Sometimes, the code is invalid but doesn't put the browser in quirks mode, which is better, you should still fix the errors tho. But this code you have now, forces the browser into quirks mode. So, fix all the errors, take care of the warnings as well if necessary. And tags don't close themselves automatically, you have to do that yourself. If you need help fixing an error but don't understand what the w3 validator is telling you, post it up here and I can help you. :angel:

Also, if you're having problems with organizing CSS in one file (which I think is a nicer way of doing it), you can check this article, which contains a small tip on how to do it:

http://tutoriary.com/

right I'll check it out, but let's say I have (want) all the divs in my layout.php if I make a new php file like index how do I tell it to put all content inside div id="content" instead of below it, or do I have to keep putting the content div inside my new files? ( in this case index )

web_designer · February 28, 2010

ok, i will try to explain you what the code should be and what means

<html><head> <link rel="stylesheet" type="text/css" href="mydesign.css"> </head><body>

that is only an html code

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

in this function you will call the file layout.php which it will bring the header and the menu

<div id="content">my text and titles go here</div>

this will show your content of your websites

</body></html>

this only ends your html page

so, if you want your content to still in this page, then keep it like this. or if you have a large code, and to be easier to edit you can put your content in a separate file let's call it content.php. and add it to your page like this

<html><head> <link rel="stylesheet" type="text/css" href="mydesign.css"> </head><body><?php include("layout.php"); ?><?php include("content.php");?></body></html>

in the same way, if you want to add footer.php. the code will be

<html><head> <link rel="stylesheet" type="text/css" href="mydesign.css"> </head><body><?php include("layout.php"); ?><?php include("content.php");?><?php include("footer.php");?></body></html>

the same way if you want to add sidebar, or search form.
these all about php, to add css to these files; simply, add div or class to these files to give them a certain css properties. so, if you want to add css to the header file, you should add div tag in layout.php and add properties to that div in css file (mydesign.css). your code will be

<?php<div id="header">logo </div><div id="menu">home - pictures - more - more</div>?>

in css file write this for example

#header {	width:700px;	margin:0 auto;	position:relative;	height:300px;}

and do the same for all others files that are included in the index.php

i hope i could help you, good luck.

Baniboy · February 28, 2010

these all about php, to add css to these files; simply, add div or class to these files to give them a certain css properties. so, if you want to add css to the header file, you should add div tag in layout.php and add properties to that div in css file (mydesign.css). your code will be
<?php<div id="header">logo </div><div id="menu">home - pictures - more - more</div>?>
in css file write this for example
#header {	width:700px;	margin:0 auto;	position:relative;	height:300px;}
and do the same for all others files that are included in the index.php

i hope i could help you, good luck.

You don't need to wrap your content in the layout file with php tags as the first codebox suggests this quote of web_designers code.

if I make a new php file like index how do I tell it to put all content inside div id="content" instead of below it, or do I have to keep putting the content div inside my new files? ( in this case index )

You open the div tag, insert php function include(), like so:

<div id="content"><?php include("file.php"); ?>

Samleeuwenburg · February 28, 2010

i hope i could help you, good luck.

yes thank you, you both are helping alot.
I'll try to make the best with what you guys told me.

Ps nice george carlin quotes in your signature Im a big fan of him!

Samleeuwenburg · February 28, 2010

Ok so here is my final result, I hope it's error free!Layout.php

<html><head><link rel="stylesheet" type="text/css" href="mycss.css"><title>Zennized</title></head><body><div id="allcontent"><div id="header"></div><div id="menu"></div><div id="maincontent">

index.php

<?php require("layout.php"); ?>my content<?php require("layout2.php"); ?>

Finally, layout2.php

</div></div></body></html>

Thank you guys for all the help!

truefusion · March 1, 2010

Ok so here is my final result, I hope it's error free!

That method of inclusion does not allow for multiple pages (though it may allow for multiple templates of the very same page if you were to change the content of layout.php and layout2.php).
Currently your structure implies a layout of three sections (though they may not be named in this way): header, body and footer. The problem about your structure is that you are using your index.php as the body also. The index is better off being the one that joins everything, where the header, body and footer are all separate from the index. The header and footer may vary depending on the complexity of the system. However, your system seems to deal with mostly HTML and does not appear to make a lot of use of PHP's other features. For that reason, the header can be used to include everything that would appear in the <head> element; the body for the <body> element; and the footer doesn't seem to be of any use in this case, so you may leave it out.

In turn, your index will contain the <html> element and will include the header and the body. Of course, if your body only contains HTML, then this method will also only work for one page (unless you change the content of the body). The difference now is that things will be easier to work with in the long run, but this only if you choose to make the system more complex. If your system will only be including plain HTML without any dynamics provided by PHP, then there is no need to include anything, and all that requires being done is placing all the HTML in your index. However, if you choose to make the system more complex, then you'll be basically attempting to make your own content management system.

Samleeuwenburg · March 1, 2010

That method of inclusion does not allow for multiple pages (though it may allow for multiple templates of the very same page if you were to change the content of layout.php and layout2.php).

In turn, your index will contain the <html> element and will include the header and the body. Of course, if your body only contains HTML, then this method will also only work for one page (unless you change the content of the body). The difference now is that things will be easier to work with in the long run, but this only if you choose to make the system more complex. If your system will only be including plain HTML without any dynamics provided by PHP, then there is no need to include anything, and all that requires being done is placing all the HTML in your index. However, if you choose to make the system more complex, then you'll be basically attempting to make your own content management system.

thanks for your reply, the only reason I am building this site is to learn php.
In September I am going to attend a new school focussing on game / application programming but in order to join I have to show ( prove ) I am really into it. So they asked to make an online app with php and mysql
see : http://forums.xisto.com/no_longer_exists/ << what i am working on.
I am just going to build more functions as I learn more php. But before I make it any more complicated I really want to be able to change the design easily for the presentation. Doing this in the end would be alot harder.

Things I have planned on adding are: profile system with login system, rating, search with sort by rating etc.
Will this method be good for that?

Baniboy · March 1, 2010

Will this method be good for that?

Umm, I didn't quite get it... What you mean by the method? PHP include() or require()? No, they're not used to make core of those applications you mentioned such as the login system.
If you want to do those things, you should take a look some login scripts (google) and other scripts you mentioned. Make sure you learn SQL before you start that tho.

If you meant PHP and SQL as a good method, then yes, it is. Although the good part might be arguable..

Ps nice george carlin quotes in your signature Im a big fan of him!

:angel: Edited March 1, 2010 by Baniboy (see edit history)

Samleeuwenburg · March 1, 2010

Umm, I didn't quite get it... What you mean by the method?

With the method I mean the way im using those functions (require()):

zennized.trap17.net ( layout.php > index.php > layout2.php )

this should allow me to add a footer afterwards or even a side wall etc.
so far so good, it works..

Sign In

Structuring A Php Website With Css Layout what is a common way to get this kind of thing done

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information