# HTML skill help



## Solaris17 (Jan 14, 2011)

Hey guys another question i know but this one has been perplexing me for hours.

basically what i need is this...

I have a page with a menu in it. your standard CSS menu horizontal style. HOWEVER what I want it to do is my problem. When you click on a link it will bring you to the page. However The menu itself is inside a wrapper. (This seem like a complicated setup but this is how I want it done. ) So if I click on a link it will redirect me to my page. but I no longer have access to the menu because it is only available on a certain page within the site. What I want to happen is the page to be displayed BELOW the menu bar. almost like a wrapper inside a wrapper. so im not redirected from the primary page the menu bar is on. Any hints tips or tricks?

I think I want maybe frames and use frameset but I dont know how to move the info from one to another.


----------



## temp02 (Jan 14, 2011)

IFrames is the only thing I recall now, use one for the "contents" and the "main page" stays with the menu. The links should be JS and change the location of the IFrame.

*EDIT:* here you go, example:

```
<html>
<body>
  <table style="height: 100%; width: 100%">
  <tbody>
    <tr>
      <!-- menu -->
      <td style="width: 120px">
        <input type="button" value="Click Me!" onclick="document.getElementById('contentz').src='http://www.google.com/webhp?q=techpowerup';" />
        <input type="button" value="Me Too!" onclick="document.getElementById('contentz').src='http://www.google.com/imghp';" />
        <!-- NOTE be carefull with javascript "escaping", if you use " first them inside use only ' -->
      </td>
      <!-- contents -->
      <td>
        <iframe id="contentz" name="contentsFrame" width="100%" height="100%" frameborder="0" margingeight="0" marginwidth="0" scrolling="yes" src="http://www.google.com/">Your browser does not support IFrames.</iframe>
      </td>
    </tr>
  </tbody>
  </table>
</body>
</html>
```

Hope it helps.

*EDIT 2:* And yes *FordGT90Concept* is right, the proper way to handle this would be to use server code, but that only works if you are using a "complex" webserver, for instance masterpages in asp.net, etc. As for a simple web page with no external tools used, IFrames should be _OK_.


----------



## FordGT90Concept (Jan 14, 2011)

Avoid frames like the plague ("you'll thank me later").  Menus should appear on all pages, all the time.  The best way to do that is via server-side includes via SHTML, PHP, ASP, etc.


If you are really stuck on frames, this will help you get stated (especially note the "Navigation frame" portion):
http://www.w3schools.com/html/html_frames.asp

Note the "HTML Links - The name Attribute" section here too (allows you to navigate up and down a single page):
http://www.w3schools.com/html/html_links.asp


----------



## Solaris17 (Jan 14, 2011)

FordGT90Concept said:


> Avoid frames like the plague ("you'll thank me later").  Menus should appear on all pages, all the time.  The best way to do that is via server-side includes via SHTML, PHP, ASP, etc.
> 
> 
> If you are really stuck on frames, this will help you get stated (especially note the "Navigation frame" portion):
> ...



I already have a manu that spans all pages. This menu is special and serves a specific purpose and doesnt belong on other pages.

I know all about frames and security risks if thats what your referring too. however I have a specific way I need to handle this and frames seems like its it.


----------



## Solaris17 (Jan 14, 2011)

temp02 said:


> IFrames is the only thing I recall now, use one for the "contents" and the "main page" stays with the menu. The links should be JS and change the location of the IFrame.
> 
> *EDIT:* here you go, example:
> 
> ...



This works. but it gets rid of the menu.

Take this post for example. what you are reading is currently in white (site) the first box (your quote) the original wrapper. the code box (displayed as a box inside the quote) is what I want the outputs of the menu (your quote) to go to.


----------



## temp02 (Jan 14, 2011)

You mean the menu on top the bottom side of the contents?
Simple, add another row to the table and cut the menu stuff to the last row.

