iframe menu using html [closed] - html

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this 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
the menu looks ok, but the content are very small, how do i make it fill all the window?

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>

Related

How should I change this html snippet so the text Hello World is vertically on the middle of the screen?

<!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">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
</head>
<body style="width: 100%; height: 100%">
<table cellspacing="1" style="width: 100%; height: 100%">
<tr>
<td valign="middle" align="center">
<h1>Hello World</h1>
</td>
</tr>
</table>
</body>
</html>
The result of that html snippet is the word Hello World is on top of the screen. I did everything to make it in the middle. What can I do?
I tried another way using vertical align style
<!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">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>How to get Sexier Avatar in IMVU 2</title>
</head>
<body style="width: 100%; height: 100%">
<div style="height: 100%;width: 100%;vertical-align: middle">
<h1>Click here to Get Game and See Yourself</h1>
</div>
</body>
</html>
I clearly said that the vertical align for the div should be middle. It doesn't work.
It seems that the size of the body is not fullscreen. How do I make it full screen?
<!doctype HTML>
<html>
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
<style>
#centerInScreen {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#centerInScreen h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="centerInScreen">
<h1>Hello World!</h1>
</div>
</body>
</html>
Use this to center in screen.
Use CSS
<div class="center">Hello World</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}​

Misalignment when displaying image on different browsers

This is quick simple but I'm really a noob and don't know how to resolve this.
Basically, I have an e-card to be displayed on a webpage. There's an image and music playing in the background. The html works fine on Chrome and Firefox (centralised and playing well even though size differs on Chrome and Firefox) but the main problem lies on IE. When I open the webpage on IE, the image is not aligned correctly.
Below is my html code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
background-color: #214353;
}
</style>
</head>
<body>
<div align="center"><img src="image/Christmas-Card3.gif" width="800" height="533" /></div>
<div>
<div align="center">
<embed src="media/Feliz Navidad Instrumental Karaoke..mp3" width="32" height="32" hidden="ture" loop="ture"></embed>
</div>
</div>
</body>
</html>
Please help!
Thank you!
Use this style on your container div.
<div style="width: 800px; height: 533px; margin: 0 auto;"><img src="image/Christmas-Card3.gif" width="800" height="533" /></div>

HTML images resized when page refreshes

I'm working on a slideshow, and I'm getting a problem with the images being resized when the page refreshes. I've stripped my code down to the bare, gotten rid of all the javascript and as much of the html/css as I could while still getting the problem, and I simply cannot figure it out. The problem only arises on Safari. It doesn't happen every time I refresh, which makes it even more confusing.
I've posted a screenshot of how it should look, and then how it looks after I refresh the page. If you see anything in my code that could be causing this, please let me know.
HTML CODE
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Website </title>
<link href="slideshowRebuild.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="topDiv">
<iframe id="slideshowImg0" src="http://www.youtube.com/embed/xKBqSeYgQwo" frameborder="0" ></iframe>
</div> <!-- topDiv -->
<div id="imageDiv">
<table id="mediaMenu">
<tr>
<td class="subMenu"><img style="opacity:1.0" id="sub0" src="images/tebow.jpg" alt="Tim Tebow"></img>
</td>
<td class="subMenu"><img id="sub1" src="images/nash.jpg" alt="Steve Nash"></img>
</td>
<td class="subMenu"><img id="sub2" src="images/kobe.jpg" alt="Kobe Bryant"></img>
</td>
<td class="subMenu"><img id="sub3" src="images/giants.jpg" alt="San Francisco Giants"></img>
</td>
<td class="subMenu"><img id="sub4" src="images/tbrown.jpg" alt="Terrell Brown"></img>
</td>
</tr>
</table>
</div> <!-- imageDiv -->
</body>
</html>
CSS CODE
body{
background-color:#CCC;
}
#imageDiv {
border: 5px solid black;
width:93%;
position:relative;
background-color:#E0EAFF;
margin:3%;
}
#mediaMenu, #mediaMenu table {
margin:0;
padding:0;
border-spacing:0;
position:relative;
}
#mediaMenu td {
padding:0px;
margin:0px;
width:20%;
}
#mediaMenu img {
width:100%;
height:90px;
}
#contentText {
color:orange;
float:right;
width:39%;
}

html button CSS resize to fill div

I have read several similar questions, all involving use of width and height attributes either inline or in a class. However no matter how I seem to try it, it is not working.
Due to wanting to apply transformations to the button and text independently, I have had to use a class on the div and a sub class for the button. Stripping the code down, the width and height of the button are not filling the surrounding div.
I am working in Visual Studio 2008 and debugging against IE8 if that makes any difference.
HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!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" >
<head runat="server">
<title>Untitled Page</title>
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td >
<h1> TITLE</h1>
</td>
<td style="width:150px;height:40px;">
<div class="button-wrapper">
<button ID="RetrieveButton2" title="tooltip" runat="server" serverclick="RetrieveButton_Click">Search</button>
</div>
</td>
<td></td>
</tr>
</table>
</div>
</form>
</body>
</html>
CSS:
body
{
}
.button-wrapper
{
width: 150px;
height: 40px;
}
.button-wrapper button
{
width: 100%;
height: 100%;
}
It appears to be environmental. It was not happening on deployment, but it is all academic because requirements have changed so no longer using this code.

How can I get rid of margin around my HTML content?

The following HTML display fine.
<!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">
<head>
<title>Hello</title>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
However, there is a space of around 10 pixel between the left and top edges my div and the browser window.
Is there a way to get rid of it so that the div is "glued" to the browser window?
You could add CSS to the document....
<!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">
<head>
<title>Hello</title>
<style type="text/css">
body { margin:0; }
</style>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
Or you could add the CSS as an inline style
<!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">
<head>
<title>Hello</title>
</head>
<body style="margin:0;">
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
All browsers have a default margin around the top and left edge of the window. There's nothing wrong with your page. You merely need to tell the browser to remove the default margins.
To leave the padding and margins of other elements alone, just reset the body.
body { padding: 0; margin: 0; }
Use a CSS reset.
<style type="text/css">* { padding: 0; margin: 0; }</style>
Try adding style to the body tag, like this:
<!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">
<head>
<title>Hello</title>
</head>
<body style="margin: 0;">
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
If you do any of the above codes, but you do not set your table properties to percent rather than pixels, you will probably still end up with a margin-type space around your page. Like as in the bottom scroll bar will still show.
<table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="4">
<tr>
<td width="15%" align="left" valign="top" bgcolor="#B8B8B6">
</td>
<td width="85%" bgcolor="#FFFFFF" align="left" valign="top">
</td>
</table>