Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
- - - - -

Structuring A Php Website With Css Layout

Started by Samleeuwenburg, Feb 27 2010 12:23 AM

17 replies to this topic

#1 Samleeuwenburg

    Newbie [Level 3]

  • Kontributors
  • PipPipPip
  • 40 posts
  • Gender:Male
  • Location:Netherlands
  • myCENT:26.45

Posted 27 February 2010 - 12:23 AM

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

#2 web_designer

    "french rose sparkle under moonlight"...do you believe in the magic of moonlight??!!...

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPip
  • 1,385 posts
  • Gender:Female
  • Location:US, CA
  • Interests:internet and the web
    reading books
    sport
    watching tv series
    drawings and art
  • myCENT:12.10
  • Spam Patrol

Posted 27 February 2010 - 11:57 AM

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.

#3 Baniboy

    Advocatus Diaboli

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 878 posts
  • Gender:Male
  • Location:/root
  • Interests:Everything...
  • myCENT:37.47

Posted 27 February 2010 - 01:53 PM 

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! :P

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

Edited by Baniboy, 27 February 2010 - 01:57 PM.

#4 Samleeuwenburg

    Newbie [Level 3]

  • Kontributors
  • PipPipPip
  • 40 posts
  • Gender:Male
  • Location:Netherlands
  • myCENT:26.45

Posted 28 February 2010 - 01:51 AM

View PostBaniboy, on Feb 27 2010, 02:53 PM, said:

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

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.
Www.zennized.trap17.net < 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!!

#5 truefusion

    Coincidence is non-sequitur, therefore everything has a reason for its existence (except if they are eternal).

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 3,216 posts
  • Gender:Male
  • Location:No, not there. Not there either. Yes, you'll never figure it out.
  • Interests:God, Christianity.
  • myCENT:86.16

Posted 28 February 2010 - 06:49 AM

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.

#6 Baniboy

    Advocatus Diaboli

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 878 posts
  • Gender:Male
  • Location:/root
  • Interests:Everything...
  • myCENT:37.47

Posted 28 February 2010 - 10:44 AM

Your code is invalid:
http://validator.w3.org/check?verbose=1&am...d.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/misc/tips-for-web-des...and-developers/

Edited by Baniboy, 28 February 2010 - 10:45 AM.

#7 Samleeuwenburg

    Newbie [Level 3]

  • Kontributors
  • PipPipPip
  • 40 posts
  • Gender:Male
  • Location:Netherlands
  • myCENT:26.45

Posted 28 February 2010 - 03:32 PM

View PostBaniboy, on Feb 28 2010, 11:44 AM, said:

Your code is invalid:
http://validator.w3.org/check?verbose=1&am...d.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/misc/tips-for-web-des...and-developers/

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 )

#8 web_designer

    "french rose sparkle under moonlight"...do you believe in the magic of moonlight??!!...

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPip
  • 1,385 posts
  • Gender:Female
  • Location:US, CA
  • Interests:internet and the web
    reading books
    sport
    watching tv series
    drawings and art
  • myCENT:12.10
  • Spam Patrol

Posted 28 February 2010 - 04:56 PM

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.

#9 Baniboy

    Advocatus Diaboli

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 878 posts
  • Gender:Male
  • Location:/root
  • Interests:Everything...
  • myCENT:37.47

Posted 28 February 2010 - 08:29 PM

Quote

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.

Quote

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"); ?>

#10 Samleeuwenburg

    Newbie [Level 3]

  • Kontributors
  • PipPipPip
  • 40 posts
  • Gender:Male
  • Location:Netherlands
  • myCENT:26.45

Posted 28 February 2010 - 11:08 PM

View Postweb_designer, on Feb 28 2010, 05:56 PM, said:

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!
Back to Web Design · Next Unread Topic →

Reply to this topic


This post will need approval from a moderator before this post is shown.

  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Discuss Anything
  2. → Main
  3. → The Internet
  4. → Web Design
  5. Welcome - Start here! - Free Web Hosting