Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

I need to make a table of contents


  • Please log in to reply
4 replies to this topic

#1 RB_Kandy

RB_Kandy

  • Members
  • 140 posts
  • OFFLINE
  •  
  • Local time:01:28 PM

Posted 15 June 2012 - 12:10 AM

I want to create a website to put my Star Trek reviews on, and it's been 10 years or more since I played with HTML, so I am basically re-learning this stuff.
My problem right now is trying to figure out how I can put a table of contents on the left (or right) of the web page.
I intend for the site to be as simple as a book, with the table of contents on the left.
My first attempt at this was using iframes. But I had this issue of the horizontal scroll bar not working, and the links (with long names) just word wraps instead of forcing a horizontal scroll bar. The second issue is that when you click a link in the 300 x 450 iframe, it loads the page within the iframe and not the page the iframe is on.

So I'm guessing that what I want to do is best done without iframes. But what other way is there? I know it can be done, I've seen it countless times.
I don't use CSS because I tried to learn it way back, and I just remember it being complicated, complicated as in it felt like I was using a sledge hammer to crack a walnut, more work than it saved me. And I don't know java, and I'd rather avoid java if I can.

So any ideas on how to set up a table of contents?

BC AdBot (Login to Remove)

 


#2 Andrew

Andrew

    Bleepin' Night Watchman


  • Moderator
  • 8,259 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:Right behind you
  • Local time:11:28 AM

Posted 15 June 2012 - 02:53 AM

You might find LionWiki interesting if you have web hosting with PHP enabled. It's a simple (a single PHP file) wiki (like Wikipedia) tool that stores articles as plain text files. I know it's not quite what you asked for but it may just be what your want :)

#3 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:12:28 PM

Posted 15 June 2012 - 09:29 AM

HTML 5 has a new 'nav' tag that can be used to crate a menu:
http://www.w3schools.com/html5/tag_nav.asp

<nav class=leftNav id=leftNav>
  <a href="/html/">HTML</a>
  <a href="/html5/">HTML5</a>
  <a href="/css/">CSS</a>
  <a href="/css3/">CSS3</a>
  <a href="/js/">JavaScript</a>
</nav> 

Css and html go hand in hand, and it is a foundation of web development. You will need to use it to position your menu. Something like this:
.leftNav
{
  position: absolute;
  top: 150px;
  left: 0;
}

To move the menu up or down, increase or decrease the 'top' setting.

Edited by groovicus, 16 June 2012 - 09:40 AM.


#4 RB_Kandy

RB_Kandy
  • Topic Starter

  • Members
  • 140 posts
  • OFFLINE
  •  
  • Local time:01:28 PM

Posted 15 June 2012 - 07:27 PM

Well I've decided that I will in fact use some CSS. I made an external css document, just specifying bgcolor and paragraph color. I figure if in a year from now my website has 50 reviews (thus 50 pages) and I want to alter the look of my website, I can just make the changes to the css document.

As for the links issue. I have found a solution (though not what I was looking for). I will add a banner to the top of the pages, simply click the banner to go to homepage. The homepage will contain the table of contents.

One way a lot of people add a table of links to their site is by making a table, having it float left or right. The problem with this is, if you have 10 pages on your site, and you add an 11th, you have to go modify the link table on the 10 other pages. If you're creating a site that won't be getting new pages added often, this is no big deal. But I will be adding a page or two every week. I'd hate in a year from now to have 50 reviews, and have to add a "page 50" link to the other 49 pages.
That's why I figured an iframe would have been perfect, just update the link on one document, and because all pages point to that document, the new link is added to all other pages automatically, like with an external css document.

I'm sure there is a simple java trick to make an object, float left, and pull content from "/this_page.htm"
If anybody knows how to do this, and it's just a matter of you handing me the code to copy and paste, I'll give it a try. But until then, I will just turn the index page into my table of contents and link back to home on each newly created page.

Edit: and thank you guys for the suggestions :)

Edited by RB_Kandy, 15 June 2012 - 07:28 PM.


#5 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:12:28 PM

Posted 16 June 2012 - 10:23 AM

One way a lot of people add a table of links to their site is by making a table, having it float left or right. The problem with this is, if you have 10 pages on your site, and you add an 11th, you have to go modify the link table on the 10 other pages.


Nobody that knows what they are doing does it that way. If you do it right, your menu resides in a completely separate file and you only have to change it in one place. See here in the section on server side includes. For example, the html I showed above would be in it's own file, called something like leftNavMenu.ssi, and would be included like this:
<!--#include virtual="/includes/leftNavMenu.ssi" --> 

There are some limitations on when server side includes can be used, so you will have to do al ittle research on your own.

Another way one can create a nav menu is to use javascript to dynamically create the menu. Here is the code for a complete page. (The formatting gets weird when I paste it in from my editor.. sorry)
<script>
  function loadMenu()
	{
		var nav = document.createElement("nav"),
				aTag, br,
				body = document.body;
				
		nav.innerHTML="";		
	 
	  aTag = document.createElement("a")
		aTag.href = 'http://www.google.com';
		aTag.innerHTML = 'Google';
		nav.appendChild(aTag);
		
		br = document.createElement("br");
		nav.appendChild(br);
		
		aTag = document.createElement("a");
		aTag.href = 'http://www.bing.com';
		aTag.innerHTML = 'Bing';
		nav.appendChild(aTag);
		
		body.appendChild(nav);
	}
   
</script>

<body onload="loadMenu();">

</body>   

Any yet another way is to use a server side language, like php (this example will only work if you have php installed on your system)
<?php
      echo("<body>");
      echo("  <nav class=leftNav id=leftNav>\n";
      echo("     <a href=\"http://www.google.com\">Google</a>\n");
      echo("       <br> ");
      echo("     <a href=\"http://www.bing.com\">Bing</a>\n");
      echo("  </nav> ");
      echo("</body>\n");
?>

In each case, your nav menu code would reside on a single page, and be included in one fashion or another on each of your pages.

Java is not used to style html pages; javascript is, and they are not the same thing at all. Using javascript, one can dynamically apply css to their elements.In javascript. I would do this to position the leftNav element:
var element = document.getElementById('leftNav');
element.style.position='absolute';
element.style.top='150px';
element.style.left='0';

Just a quick note, these are just trivial examples. Quite a few of us do this for a living, so we can probably answer any questions you might have.

Edited by groovicus, 16 June 2012 - 10:23 AM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users