Log in

View Full Version : CSS layout using PHP?


babytux
09-19-2007, 03:19 AM
I originally had coded my site in CSS, but in realizing some very basic problems with it, it was recommended that some aspects of it (specifically the header with the navigational section and the footer) would probably be better if I handled them as PHP includes.

However, not being terribly familiar with PHP (although, my host does allow for it), I was wondering if I could use something similar to this: http://www.dynamicdrive.com/style/csslibrary/item/bevel-horizontal-menu/

but in my PHP include file and is it possible to just reuse my existing CSS code and somehow just change the extension to PHP or would I need to completely recode it?

Any and all help will be appreciated.:)
littleEd
09-19-2007, 12:22 PM
Yes you can reuse the exact code...
basically what you need to do is take all of your header code and place it in a separate file (eg. header.php). Then you will go to where the header code originally was and replace it with an include statement to that file.

<? include("header.php"); ?> (use the question mark brackets to show where php code starts and ends)


so for example, if this is what you originally had:



index.php
<header code>blah blah blah blah</header code>
<navigation code>more blah blah blah</navigation code>
<body code>this is the main body of the page</body code>
<just some other code>1 2 3 4 5</just some other code>


you will then change it to this:


header.php
<header code>blah blah blah blah</header code>

navigation.php
<navigation code>more blah blah blah</navigation code>

index.php
<?
include("header.php");
include("navigation.php");
?>
<body code>this is the main body of the page</body code>
<just some other code>1 2 3 4 5</just some other code>


i hope that made sense. remember that pages that you use to include the php must have a php extension.
Rockonmetal
09-19-2007, 06:02 PM
Using PHP???? that would be not so smart... you just have to do this...
Put that in the head of the page...

<link rel="stylesheet" href="stylesheet.css" />
Make sure all your css code is put in without the

<style></style> tags...
Putting it in includes is just something that I have not tried yet..

Hope this helps man
djr33
09-19-2007, 06:53 PM
Use an external stylesheet, definitely.
But if you do need something dynamic using PHP (not sure what that would be), then this would apply:
http://www.dynamicdrive.com/forums/showthread.php?t=21617
babytux
09-19-2007, 07:59 PM
Among the reasons I had originally been told that I should use PHP is because I was having some problems with the navigation where my layout was concerned.

I had it set up so that it was originally using divs with the first div set aside for my banner with the navigation bar, which was similar to the one in the link I posted. The next "div" had been where I wanted the links to my content to open up on the page. The third and last div was for my footer. I wanted to be able to re-use my navigation/banner along with the footer and have them show up on every page, but without having to actually add them to every page directly (ie somehow keep them separate) so they wouldn't have to constantly reload when it wasn't necessary. Sort of like a "frames" effect, without the actual use of frames. Needless to say, I couldn't get it working this way.

In other words, it would have looked something like this:

-------------------
Header with banner and
Navigation with links
-------------------
Content/where links were to open up



-------------------
Footer with copyright info/Terms of use link
-------------------

Someone had recommended to me to chop my site up as far as the header (with the navigation menu) and footer and use PHP includes for each page I had for my site (the first recommendation had been to use SSI, however, my host doesn't offer support for it). However, again, not being familiar with PHP I wasn't sure how to go about it as far as the coding for the header and footer pages or if I could even keep my existing coding that I extracted from my original layout for both sections or whether it would somehow need to be redone, which is part of the reason I was asking for help here.:confused:

When I asked for help with this layout the last time (different section of this forum, of course), I was told I'd either need to use frames (which I'd just as soon avoid and had been advised against) or make use of AJAX (which I also am not very familiar with) and it was made to sound like there wasn't really a straight CSS/HTML "solution" to my situation (the same person--someone not on this board--who recommended using PHP includes to me, had told me the same thing), so now I'm confused as to what to do or how to try and salvage my layout.:confused:

I do appreciate all the help, though.:)
djr33
09-19-2007, 08:18 PM
Ok, then you can use PHP to include those parts of the page. Good idea in that case.
But that's not CSS. That's just html in your page.
boogyman
09-19-2007, 08:27 PM
index.php
<?
include("header.php");
include("navigation.php");
?>


remember that pages that you use to include the php must have a php extension.
no they do not... you can include anythign you would like... you just need to make sure the file you want to include is on the server...

if you have some code, that you want protected (DATABASE / PASS variables)/ must be processed on the server side, then yes you would need to use php extensions, but you can include / require any file name / extension that your head can think of, just as long as you get the path correct.
djr33
09-19-2007, 09:56 PM
"pages you USE TO INCLUDE", not the included pages.
Any page with <?php ?> tags on it must end with .php; other files can be included (.php, .htm, .txt, .inc, etc.)
babytux
09-20-2007, 03:44 AM
So then, and this is going to sound like a potentially stupid question, how can I convert the code I used for my header and footer files (or do I even need to)? I realize that with the content pages I'll be adding them as includes for, it would have to appear something like the examples above. However, either I'm wondering if they need to somehow be recoded or what I'm doing wrong as I can't seem to get either my footer nor my header to show up for me on my test page.:confused:
djr33
09-20-2007, 06:17 AM
1. PHP:
Your server must have PHP installed/enabled.
2. Page:
Your page must end with .php and use <?php ?> tags.
3. Included pages:
Nothing special here, as long as they exist.

PHP includes are very simple. They directly take the contents of those pages and place it into the current page at that location:


TEST.txt:
abcdef
_________________

TEST.php:
123<?php include('TEST.txt'); ?>456

If you were to visit TEST.php, the output source code would be "123abcdef456". Simple as that.


Your header and footer will be taken and directly input into the page. As such, consider what they should have in them. It would be easy to write a full page, then cut out the sections you want included, replace with a tag, then save those contents to the included page.

