Web Hosting Forum | Lunarpages


*
Welcome, Guest. Please login or register.
Did you miss your activation email?


Login with username, password and session length
February 09, 2012, 07:28:01 PM

Pages: [1]   Go Down
« previous next »
  Print  
Author Topic: Modifying ssi content for individual pages  (Read 1278 times)
silknrocks
Trekkie
**
Offline Offline

Posts: 13
« on: November 15, 2009, 07:30:06 AM »
I have my main navigation bar set up as a server side include file so all the pages will load the same generic bar.  What I would then like to do is to highlight the link for the page that one is actually on.  I have worked out a way to make the current location bold and italicized except that the code does not validate and I can't see a way around this.  Any help would be appreciated.

My doctype is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">

My ssi file:
<div class="global-nav-bar">

<div id="global-nav">

<ul>
<li id="global-home"><a href="index.html">Home</a></li>         
<li id="global-pillows"><a href="pillows.shtml">Pillows</a></li>     
<li id="global-natural-history"><a href="natural-history.shtml">Natural History</a></li>
<li id="global-purchase"><a href="purchase.shtml">Purchase</a></li>
<li id="global-contact"><a href="contact.shtml">Contact</a></li>       
<li id="global-about"><a href="about.shtml">About</a></li>   
</ul>   

</div>  <!-- end of global-nav -->

</div>  <!-- end of global-nav-bar -->

The relevant part of the main .shtml file, done as inline css:
<style type="text/css"> #global-natural-history a {font-weight: bold; font-style: italic; } </style>

<!--#include virtual="global-nav-ssi.html"-->

The html validator is giving me this message:
Line 41, Column 23: document type does not allow element "STYLE" here

<style type="text/css"> #global-natural-history a {font-weight: bold; font-style

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

Thank you very much for any coding help that you can give me.
Logged
wektech
Master Jedi
*****
Offline Offline

Posts: 1031



WWW
« Reply #1 on: November 15, 2009, 08:11:00 AM »
It would help if you could post a link to the offending page so we can see the source of the generated page. Have a look at the generated source code and ensure that the inline CSS is contained between the head open and close tags and that it is before the body tag. Often this type of issue can be attributed to having a head or body tag in the included file as well as the file calling the include.
Logged
Money savings tips for real people by real people!
silknrocks
Trekkie
**
Offline Offline

Posts: 13
« Reply #2 on: November 15, 2009, 03:02:42 PM »
Thank you wektech for your very perceptive help  Applause  You were right - I had my inline CSS in what to me was a logical location, in the body directly before the SSI request.  I have now placed the inline CSS within the head and it works and validates.  Thank you for an easy and elegant solution.
Logged
webweaver
Galactic Royalty
*****
Offline Offline

Posts: 206


WWW
« Reply #3 on: November 16, 2009, 05:49:35 AM »
Silknrocks,

I like the idea of highlighting the current page and had never figured out how to do that on my pages.   Doh  Do you include that line on the individual page in the header rather than in any kind of included file? Seems as though you would have to.  I will have to experiment with this one as I had always thought it was a real failing that you couldn't tell which of my pages you were on by the nav column.

Thanks for posting your question - it may have given some of us an answer we needed.  Smile
Logged
MrPhil
Berserker Poster
*****
Offline Offline

Posts: 5083
« Reply #4 on: November 16, 2009, 10:34:40 AM »
It appears that this page gets a style for the specific link's id=, after the general styling, enabling CSS to override the properties for this one link.

