iframe menu using html

Question

hi i want to make a menu on the side using iframe

below are my code, can anyone guide me, the display looks very weird.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Page</title>
<style type="text/css">
html 
{
 overflow: auto;
}
html, body, div, iframe 
{
 margin: 0px; 
 padding: 0px; 
 height: 100%; 
 border: none;
}
iframe 
{
 display: block; 
 width: 100%; 
 border: none; 
 overflow-y: auto; 
 overflow-x: hidden;
}
</style>
</head>
<table>
<tr>
<td>
This is the Menu
</h2>
<br>
<!--
#######################
the links to the iframe use the iframe name as the TARGET
####################### -->
<a href="http://archive.ncsa.illinois.edu/primer.html" target="iframe1">
Page 1
</a>
<br>
<a href="http://www.w3schools.com/cssref/pr_text_color.asp" target="iframe1">
Page 2
</a>
<br>
<a href="http://www.w3schools.com/colors/colors_picker.asp" target="iframe1">
Page 3
</a>
<br>
</td>
<td width="150" valign="left">
<p align="right">
<body>

<iframe id="tree" name="iframe1" src="http://www.agoogleaday.com/#date=2012-03-27" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="no" allowTransparency="true"</iframe>
</tr>
</table>
</body>
</html>

the output of this code look like this

enter image description here

the menu looks ok, but the content are very small, how do i make it fill all the window?

https://www.hotdesign.com/seybold/everything.html is probably worth a read too — Quentin, Aug 16 '16 at 09:07
The best solution to your actual problem would likely be to [not use frames](http://stackoverflow.com/questions/9466265/what-are-the-new-frames) — Quentin, Aug 16 '16 at 09:08
Why are you making a menu in a `iframe`? It seems that you are doing it to accomplish something that is not recommended using `iframes`. Possibly [XY question](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). Take a look at this link: [iframes](http://stackoverflow.com/questions/362730/are-iframes-considered-bad-practice), — Rick Bronger, Aug 16 '16 at 09:14
i want to make a menu on the side, but when navigate that menu, the whole page dont refresh, only the right side will change. is this the best way to do it ? — Ajwad Ibrahim, Aug 16 '16 at 09:17

score 1 · Accepted Answer · answered Aug 16 '16 at 09:04

I am not sure what are you looking for but you can increase width and height of iframe

html 
{
 overflow: auto;
}
html, body, div, iframe 
{
 margin: 0px; 
 padding: 0px; 
 height: 100%; 
 border: none;
}
iframe 
{
 display: block; 
 width: 100%; 
 border: none; 
 overflow-y: auto; 
 overflow-x: hidden;
  height:800px;
}
table{
  width:100%;
  table-layout:fixe;
  }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Page</title>

</head>
<table>
<tr>
<td style="width:20%;">
This is the Menu

<br>
<!--
#######################
the links to the iframe use the iframe name as the TARGET
####################### -->
<a href="http://archive.ncsa.illinois.edu/primer.html" target="iframe1">
Page 1
</a>
<br>
<a href="http://www.w3schools.com/cssref/pr_text_color.asp" target="iframe1">
Page 2
</a>
<br>
<a href="http://www.w3schools.com/colors/colors_picker.asp" target="iframe1">
Page 3
</a>
<br>
</td>
<td  style="width:80%;">



<iframe id="tree" name="iframe1" src="http://www.agoogleaday.com/#date=2012-03-27" scrolling="no" allowTransparency="true"</iframe>
</tr>
</table>
</body>
</html>

iframe menu using html

1 Answers1