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>
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 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>
I have an iFrame in a php, i want to show it as centered horizontal atleast, Here is my code. How can i edit it to make it show center horizontal in browser
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
</head>
<body>
<div>
<iframe src="https://<??>" width="850" target="_parent" height="850" scrolling="no" style="overflow:hidden; border:none;" style = "display:block;"></iframe>
</div>
</body>
</html>
You have two separate style tags. Be sure to merge them into one.
Try adding margin: 0 auto; to your style tag.
You need to put the iframe in a div then use css to center in the div like so:
<div class="myframe">
<iframe src="http://google.com" width="850" target="_parent" height="850" scrolling="no" border:none;></iframe>
</div>
<style type="text/css">
.myframe
{
margin: 0px auto;
width: 850px;
}
</style>
How can I center the whole iframeset??
<html>
<head>
<style>
</style>
</head>
<frameset rows="100,*" frameborder="0" border="0" framespacing="0">
<frame name="topNav" src="banner.php">
<frameset cols="200,*" frameborder="0" border="0" framespacing="0">
<frame name="menu" src="menu.php" marginheight="0" marginwidth="0" scrolling="auto" noresize>
<frame name="content" src="dashboard.php" marginheight="0" marginwidth="0" scrolling="auto" noresize>
</frameset>
</frameset>
</html>
I tried <div> and applying text-align:center; But It didnt work? !
You are either going to have to create a frame on the left and right sides, or just create an iframe and avoid the whole issue (better option). frameset is obsolete so you should avoid using it.
replace your frameset tags with these,
<frameset class="center" rows="100,*" frameborder="0" border="0" framespacing="0">
<frameset class="center" cols="200,*" frameborder="0" border="0" framespacing="0">
Addthese css codes for the page
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
}
Declare the width of the div and apply:
margin:auto;
or
margin-left:auto;
margin-right:auto;
Working Sample
Additionally, please avoid using frameset in the future! It is obsolete in HTML5.
Cheers!
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>