Frameset in frameset border hell - html

I have a web page with lots of framesets and frames (don't ask), and I want to be able to show frame borders where the red borders appear in the mockup below (The vertical borders must be scrollable).
If I set frameborder="0" to the #outer frameset (i don't want any border to appear there), this prevents me from overriding it in the #middle frameset. Please not that there should not be a border in the #innerXXX framesets.
So, how can I show frame borders on the #innerXXX framesets? (only where the red lines are visible in the mockup)
Thanks.
P.S. Don't ask.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Frame desperation</title>
</head>
<frameset id="outer" rows="23, *" frameborder="0" border="0">
<frame noresize="noresize" scrolling="no" src="http://www.bing.com">
<frameset id="middle" cols="20,30%,35%,35%" frameborder="5" border="5" bordercolor="red" id="sizingControl">
<frame name="minimizeBar" noresize="noresize" id="minimizeBar" scrolling="no" src="http://www.bing.com">
<frameset id="inner1" rows="146,*,20" border-top="0" border-bottom="0" id="treePanel">
<frame id="treeToolbar" name="treeToolbar" scrolling="no" src="http://www.bing.com">
<frame id="treeContent" name="treeContent" src="http://www.bing.com">
<frame id="treeStatus" name="treeStatus" scrolling="no" src="http://www.bing.com">
</frameset>
<frameset id="inner2 rows="146,*,20" frameborder="0" border="0" >
<frame id="leftToolbar" name="leftToolbar" scrolling="no" src="http://www.bing.com">
<frame id="leftDocumentContent" name="leftDocumentContent" src="http://www.bing.com">
<frame id="leftStatus" name="leftStatus" scrolling="no" src="http://www.bing.com">
</frameset>
<frameset id="inner3 rows="146,*,20" frameborder="0" border="0" >
<frame id="rightToolbar" name="rightToolbar" scrolling="no" src="http://www.bing.com">
<frame id="rightDocumentContent" name="rightDocumentContent" src="http://www.bing.com">
<frame id="rightStatus" name="rightStatus" scrolling="no" src="http://www.bing.com">
</frameset>
</frameset>
</frameset>
<noframes></noframes>

I don't think you can have frameborders on framesets, just on frames themselves, so the best way to do this would probably to have a single frameset containing five frames - one at the top, one at the far left and three in the middle. You give the ones in the middle a frameborder. Then each middle frame points to an separate file which has a single frameset containing three frames - top, middle bottom. In other words:
Frameset
Frame (top)
Frame (left)
Frame (inner1) - add frame border
Frameset (in separate file)
Frame (top)
Frame (middle)
Frame (bottom)
Frame (inner2) - add frame border
Frameset (in separate file)
Frame (top)
Frame (middle)
Frame (bottom)
Frame (inner3) - add frame border
Frameset (in separate file)
Frame (top)
Frame (middle)
Frame (bottom)
Incidentally, regarding the code itself, there are missing quotation marks after inner2 and inner3. Also, you shouldn't have two IDs in a single element as this could mess up any JavaScript or CSS you write. Good luck with all those frames - you have my sympathy!

Related

How to do this layout with iframes, in HTML

The layout i want to make
I dont know how to get the frames to layout in the right position I want, so I could use help.
That is done using frameset. I have added frameborder="1"which will show the border, you can set it to "0" or remove the borders. You can change the border size by adding border="1px". And add bordercolor:#000; for adding colors to the border. And for scrolling you can use scrolling="Yes/No/Auto" in the frameset beggining tag.The code given below will not work on Stack Overflow, Codepen,or JSFiddle as <frameset> is no longer supported in HTML5. But you can save the file locally or try it on W3Schools by pasting the following code, and it will work.Edit the frame sources, else it will not work (as I have given invald pages).
<html>
<frameset frameborder="1" rows="20%, 80%"><!--set frameborder value "0" for hiding the borders -->
<frame src="https://via.placeholder.com/1000X150/181818/FFFFFF/?text=20%">
<frameset cols="25%, 75%">
<frame src="https://via.placeholder.com/150X500/181818/FFFFFF/?text=25%">
<frameset rows="50%, 50%">
<frame src="https://via.placeholder.com/700X250/181818/FFFFFF/?text=75%">
<frameset cols="75%, 25%">
<frame src="https://via.placeholder.com/600X200/181818/FFFFFF/?text=50%">
<frame src="https://via.placeholder.com/200/181818/FFFFFF/?text=25%">
</frameset>
</html>

white space on the entire screen when i use frameset

I have a big white space filling almost half of the screen, this is the same error on every browser. Even when i click links it doesn't go away.
Here is the index file
<html>
<title>Terrapene.dk</title>
<frameset rows="*,*" cols="316" framespacing="0" frameborder="0" border="false">
<frameset rows="72,89%">
<frame name="hoved3" src="front.htm" target="_self" scrolling="no" noresize marginheight="5">
<frameset cols="*,80%">
<frame name="hoved5" src="bond.htm" target="_self" scrolling="auto" noresize>
<frame name="hoved4" src="Velkommen/Velkommen.html" target="_self">
</frameset>
</frameset>
<noframes>
<body bgcolor="#008000">
</body>
</noframes>
</frameset>
</html>
I made the following change to the outer frameset to address the white-space issue (note the change from wildcard (*) to 100% height):
<frameset rows="100%,*" cols="316" framespacing="0" frameborder="0" border="false">
Here's a demo page on my server:
http://jackpattishalljr.com/stackoverflow/terrapene.html
Also, it probably wouldn't hurt to add the frameset doctype (although, this by itself, does not address the whitespace issue you found):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
P.S. Thanks for this BLAST FROM THE PAST with a frameset question ;)