Your includes pages, then, should be just chunks of html, like on the page. They shouldn't be full working pages-- no <html><body> tags, etc.
babytux
09-21-2007, 02:47 AM
So far as I know, my host does offer support for PHP4 (which they're apparently running as an Apache module(?)) and 5 (by way of a CGIwrap(?)), but I am looking into that just to rule out the possibility that that may be where my problem lies.

I also did code my test page to add the includes so that it looks something like this: <?php
include "http://myurl/header.php";
?>, but does it matter where on the page (head or body, etc.) it needs to be placed?

On a related note, since I'm using a navigational setup similar to the one I posted in the first link where it has separate code for CSS which provides the instructions for the navigation using a specific div class and use the ul and li tags for the actual links themselves, how do I cut them out (I am working from a page where I had my original code on and am just doing a cut/paste into new pages for the separate header and footer pages which I'll rename using the PHP extension) if I have to remove the head/body tags since they aren't necessary for this? Also, is there a way to specifically indicate in relation to the page their placement the way that it's possible to do using divs?
boogyman
09-21-2007, 12:32 PM
I also did code my test page to add the includes so that it looks something like this: <?php
include "http://myurl/header.php";
?>, but does it matter where on the page (head or body, etc.) it needs to be placed?

It needs to be placed where you want the include file to be "dropped-in". so for the header, this really should be on top of everything.. depending if you have the DOCTYPE and all



I'm using a navigational setup similar to the one I posted in the first link where it has separate code for CSS which provides the instructions for the navigation using a specific div class and use the ul and li tags for the actual links themselves, how do I cut them out (I am working from a page where I had my original code on and am just doing a cut/paste into new pages for the separate header and footer pages which I'll rename using the PHP extension)
if you have an external style sheet defined in the include script then it will be brought in... and the point of using an external sheet is for this purpose. if you want the styles to only apply to 1 file you should be using embedded style sheets




Also, is there a way to specifically indicate in relation to the page their placement the way that it's possible to do using divs? can you rephrase?
babytux
09-21-2007, 09:24 PM
I did move the CSS code regarding things like text/link appearance and the navigational properties to an external style sheet. However, for the links themselves, using the ul and li tags, could those be added to the PHP for the header and then just link the style sheet into the header.PHP file?

Regardless, I still can't seem to get either my footer (which is just simple text and a text link in bold without an underline) nor my header files to work for me.:confused:

After asking for help regarding the host side of things, I've been given contradictory information with being told all I needed to do was to just place my PHP files into my "regular" web directory and then just add the includes and it supposedly should work because of how Apache was set up (at least, as far as PHP4 is concerned--however, regardless, either I'm doing something wrong with my PHP files, themselves, or there's something on that side that's causing my problems) or how I supposedly shouldn't be using PHP as the extension for the includes, themselves (or else that it supposedly should only be my content pages which have to use the PHP extension)--which seems to not only contradict what I'm reading here, but have read elsewhere online about how to use includes.:confused: In the latter situation, I'm more inclined to believe what I've read here.




Quote:
Also, is there a way to specifically indicate in relation to the page their placement the way that it's possible to do using divs?
can you rephrase?

You actually answered part of my question earlier when I asked about placement.:) With my original layout, I had things set up so that my footer was a certain percentage up from the bottom of the page and set the height for it. That was part of what I was trying to ask about whether or not this was still possible to do--or would that, as well, still require a stylesheet to accomplish?

I realize that to some this may all seem rather "brainless" and I admittedly feel like an idiot for having difficulties with this, but quite a bit of this is entirely new to me so again, I do appreciate all the help and insight I'm receiving here.
littleEd
09-22-2007, 12:43 PM
Hello, I had provided the first reply to your post...

I quickly read through the posts and it seems now you are having problems understanding what the role of your css and your includes play in your case.

In your case, the includes are only telling the server where to get the next bit of code from. when you type 'include("whateverfile")' you are telling the server to insert everyting from 'whateverfile' . The css serves only as design/layout instructions. so technically the php includes and css do not intereact

If your webpage looked like this.



index.php
<head>
some info
<code to insert stylesheet.css>
</head>
<body>
some more info
another line of info
<? include("header.php"); ?>
more info
even more info
</body>


and if header.php looked like this


header.php
menu item 1
menu item 2
menu item 3



this is what you will end up with when the user tries to view the page


<head>
some info
<code to insert stylesheet.css>
</head>
<body>
some more info
another line of info
menu item 1
menu item 2
menu item 3
more info
even more info
</body>



as you see, header.php was literally pasted right were the include was placed.
this final code is then sent to the user and te css is applied
meaning that everyting (header.php and index.php) makes use of the css at once.



You actually answered part of my question earlier when I asked about placement. With my original layout, I had things set up so that my footer was a certain percentage up from the bottom of the page and set the height for it. That was part of what I was trying to ask about whether or not this was still possible to do--or would that, as well, still require a stylesheet to accomplish?

with all that being said.... it is still possible for you to position your elements the same way you did before. this is because each included file is affected by the css code at the same time (which after all the 'pasting' has been done).


In my opinion, if you already had the page looking the way you wanted to before you started to use includes, the only css modifications you may need to make is making it an external stylesheet (which i believe u have done), and making sure each page on your site links to it.

hopefully i didnt confuse you more, and hopefully i actually answered what you wanted answered
good luck!
babytux
09-23-2007, 01:42 AM
It appears somewhat clearer to me. However, I still can't seem to get things working, but in trying something out today, I found that I may also have a problem with my stylesheet as well.:( So, first, I'll have to try and fix that and then will try and revisit this again afterwards.