|
| |
|
|
Starhugger
Posts: 512
Joined: 4/12/2005
Status: offline
 |
Displaying page title using CSS - 9/27/2006 19:10:24
Hi everyone!
I'm finally starting to (gradually) convert my FP site into a CSS-only (or mostly) site. What I would like to do is to have a header area pulled into every page, using an include command (FP webbot for now, maybe SSI later). This way, if I change anything in the header, it will be automatically updated for all pages.
The problem is that I want to have a different page title for each page appear in front of my banner background. But I'm not sure how to do that automatically, short of creating a different header for each page (which defeats the purpose of standardizing it).
Right now I have my logo graphic in the upper left (which is a link to the home page).
Then to the right of the logo is my page title banner background, which has text in front of it giving the page title (e.g., Articles) in <H1>. This allows the page title to be visible to all browsers and SEs, and gets the credit for being the most important heading.
Then a navigation bar is put below these two areas. This is pulled in from yet another included block using an include.
Here's the code so far:
<div id="hdr-container">
<img border="0" src="images/hdrlogo.gif"
width="145" height="91" align="left"
title="Home Page" />
<div id="topbanner"><h1 class="bannertext">PAGE TITLE</h1></div>
<!--webbot bot="Include" U-Include="topnavbar.htm" TAG="BODY" -->
</div>
I would like to have the included header area automatically get the "page title" text from the current page somehow. In other words, the Articles page would display "Articles" and the Dictionary page would display "Dictionary," etc. I can't figure out a way to set that up though.
The alternative seems to be to create unique headers for each page, each with a hard-coded page title. But if I decide to change the logo filename, for instance, I would have to go through all pages and change each one manually. Defeats the purpose of the whole thing.
I don't know enough about javascript to know if it will do this, but I'd prefer to avoid js for this, to make it accessible to non-js enabled browsers.
I hadn't tried a search about this problem because I'm not even sure what keywords to look for.
I haven't had time to tinker with the code side of things for a while, so there might be an easy way to do this and I just forgot. Any ideas?
Thanks for your help with this!
Starhugger
|
|
|
|
womble
Posts: 5506
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: Displaying page title using CSS - 9/27/2006 19:56:34
Yep, I think you need to use either ASP or PHP for that, depending on whether you're on a Windoze or a *nix server. I've recently done that on a site I'm working on, though I was using an image. I wanted a specific image to display, depending on what the current page is, and the whole section of that bit of the page is in an include, so I needed something that would pick up the current page automatically. This is the code I've used, doing it in PHP:
<?php
$currentPage = basename($_SERVER['PHP_SELF']);
$img = '';
$imgAlt = '';
switch ($currentPage) {
case 'about.php':
$img = "about.jpg";
$imgAlt = "About us";
break;
case 'services.php':
$img = "services.jpg";
$imgAlt = "Services";
break;
case 'services2.php':
$img = "services2.jpg";
$imgAlt = "Services";
break;
case 'index.php': // Fall thru
default:
$img = "home.jpg";
$imgAlt = "Home";
}
echo '<img class="pagename" src="images/' . $img . '" width="180" height="85" alt="' . $imgAlt . '" />';
?>
I would imagine that could be tweaked to display a H1 tag text instead though. As it's a little late now my brain doesn't function this late, so I'm not even going to attempt to try it now, but I'll have a look tomorrow - your little dilemma's just given me another idea how I could use something like this to simplify maintenance and stuff on the site I'm working on. 
In theory though I think replacing the $img with a your H1 tag text rather than an image and losing the $imgAlt as it's not needed for your purposes should work - then you could just echo a H1 tag, picking up the text to go between them.
Of course if you're on a Windoze server you'd need ASP.
_____________________________
~~ "A cruel god ain't no god at all" ~~
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
) so if I can do this in a way that I could switch back to *nix again down the road, that would be wonderful. 
