HOME       >>       Websites and Web Designing

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


Samleeuwenburg

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

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

Index.php <html> <body> <head> <link 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 type="text/css" href="mydesign.css"> </head> <body> <html> <head> <link 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 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.

Samleeuwenburg

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

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

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/


Samleeuwenburg

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

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

<html><head> <link 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 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 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

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

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

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

<html><head><link 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

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

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

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:

Samleeuwenburg

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

truefusion

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

Well, when you get to the point that you are competent enough in PHP for making the complex scripts you mentioned, you will be using at least require(), for you can't have everything all in one page. As you should have received some insight from already in this topic, one of the things you should be learning is how to structure your script. require() and include() help bring things not only within the global scope of your script but also the local scope (depending on how you include them and are put to use). A hint to structuring your script: Try to separate whatever seems reasonable to do so. For example, say you want a lot of specific variables, even constants, to be accessible throughout your entire script, you could place them in for example, globals.php; or functions, functions.php. The point to this is that it will be easier to maintain your code.

 

When including scripts, i would recommend using require_once() or include_once() instead of require() and include(). These not only help prevent unnecessary inclusions but will also help prevent recursive inclusions. While the recursive inclusion may be due to the fact that the script layout was laid out improperly (at least concerning PHP), there may still be a case where two files depend on each other. In this case, require_once() and include_once() may prevent you from noticing any flawed layouts, it at least allows you to continue being productive without having to worry about the potential recursion. Also, there may be a case where you would want to include the same script twice on the same page. In this case, require_once() and include_once() would be unreasonable.


web_designer

with a quick look at your script, the structure is right now. you are on the right way. about your project if you have a problem in creating a log in script. then search the net for login scripts and see how it works, step by step you wll make your own one, good luck.


Samleeuwenburg

with a quick look at your script, the structure is right now. you are on the right way. about your project if you have a problem in creating a log in script. then search the net for login scripts and see how it works, step by step you wll make your own one, good luck.

check it out: http://forums.xisto.com/no_longer_exists/. ( login system ).

Took me a while to make since most tutorials don't explain it well enough and many don't work. But I think I get it now.


VIEW DESKTOP VERSION REGISTERGET FREE HOSTING

Xisto.com offers Free Web Hosting to its Members for their participation in this Community. We moderate all content posted here but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 2001-2019 by Xisto Corporation. All Rights Reserved.