Having just started learning HTML, CSS, and JavaScript, I am attempting to incorporate a page as a submenu item on my website. Below is the code that I have so far:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=1024">
<head>
<link rel="stylesheet" type="text/css" href="homePage.css">
<title> Sample Website </title>
<script>
function showPicture(value)
{
if(value == "true")
{
document.getElementById("content").innerHTML = '';
document.getElementById("content").innerHTML
+= '<iframe id="Picturebox" width = "76%" height = "545" src="menu1.html"></iframe>';
}
else
{
document.getElementById("content").innerHTML = '';
}
}
</script>
</head>
<body>
<div id = "Header">
<h1> SAMPLE WEBSITE </h1>
</div>
<div id = "Banner">
<img id ="imgBanner" src = "./images/images.jpeg" />
</div>
<div id="container">
<div id = "menu">
<table cellpadding="15">
<tr>
<td>
<a href="#" onclick="showPicture('true')">Menu 1</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="showPicture('false')">Menu 2</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="showPicture('false')">Menu 3</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="showPicture('false')">Menu 4</a>
</td>
</tr>
</table>
</div>
<div id="content"></div>
</div>
</body>
</html>
menu1.html
<html>
<meta name="viewport" content="width=80%,height=80%, scale=0.5">
<head>
<link rel="stylesheet" type="text/css" href="subPage.css">
</head>
<body>
<h1>Menu 1 </h1>
<div id = "UnderLine"></div>
<p> Hello!,
this is a sample page having a heading,some content and 6 pictures.
</p>
<div id = "UnderLine"></div><br/>
<h4> Images </h4>
<div id = "UnderLine"></div><br/>
<div class="imgbox" style="position:relative;">
<img id = "pictures" src="./images/p (1).jpg" name=""/>
<img id = "pictures" src="./images/p (2).jpg" name=""/>
<img id = "pictures" src="./images/p (3).jpg" name=""/>
<img id = "pictures" src="./images/p (4).jpg" name=""/>
<img id = "pictures" src="./images/p (5).jpg" name=""/>
<img id = "pictures" src="./images/p (6).jpg" name=""/>
</div>
</body>
</html>
I've put in a lot of effort into this, but when the IFrame loads the page, it comes with a horizontal scroll bar. Can someone assist in making it fit within the specified dimensions without the need for scrolling? Most resources online focus on adjusting width rather than height, which hasn't been helpful.