How to Get Rid of a Single Border Between a Frame and a Frameset?

I've got a page with a toolbar in the top frame. I want borders between every other frame except between the toolbar and the two frames it borders.
<html><head><title>Test</title></head>
<frame src="toolbar.html" name="toolbar">
<frameset rows="44%,*">
<frameset cols="50%,50%">
<frame src="frame1.html" name="frame1">
<frame src="frame2.html" name="frame2">
</frameset>
<frameset rows="28%,28%" cols="50%,50%">
<frame src="frame3.html" name="frame3">
<frame src="frame4.html" name="frame4">
<frame src="frame5.html" name="frame5">
<frame src="frame6.html" name="frame6">
</frameset></frameset></html>
So, how would I remove the boarder between "toolbar" and "frame1"/"frame2" while leaving all the other boarders in place (including the one between frame1 and frame2)? I'm open to using iframes if that would do it, but I would need to see a code example because I have never used them.
I don't think you can gain sufficient control over the frameborders to do what you want. Best would be to not use framesets at all, but if you really want to, your best hope is to hide all the frameborders and have 1px of dark margin or padding around the edge of the html in each frame to stand in for the frame borders, except in the places where you want the borders not present.

how to restrict the page content becoming large at the time of split the old frame into multiple frames?

I have the frameset like this,
index.html
<frameset rows="137px,*" border="0" >
<frame src="first.html" scrolling="no" noresize="noresize"/>
<frame src="second.html" noresize="noresize" name="show"/>
</frameset>
first.html
<a href="home.html" target='show'>Home</a>
home.html
<frameset rows="20%,*" border="0" >
<frame src="third.html" scrolling="no" noresize="noresize"/>
<frame src="fouth.html" noresize="noresize" name="newshow"/>
</frameset>
when I click the Home link in first.html. It will be load on the show frame( home.html).
The home.html is having another two frames. it will be split into two frames. When this split happens all page content become large. How to get rid of this problem.
I am working with firefox 3.0.8. In google-chrome,it works fine.
Thanks

Jquery dropdown menu is covered by a frame on a webpage

I'm using a using this jquery dropdown menu in my banner frame (mail_frame.html). when it drops down it gets covered by another frame that's below it. even though i set the z-index of the drop down to 999 in it's css, it's still behind the other frame
frameset.jsp
</head>
<frameset id="frameMain" rows="84,*" framespacing="0">
<frame src="mail_frame.html" id="mail" name="mail" frameborder="0" border="0" marginwidth="0" marginheight="0" noresize="noresize" scrolling="no"/>
<frameset id="frameSet" cols="126,*" framespacing="0">
<frame src="leftNavigation.do?loadWelcome=true<%= currentURL %>" id="leftnav" name="leftnav" frameborder="0" border="0" marginwidth="0" marginheight="0" noresize="noresize" scrolling="no"/>
<frame src="empty.htm" id="main" name="main" frameborder="0" border="0" noresize="noresize" scrolling="yes"/>
</frameset>
</frameset>
</html>
how can i make it drop down on top of everything
Classic frames (what you're using) are completely independent windows. You can't have an element in one frame that then extends over the content of another frame. You can do that with iframes, but not with the kind you're using.
It may be time to consider moving to a frameless layout, as that's the direction the technology seems to be going. For instance, neither frame nor frameset is part of HTML5. As an alternative, you can use ajax (an increasingly outdated name, as I suspect most people are using it with JSON instead of XML now) to update individual elements within a page.