I have divided frame into two and want to set background image. Please assist.
<html>
<body>
<frameset rows="10%,*">
<frame src ="OK2.jpg">
<frame src ="OK3.jpg">
</frameset>
</body>
</html>
First of all, you shouldn't use Frames at all. They're old and depreciated, you ought to use < divs >
But anyway, if you are using frames on html, you can't add a background image to it since each frame is a separate document.
But you can sorta make it work, like so, In CSS for your page :
body {
background-image: url('path/to/image.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
}
Frameset and frame can link only to html page to work properly. Set two different background using tow different html page.
<html>
<body>
<frameset rows="10%,*">
<frame src ="back01.htm">
<frame src ="back02.htm">
</frameset>
</body>
</html>
Now create the two page (change only the background image name)
<html>
<body style="background: url('OK2.jpg') no-repeat;">
</body>
</html>
Related
I am trying to embedd a webpage from a cisco satellite device into a div tag of my webpage but I am getting the following problem
The page loads properly with the logon screen but as soon as I enter the login details it does not login byut instead stays on the login screen. I have tried both div and Iframe and both give me the same results. However when i access the device directly on IE or Chrome it works fine. The problem is only within my iframe or div.
My samle code is below however since you dont have access to the device you may not be able to see it working.. A shot in the dark here just asking you all to please give me some stuff to try out
<!<doctype html>
<html lang="en">
<body>
<div style="margin: 0 auto; width: 100%; height: 100%;">
<object type="text/html" data="http://192.168.10.107/"
style="width: 100%; height: 100%; margin: 1%;"> </object>
</div>
</body>
</html>
I also tried this with iframes as under but that also failed to work
<html>
<iframe src="http://192.168.10.107" sandbox ="allow-same-origin allow-scripts allow-popups allow-forms" width=100% height =100%></iframe>
</html>
Here I have a page that is like the one you want I guess.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MyTitle</title>
</head>
<frameset rows="0,*" border="0">
<frame name="header" scrolling="no" noresize target="main">
<frame name="main" src="http://192.168.10.107/">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
I have 3 html pages displaying in a main single html page.
I am using frameset to display all 3 pages into main page. top page contains a table placed under div (id=frame1). I want to set the height of table equal to the height of the top frame (ResultDetails.html).
<!DOCTYPE html>
<html>
<frameset frameborder="1" rows="70%, *">
<frame src="ProjectInfo/ResultDetails.html" name="Content"/>
<html>
<frameset frameborder="1" cols="50%, *">
<frame src="ProjectInfo/ProjectDetails.html" />
<frame src="ProjectInfo/VariableDetails.html" name="Content"/>
</frameset>
</frameset>
</html>
For div i am using following css.
#frame1{float:left;width:70%;height:400px;overflow:auto;}
The height of the frame may vary for different screen resolutions. How can I fix this.
What I am trying to do is probably very simple. I currently have frames in my index.html. I have a top, left, right bottom and center frame. This makes my page look pretty awkward. Here is my index.html:
<html>
<head>
<title>Support Portal</title>
</head>
<frameset rows="28,*,5" frameborder="0" border="0" framespacing="0">
<frame name="topNav" src="top_nav.html" scrolling="no" noresize>
<frameset cols="110,*,110" frameborder="0" border="0" framespacing="0">
<frame name="menu" src="menu_1.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
<frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
<frame name="related" src="related.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
</frameset>
<frame name="footer" src="footer.html">
<noframes>
<p>This section (everything between the 'noframes' tags) will only be displayed if the users' browser doesn't support frames. You can provide a link to a non-frames version of the website here. Feel free to use HTML tags within this section.</p>
</noframes>
</frameset>
</html>
What I was hoping to do was take my 'content.html' and all of my other html files and make the background-color transparent, and then put a background image behind everything so the page would look more like 1 page, instead of 5 put together. Here is the top of my content page:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family:Ubuntu, sans-serif;
font-size:10pt;
margin:10px;
background-color:transparent;
}
a {
color:white;
}
How would I go about accomplishing this?
Nope, with frames, each document is separate and nothing else is allowed (mostly, the code at the bottom may work in some browsers...) You could kind of hack it in like so:
In css for top_nav.html:
body {
background-image: url('path/to/image.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
}
In css for menu_1.html:
body {
background-image: url('path/to/image.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: -28px 0;
}
In css for content.html:
body {
background-image: url('path/to/image.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: -28px -110px;
}
In css for related.html:
body {
background-image: url('path/to/image.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: -28px right;
/* this may not work as the image may be too big... */
}
In css for footer.html:
body {
background-image: url('path/to/image.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom 0;
/* this may not work as the image may be too tall... */
}
That will be the solution to most likely work across browsers... however, I think the following works in some browsers.
frameset {
background-image: url('path/to/image.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
}
You shouldn't use frames at all. It's old and not reliable. What you should use is divs. If you want only one part of the page to change, you can use javascript and jQuery.
When using divs, you can use background property in CSS to manipulate the background of specific element, e.g.:
background-color: #FFF;
You also should use a seperate CSS file and link to it in the head tag (BEFORE any javascript file):
<link rel="stylesheet" type="text/css" href="styles.css">
The modern way of doing what you are trying to do, is with Javascript.
You want to have many static pages and built a web site with out having to edit 10 pages every time you want to add something on the menu for example.
I don't agree with you but anyway, you are looking for Ajax content load (you load your pages into one).
Or you can built your main page layout and then put iframes with can have the pages background.
I realy dont think that you should do tha but...
<html>
<head>
<title>Support Portal</title>
<style>
body{
/*background-image here*/
}
</style>
</head>
<body>
<div style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;">
<iframe name="topNav" src="top_nav.html" scrolling="no" style="border:0px;width:100%;position:absolute;top:0px;left:0px;right:0px;height:28px;"></iframe>
<div style="position:absolute;top:28px;bottom:5px;left:0px;right:0px;">
<div style="position:relative;height:100%;width:100%;">
<iframe name="menu" src="menu_1.html" scrolling="no" style="border:0px;position:absolute;top:0px;left:0px;bottom:0px;width:110px;height:100%;"></iframe>
<div style="position:absolute;top:0px;left:110px;right:110px;bottom:0px;">
<iframe name="content" src="content.html" scrolling="no" style="border:0px;width:100%;height:100%;"></iframe>
</div>
<iframe name="related" src="related.html" scrolling="no" style="border:0px;position:absolute;top:0px;right:0px;bottom:0px;width:110px;height:100%;"></iframe>
</div>
</div>
<iframe name="footer" src="footer.html" scrolling="no" border="0" style="border:0px;width:100%;position:absolute;bottom:0px;left:0px;right:0px;height:5px;"></iframe>
</div>
</body>
</html>
It is working
Try it works for me
<html>
<head>
<title>Support Portal</title>
<style>
HTML{
/*background-image here*/
}
</style>
</head>
<body>
<div style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;">
<iframe name="topNav" src="top_nav.html" scrolling="no" style="border:0px;width:100%;position:absolute;top:0px;left:0px;right:0px;height:28px;"></iframe>
<div style="position:absolute;top:28px;bottom:5px;left:0px;right:0px;">
<div style="position:relative;height:100%;width:100%;">
<iframe name="menu" src="menu_1.html" scrolling="no" style="border:0px;position:absolute;top:0px;left:0px;bottom:0px;width:110px;height:100%;"></iframe>
<div style="position:absolute;top:0px;left:110px;right:110px;bottom:0px;">
<iframe name="content" src="content.html" scrolling="no" style="border:0px;width:100%;height:100%;"></iframe>
</div>
<iframe name="related" src="related.html" scrolling="no" style="border:0px;position:absolute;top:0px;right:0px;bottom:0px;width:110px;height:100%;"></iframe>
</div>
</div>
<iframe name="footer" src="footer.html" scrolling="no" border="0" style="border:0px;width:100%;position:absolute;bottom:0px;left:0px;right:0px;height:5px;"></iframe>
</div>
</body>
I have created a web page with 2 framesets:
<frameset id='frameset1' cols="30%,70%">
<frameset id='frameset2' rows="15%,85%" frameborder="0" border="0">
<frame id="headerframe" name="frame3" src="source1" scrolling="no">
<frame id="contentsframe" name="frame1" src="source2">
</frameset>
<frame name="maincontent" src="source3">
</frameset>
I'm trying to make it so that the user can't resize the frames in frameset2 vertically, but can still resize horizontally. Is there a way of doing this in ie8? I have tried using the CSS resize property but I can't get it to work in this browser.
Thanks
Add this to the files source1 and source2:
<style type="text/css">
body {
overflow-x:hidden;
}
</style>
I have an iframe used as an index file to hide a url of next website.
<iframe style="position:absolute; top:0px; left:0px; " src=" http://..." width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
This all works in all known to me browsers instead of Internet Explorer (checked on 9). Is it a simple way to make it visible correctly?
First of all mixing html attributes with css is nasty thing.
Anyway this should work flawlessly if you are looking for fullscreen iframe:
CSS:
/* notice you actually don't need absoulte positioning */
body,html,iframe {
margin:0;
padding:0;
width: 100%;
height: 100%;
}
body,html {
overflow: hidden;
}
HTML:
<html>
// add head, css
<body>
<iframe src=""></iframe>
</body>
</html>
Unfortunately, not that I've found. Instead, you would need to use JavaScript to monitor window size.
Or just use a regular frame:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Page title</title>
</head>
<frameset rows="*">
<frame src="http://..." />
</frameset>
</html>