HTML - is it possible to put an index in a cascading style sheet?

Forums: Web Development, Seo, Html, Css, Xhtml
Email this Topic • Print this Page

Greetings, webmasters and mistresses! Smile

I have my own website. And I have a rather large index going down the left side in column form. I may or may not wish to change that to the kind where you can hover over and see subsections but that's not my question right now.

Here's the deal. The index is getting to be huge as I add more pages. It currently looks a lot like this:

Code:

<div id = "menu">

        <ul><li>Internal Links

		<ul>

<li><a href="index.html">Index</a></li>

<li><a href="A.html">A page</a></li>

<li><a href="B.html">B page</a></li>

<li><a href="C.html">C page</a></li>

<li><a href="D.html">D page</a></li>

</li></ul>

<!-- <li><a href="place">Placeholder</a></li> -->

<ul><li>Section 1

<ul>

<li><a href="Section1index.html">Section 1 index</a></li>

<li><a href="Section1subpage.html">Section 1 subpage</a></li>

</li></ul>

<!-- <li><a href="place">Placeholder</a></li> -->

<ul><li>Section 2

<ul>

<li><a href="Section2index.html">Section 2 index</a></li>

<li><a href="Section2subpage.html">Section 2 subpage</a></li>

</li></ul>

<!-- <li><a href="place">Placeholder</a></li> -->

<ul><li>Section 3

<ul>

<li><a href="Section3index.html">Section 3 index</a></li>

<li><a href="Section3subpage.html">Section 3 subpage</a></li>

</li></ul>

<!-- <li><a href="place">Placeholder</a></li> -->

<ul><li>Section 4

<ul>

<li><a href="Extrapage1.html">Extra Page 1</a></li>

<li><a href="Extrapage2.html">Extra Page 2</a></li>

<li><a href="Extrapage3.html">Extra Page 3</a></li>

<li><a href="Extrapage4.html">Extra Page 4</a></li>

<li><a href="sitemap.html">Site Map and Search</a></li>

</ul>

</li>

<!-- <li><a href="place">Placeholder</a></li> -->

<li>External Links

<ul>

<li><a href="http://www.whatever1.com">external page 1</a></li>

<li><a href="http://www.whatever2.com">external page 2</a></li>

<li><a href="http://www.whatever3.com">external page 3</a></li>

<li><a href="http://www.whatever4.com">external page 4</a></li>

<li><a href="http://www.whatever5.com">external page 5</a></li>

<!-- <li><a href="place">Placeholder</a></li> -->

</ul>

</li>

        </ul>

      </div> <!-- end menu div -->

This is a lot to copy over each time, plus as you can see I already have a boatload of pages. It's possible that, in the future, I would forget to update a page or two with the full and complete menu.

Hence what I am looking for is something, either on the cascading style sheet itself, or perhaps some page where all of the other pages could pull from, which would show the menu. Then I figure I would only be updating the menu page, as opposed to every single page. All of the other pages (the non-menu ones) would simply have a link to the menu page, or it would work flawlessly as a piece of the cascading style sheet.

But -- I don't know what this is called or even if it would work. I am sure that enormous sites do not require this kind of manual updating of every damned page every single time a menu is updated. And I also recognize that the css is probably not the place for it, but that's kind of the idea, to have a centralized spot for the menu, and the effect would be a similar one.

Anyway, thank you in advance and I hope this explanation is clear.

Topic Stats
Top Replies
Link to this Topic

Type: Question • Score: 4 • Views: 3,143 • Replies: 10

No top replies

I'll send Mr B a link and see if he has any insights. It's all HTML to me Wink

1 Reply

@JPB,

You could handle this with a server-side include, I believe. All the menu-containing pages would have an include directive, which would point to a menu-containing file, instead of the menu content itself. Then, the web server would spot the directive, and substitute the menu file content for the directive, before serving the page.

This depends on your web server, though. I've done this on the Apache server, using PHP includes, FYI. More info: http://en.wikipedia.org/wiki/Server_Side_Includes

1 Reply

@JPB,

Gonna read this after I've eaten some bfast. Thanks!

0 Replies

@jespah,

Like JPB says - a server side include is the best solution - although how will depend on what webserver you are running.

Another option would be to use dreamweaver to manage the site and include the menu in the page template - dreamweaver will automatically update all pages that use the template when the template is changed.

0 Replies

@jespah,

jespah wrote:

Hence what I am looking for is something, either on the cascading style sheet itself, or perhaps some page where all of the other pages could pull from, which would show the menu. Then I figure I would only be updating the menu page, as opposed to every single page. All of the other pages (the non-menu ones) would simply have a link to the menu page, or it would work flawlessly as a piece of the cascading style sheet.

Can you speak a scripting language like Perl or Python? If so, you could write a script that digs through the directory your 'actual' pages are in, remember their locations, titles, and so forth, and automatically generate the index page from the information dug up. Once your script is written and debugged, you simply re-run it every time you add a new page to your site, and get your index page hassle-free.

Just my first guess.

1 Reply

@Thomas,

I only knew the barest scraps of Perl (and hated it; I know a lot of people love it but for whatever reason I am not one of them) back in a job I had in '04. Never learned Python.

It looks like a server side include is my best bet. I am on GoDaddy and I am quite sure they use Apache.

0 Replies

@jespah,

That can actually be done with CSS, but you really don't want to (short story: won't work in many browsers).

To do it purely through static files (no server-side scripting) you could use javascript. Here is an easy way:

1) Use a tool like this to generate javascript that simply writes html to the page: http://accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/

2) Save that output to a javascript file (just a text file named with a .js extension), something like menu.js. If you want you can skip to this step to test, just put "document.write("hello world");" in the file.

3) Include the javascript file where you want the menu to appear. Like this (the path in this example is to the menu file in the root folder of the website):

<script src="/menu.js"></script>

Then any menu updates just mean updating that js file.

Note: this is a bad solution for SEO and a couple of other concerns (like client-side caching that needs to be worked around). Some search engines won't follow your menu this way.

But pretty much any client side solution has that limitation. I've seen you use wordpress before, that is a dynamic solution with templates that largely solves this problem. If you can, I would recommend that you use that approach (that is, just install an existing free web app that handles a lot of that for you).

1 Reply

@Robert Gentel,

Huh. This isn't for the wordpress blog; it's for the other end of it (I have pages for, among other things, my resume). Let me think about this when I don't have as many distractions. Thank you.

1 Reply

@jespah,

Wordpress can be used for more than just the blog is what I guess I was saying. You could maintain your other pages in it as well if you want. Nick's wife's site is entirely wordpress, for example: http://www.leahashley.com

The "news" part is the only part that's the "blog" but the other pages are all wordpress too and you can use it as a CMS (content management system) for almost anything.

1 Reply

@Robert Gentel,

I'll think on it (again, when I can concentrate a bit better). The site's been non-WP (except for the blog) for so long that it's hard to conceive of it otherwise.

0 Replies

HTML - is it possible to put an index in a cascading style sheet?

Related Topics

Quick Links

My Account

able2know