Setting the div height size equal to frame size height - 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.

Related

How to set image in background of frame in 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>

Space between frames

<!Doctype html>
<html>
<frameset rows="26%,24%,*" noresize border="0" frameborder="no" framespacing="0">
<frame src="frame_a.html" target="_self" name="logo" scrolling="auto">
<frame src="frame_b.html" target="_self" name="menu" scrolling="no">
<frame src="frame_c.html" name="images_slider" scrolling="auto" target="_self">
</frameset>
</html>
But still there is space between frames how to remove that space??? I want to remove space between menu and header which are frame a and frame b
Set the body and html margins to 0 within the frame_#.html files and you should be good.
Update the rows property in your frameset element
<frameset rows="26%,24%,*" noresize border="0" frameborder="no" framespacing="0">
from: 26%
to: 45
Example
I am using pixels instead of percentages (e.g. 45px = 45) for spacing between frame a and frame b.
You can adjust the 2nd parameter (24%) accordingly for spacing between frame b and frame c.
Documentation
Hope that helps!

Frameset not displaying

I got this exercise I have to make involving framesets. I've created this html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<frameset rows="50%,50%" cols="50%,50%">
<frame src="../../topleft.html" name="topleft">
<frame src="topright.html" name="topright">
<frame src="botleft.html" name="botleft">
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="brtl.html" name="brtl">
<frame src="brtr.html" name="brtr">
</frameset>
<frame src="botrbot.html" name="botrbot">
</frameset>
</frameset>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>topleft.html</title>
</head>
<body>
topleft
</body>
</html>
All the other html's are identical to topleft.html and therefor I've not included them. Nothing is showing in my browser. What am I doing wrong?
if you are using frameset there is no use of body, so just remove the <body> and </body>.
if you want the browser to display something when no frames are supported follow this link.
Frameset tag can't use the body, so just remove tag after try comes to output.

html frame only allow horizontal resize ie8

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>

Two frames one scrollbar

I'm trying to create two frames and make them scroll together,
for instance in the case of a page with a changing menu bar at the top -
I'm using a carousel - or a footer at the bottom,
that must appear as part of the page.
I want a page to look like one page that is also capable of scrolling,
but the page is actually composed of two frames.
Using this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Info from: http://www.webxpertz.net/forums/showthread.php?t=257 -->
<!-- Using this... -->
<meta NAME="Description" content="Outer frame(OneBaredFrame) used to wrap the header and body frames" />
<meta HTTP-EQUIV="Cache-Control" content="no-cache" />
<meta HTTP-EQUIV="pragma" content="no-cache" />
<title></title>
</head>
<frameset rows="1,*" border="0" frameborder="no">
<frame src="javascript:<HTML></HTML>" name="dummy" id="dummy"
frameborder="no" marginheight="0" marginwidth="0" noresize="noresize" scrolling="no"></frame>
<frame src="index_inner.html" name="OneBaredFrame"
id="OneBaredFrame" frameborder="no" marginheight="0" marginwidth="0" noresize="noresize" scrolling="yes"></frame>
<!-- the bottom frame above if scrolling="yes" doesn't show a scrollbar for me? -->
<!-- the top frame above if scrolling="yes" does show a scrollbar for me if rows="100,*" say? -->
</frameset>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta NAME="Description" content="Frames for within a scrollable frame">
<meta HTTP-EQUIV="Cache-Control" content="no-cache">
<meta HTTP-EQUIV="pragma" content="no-cache">
<title></title>
</head>
<!-- My header and body frames need to scroll together,
so I am using another frameset (the one above) to enclose these frames -->
<frameset rows="215,*" border="0" frameborder="no">
<frame src="Header.html" id="header" name="header" frameborder="no"
marginheight="0" marginwidth="0" noresize="noresize" scrolling="no"></frame>
<frame src="index_body.html" id ="body" name="body" frameborder="no"
marginheight="0" marginwidth="0" noresize="noresize" scrolling="no"></frame>
<!-- when the above are set to scrolling="yes" scrollbars appear for me for each -->
</frameset>
</html>
When using frames, each will get its own scroll bars.
You can't have a single scroll bar for two frames, precisely because the are two frames.
Update:
You can workaround this by making both frames non scrolling and wrapping both them within a third scrolling frame (whose only reason to exist is to provide a single scroll bar). The parent frame will handle scrolling of both inner frames together.
You need to add a new page with a frameset like the following, making sure the second one points to your frameset (and set SCROLLING="NO" on both framesets:
<FRAMESET ROWS="0%,100%"
BORDER="0"
FRAMEBORDER="NO">
<FRAME SRC=""
NAME="dummy"
FRAMEBORDER="NO"
MARGINHEIGHT="0"
MARGINWIDTH="0"
NORESIZE
SCROLLING="NO">
</FRAME>
<FRAME SRC="*url to your frameset*"
NAME="myframes"
FRAMEBORDER="NO"
MARGINHEIGHT="0"
MARGINWIDTH="0"
NORESIZE
SCROLLING="YES">
</FRAME>
</FRAMESET>
I got what you are looking for using IFRAME.
It's even more flexible than FRAME, since it doesn't require you to split the window from edge to edge, and each frame boundary doesn't need to be aligned with another one.
I used this for a webpage I just deployed and it works like a charm.
There is one drawback: the height of the principal frame must be fixed beforehands, and you need to overestimate it in order to avoid an inner scrollbar.
<BODY>
<CENTER>
<DIV style="display:table-cell; width:800; ">
<iframe WIDTH=800 HEIGHT=220 src="menu.html" name="topframe" frameBorder=0 SCROLLING=NO></iframe>
<iframe WIDTH=800 HEIGHT=380 src="home.html" name="contentframe" frameBorder=0 SCROLLING=AUTO></iframe>
<iframe WIDTH=800 HEIGHT=220 src="menu.html" name="bottomframe" frameBorder=0 SCROLLING=NO></iframe>
</DIV>
<CENTER>
</BODY>
Links in menu.html with TARGET="contentframe" do what you want it to do.