Displaying page title using CSS

Displaying page title using CSS (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

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

Starhugger -> RE: Displaying page title using CSS (9/27/2006 20:48:40)
Thanks for the help, Womble! I've recently migrated to a Windoze server but I think they offer both ASP and PHP. I'd rather avoid ASP though. I don't really want to become more dependent on Windows (wasn't paying attention when I changed webhosts [8\|] ) so if I can do this in a way that I could switch back to *nix again down the road, that would be wonderful. I'll watch for more tomorrow, or whenever you can get to this. I'm not in any immediate panic to get this done. It's a spare-time project for me, and I don't have much spare time these days. [;)] Thanks! Starhugger

womble -> RE: Displaying page title using CSS (9/27/2006 20:55:09)
If it works like I think it does (which it may not - I'm only just starting out in PHP so a lot of it's by trial and error) it shouldn't take too much of a tweak. Like I said, I think I've found a use for doing something similar to what you're wanting to do on the site I'm working on currently, so I'll have a look at it over the next couple of days when I'm more awake.

jaybee -> RE: Displaying page title using CSS (9/28/2006 4:47:15)
Is it not possible to have a separate absolutlely positioned div that sits over the header using a z-index? You include the header but have the different text div within each page.

Starhugger -> RE: Displaying page title using CSS (9/28/2006 10:08:44)
Oh, I hadn't thought of that, Jaybee. That would be the simpler way, if it will work. Thanks, I'll try it and let you know. [:)] Starhugger

Starhugger -> RE: Displaying page title using CSS (9/28/2006 23:04:15)

Yup, that seems to work! In IE, FF, Netscape and Opera.

Here's the main page code (using FP includes):

<div id="bigbox">
<!--webbot bot="Include" U-Include="pageheader.htm" TAG="BODY" -->
<div id="topbanner"><h1 class="bannertext">Page Name</h1></div>
blahblahblah...
</div>

Page Header code (gets pulled into each page at top of page):

<div id="hdr-container">
<img border="0" src="images/hdrlogo.gif" width="145" height="91" 
align="left" title="Home Page" />
<div id="topnavbar">
[ ...table containing navigation link bar... ]
</div></div>

Here's the essential CSS:

#bigbox {    /* container for whole page, centered */
   position: relative;
   width: 760px;
   padding: 0px 0px 0px 0px;
   margin: 0 auto;
   text-align: left;
   }

#hdr-container {    /* container for whole header area */
   position: relative;
   top: 0px;
   width: 760px;
   height: 150px;
   text-align: left;
   vertical-align: top;
   padding: 5px 0px 0px 0px;
   }

#topbanner {    /* Page name area with banner graphic behind it */
   position: absolute;
   top: 10px;
   right: 0px;
   z-index: 1;
   margin: auto;
   background-image: url(../theme/topbanner.gif);
   background-repeat: no-repeat;
   width: 609px;
   height: 75px;
   text-align: center;
   }

There may be some redundancy in the code, or even some errors just waiting for a chance to show themselves. If anyone spots any, please let me know.

Thanks for the help! [:)]

Starhugger

Page: [1]

6.201172E-02