*EDIT*Just realized what you might be thinking, if you are trying to make the menu go on the iframe don't try it, it won't work, iframes can't access the main pages content (at least the last time I checked they couldn't), Same thing goes for the main page trying to access the frames content, it can't.


----------



## Solaris17 (Jan 14, 2011)

temp02 said:


> You mean the menu on top of the contents?



the menu that was in the original wrapper. 

Here is my index page for the menu. (this is inside a wrapper on the site)


```
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>

<body>



<div id="menucontainer">
	<div id="menunav">
		<ul>
			<li><a href="" title="wat"><span>EX:1</span></a></li>
			<li><a href="" title="wat" class="current"><span>Home</span></a></li>
			<li><a href="index2.html" title="WAT"><span>EX:2</span></a></li>
			<li><a href="" title="wat"><span>EX:3</span></a></li>
			<li><a href="" title="wat"><span>EX:4</span></a></li>
		</ul>
	</div>
</div>



</body>
</html>
```

This is my prior iframe(index2.html) code. (called on index.html above) This kept the menu but made it appear inside itself instead of the menu remaining part of index.html.


```
<IFRAME SRC="index.html" WIDTH=100% HEIGHT=400>
If you can see this, your browser doesn't 
understand IFRAME.  However, we'll still 
<A HREF="index.html">link</A> 
you to the file.
</IFRAME>
```

yours worked but the menu was gone entirely.


----------



## temp02 (Jan 14, 2011)

See my EDIT above, what you are trying to do can't be done between frames, the menu must go on the "pseudo-master-page" and all the contents must remain on the frame.
Also you can't use "href" to change between pages, you'll need to use JavaScript on the "onclick" event (be it a "button", an "a" or anything else).


----------



## Solaris17 (Jan 14, 2011)

temp02 said:


> See my EDIT above, what you are trying to do can't be done between frames, the menu must go on the "pseudo-master-page" and all the contents must remain on the frame.
> Also you can't use "href" to change between pages, you'll need to use JavaScript on the "onclick" event (be it a "button", an "a" or anything else).



I see well thanks  In suppose its back to square one At least you saved me from wasting me time. hahaah I already blew a few hours on it.


----------



## FordGT90Concept (Jan 14, 2011)

Usually you show/hide content by using "display:none;" in the CSS or simply don't render it in the server-processed files (if page = this page, display it or not).


One HTML can change the contents of a frame via the target property.


----------



## Solaris17 (Jan 14, 2011)

FordGT90Concept said:


> Usually you show/hide content by using "display:none;" in the CSS or simply don't render it in the server-processed files (if page = this page, display it or not).
> 
> 
> One HTML can change the contents of a frame via the target property.



Well what I wanted to do. was have the wrapper just hold the menu.

then I was going to make multiple html files to hold the data I wanted and have the frame show that content and change when I clicked a diffirent link. without causing a refresh of the main site or navigating away from it. while maintaining the menu's current position on top of the window with the displayed content. Would their be any way to do that? It doesnt really need to be limited to HTML I guess. but I dont want this particular page/menu spread about the entire site. Just a contained page.


----------



## temp02 (Jan 14, 2011)

*FordGT90Concept* got something there!
It seems that with framesets (never heard of this) you can in fact do what you wanted, take this example, all you have to do is configure the frame set (how many frames, where each frame goes) and one off them can have the menu.
Thanks Ford


----------



## FordGT90Concept (Jan 14, 2011)

Here's example code of links and iframe on the main page.  When you click the links, it changes the iframe page:

```
<html>
<body>

<a href="http://www.google.com" target="myframe">To GOOGLE!</a> | <a href="http://www.cnn.com" target="myframe">To CNN!</a><br/>

<iframe name="myframe" src ="http://www.techpowerup.com" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>
```
Again, the anchor TARGETs and iframe NAME are the key.  Targets point to names.


----------



## Solaris17 (Jan 14, 2011)

Sweet ill have to try this out.


----------