What would be nice would be to actually disable the link (present only text) so that visitors won't click it and wonder why nothing happens. I don't see any way for CSS alone to do this (it's a functional change rather than a styling change). Is there a way, beyond just graying-out the text or otherwise "lowlighting" the entry, to actually disable it? I suppose that a very ugly solution would be to use display: none on this page's link's style, and have a second "dummy" text label that's normally display: none but is overridden in CSS to display: inline or something. Is there a better way?

global styling:
.navlist { CSS code to style the list (bullet type, etc.) }
.navlink { CSS code to style active link }
.deadlink { display: none; }

included file (partial):
<li class="navlist"><a class="navlink" id="no-link-natural-history" href="natural-history.shtml">Natural History</a><span class="deadlink" id="global-natural-history">Natural History</span></li>
<li class="navlist"><a class="navlink" id="no-link-global-purchase" href="purchase.shtml">Purchase</a><span class="deadlink" id="global-purchase">Purchase</span></li>

in the "natural history" file:
<style type="text/css">
#global-natural-history {font-weight: bold; font-style: italic; display: inline; }
#no-link-natural-history { display: none; }
</style>

Deactivating a link in PHP or even Javascript would probably be much nicer...
Logged
silknrocks
Trekkie
**
Offline Offline

Posts: 13
« Reply #5 on: November 16, 2009, 01:35:36 PM »
Being a totally self-taught amateur at this I'm delighted that my question has been taken seriously and that the solution is of interest to others  Smile.

Mr Phil, I totally agree that in an ideal world I would like to disable the link for the exact page that one is currently on, while also having it visually distinct.  On my current version of the site, done without CSS or server side includes a number of years ago now, I do this simply by removing the link address in the navigation column html for the current page.

If you are interested in exploring this more easily, here is a link to the page that is my test page for the new design. 
http://www.wendysminiatures.com/test-files/curiosities-validation.shtml

Webweaver, if you look at the source code for the page given above, you can see that I gave each link a specific id and then style them with inline CSS in the header (that was the key that wektech gave me).

The divs that are actually server side includes are the global-nav-bar, the left-scan-column and the footer.

I do actually want to keep some of the global nav bar links active as they go to pages for pillows and natural history that then lead to the next tier of pages.  Others such as Contact and About could be logically disabled when one was on them.  With respect to my left/local navigation column, those links ideally would be disabled every time for the page that one was on.

Please note that if you do go and check out this page and its source code, the Home link goes to my current index file and hence web site, not the index page that will be part of the new site design.  I also only have a couple of the linked pages up on LP at the moment, just to test my various page layouts.

I had a sneaking suspicion from stuff I've been reading recently online that someone might mention PHP or Javascript, but to be honest I've taken long enough to learn CSS and get this version almost ready to go that I really can't afford to take the time to learn another "language", so I'll probably settle for a mostly decent coding that works and validates!
Logged
webweaver
Galactic Royalty
*****
Offline Offline

Posts: 206


WWW
« Reply #6 on: November 16, 2009, 06:18:35 PM »
I have had my page set up in the manner you described but did not have the enhancement of showing (in my nav bar) the current page.  Taking a  leap from your technique (thanks to wektech?) I have enhanced it.  You can see it here at http://weavehouston.org.

I am not quite as concerned as Mr. Phil about disabling the link.  I have a hope that my solution might make the user less likely to click on the current page as the link to it doesn't change on mouseover the way the other links do.

All I know is html and the simple ssi that I use. 

Mr. Phil, is there any possibility of a hover that would either change your mouse arrow to something that doesn't look clickable OR a little popup box that says "you are here" or some such? 

Love this thread - gave me something to act on immediately.  I know my library catalog link doesn't work to show the new system but I am reworking the whole catalog thing with library thing anyway.

Don't you just love lunarforums?   Applause

Webweaver
Logged
MrPhil
Berserker Poster
*****
Offline Offline

Posts: 5083
« Reply #7 on: November 17, 2009, 08:49:03 AM »
Quote from: webweaver on November 16, 2009, 06:18:35 PM
I am not quite as concerned as Mr. Phil about disabling the link.  I have a hope that my solution might make the user less likely to click on the current page as the link to it doesn't change on mouseover the way the other links do.

I like to completely disable links back to the same page, so that visitors don't get frustrated clicking on a link and nothing appears to happen. Since I use a scripting language (PHP), it's easy to code a fixed text label instead of a link. With HTML/SSI it's a lot tougher. One thing you should avoid is changing the layout of a page by completely removing links, etc. Instead, disabled links or buttons should be grayed out and deactivated -- the user sees that they're still there and the page layout hasn't changed, but it's obvious that nothing will happen when you click on it.

Quote
Mr. Phil, is there any possibility of a hover that would either change your mouse arrow to something that doesn't look clickable OR a little popup box that says "you are here" or some such? 

CSS: a:hover { cursor: not-allowed; } may work, but it may be limited to IE. There don't seem to be any standard cursors that really say "prohibited". a:hover { cursor: default } should give you the standard pointer arrow, so it won't look like the link text is clickable.

HTML: <a href="..." title="You are here!" ... > should give a "tooltip" pop-up over the link. I guess you could have it say, "don't press this".

In either case, you should probably style the link so that there is no underline and the color matches the rest of the text.
Logged
silknrocks
Trekkie
**
Offline Offline

Posts: 13
« Reply #8 on: November 18, 2009, 07:00:35 PM »
webweaver - delighted that you have used the solution!  Interesting web site; I've spent some time browsing.  Good question about disguising the link for the current page.

MrPhil - thank you for the code for modifying the cursor.  The CSS a:hover { cursor: not-allowed; } gave a "forbidden" symbol when the link was hovered over in both FF and IE which felt to me to be a rather negative image for my web visitors.

However, the CSS a:hover { cursor: default } also works to disguise the link it is applied to, and it works for me in Firefox3.5.5, IE 8.0, Opera, Safari and Chrome, so I'm going with that refinement.

Thanks again for all the help  Applause
Logged
Pages: [1]   Go Up
  Print  
« previous next »
 
Jump to: