Prevent frame scrolling when screen is too small - html

I'm using frames. My logo frame contains 2 pictures. One is 150px and other 600px making the whole logo size of 750px. Now, when user is making the window smaller than whole number then my second picture is being scrolled down without ability to see the picture.
The easiest possible way would be to connect 2 pictures into one 750px one, but is there a way to avoid this?
All I have as a code on my logo frame is...
<body class="logo_background">
<img src="assets/logo.png">
<img src="assets/logo_name.png">
</body>
my index.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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio</title>
</head>
<frameset rows="80px,100%" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="logo.html" name="logo" scrolling="no">
<frameset rows="*" cols="150,100%">
<frame src="menu.html" name="menu" scrolling="no">
<frame src="main_page.html" name="page" scrolling="no">
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>

use min-width on the container of the images to 750px.It'll solve the problem.. and i agree with #elclanrs .. use div's to achieve this.. frames might not be the best way..
.logo_background{
min-width:760px;/* just to be sure adding an extra 10px */
}
Now,the container will have 760px no matter what size the window takes,so your pictures dont lose their location -- dont go out of view , you can still scroll right to see the logo's - both of them.. :)
Here's a fiddle for your problem -- http://jsfiddle.net/mvivekc/h4gVe/

Just style the logo frame to be a width of no less than 750 px. I would think that would work.

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>

Frameset in frameset border hell

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!

What is wrong with this frameset code?

I am using Webmin on my server. For some reason it's decided to stop displaying anything on the root page, it's completely blank. However it's still returning code, shown below. The individual pages in the frames work perfectly but the frameset just doesn't want to display, in any browser, for some reason.
I have stripped it right down to this, running on a local server but it still doesn't show anything:
<!DOCTYPE html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Title</title>
</head>
<body>
<frameset cols="230,*">
<frame name="left" src="test1.html" scrolling="auto">
<frame name="right" src="test2.html" noresize>
</frameset>
</body>
</html>
I've also tried removing and changing various attributes but no luck.
The <frameset> element replaces the <body> element. You can't use both in the same document.
You should write:
<!DOCTYPE html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Title</title>
</head>
<frameset cols="230, *">
<frame name="left" src="test1.html" scrolling="auto" />
<frame name="right" src="test2.html" noresize="noresize" />
</frameset>
</html>
Take out the <body></body> tag.

Frameset isn't working in IE

First of all, why use a frame set in the first place you ask?
answer: Because my boss told me.
That been said, I have 2 files. Index.html and Head.html.
Contents of index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Site Title</title>
</head>
<frameset rows="122,*" FRAMEBORDER=NO FRAMESPACING=2 BORDER=0>
<frame name="t" src="head.html" scrolling="no" marginheight="0" marginwidth="0">
<frame name="b" src="http://www.website.com">
</frameset>
<noframes>
<p>You have frames turned off on your browser, please turn it on and reload this page.</p>
</noframes>
</html>
Contents of head.html:
<div style="border-bottom:2px solid #000;height:120px">
<center>This is the frame head.</center>
</div>
The code works fine in all browsers except Internet Explorer 7 and 8 (I don't care about 6). Is there anything I am doing wrong, and if not then can the same effect be achieved without frames and if so how?
#ricebowl If you run the 2 pages you will see that the website trying to be framed does not show up at all in IE but does show up in all other browsers.
i tried in IE 7,it works well.i don't know exactly what is your problems。

What's the best way to frame external webpages under a banner?

Google Images is the best example. Once you follow an image, a frame remains at the top of the page, always reminding you to return to Google. Does this technique have a special name and what is the most efficient way to do this?
I have this so far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Framed content</title>
<style type="text/css">
#bar {
width:100%;
height:10%;
}
iframe {
width:100%;
height:90%;
}
</style>
</head>
<body>
<div id="bar"><!-- PUT THE CONTENTS OF THE BAR HERE --></div>
<iframe src="{LOCATION OF THE HTML PAGE}"></iframe>
</body>
</html>
How can I adapt the above so that #bar can read 100px high rather than 10% high? How does that affect the code? This is the crux of my question.
Many thanks. Patrick
I think it's still just called 'framing' even if it's more advanced than the old frameset style popular in the late '90s and early 2000s. Other examples you could study include Facebook and Stumbleupon.
You could do what google does, and remove your doctype tag. your markup will pretty much work right away with this one modification, and you'll be able to set the bar's height to 100px, and the iFrame's height to 100% -- producing the desired results.
I've seen it called a "topbar"...
Personally, though, I find them really annoying unless they're serving a very useful purpose. I don't need to be reminded to go back to your website. You might as well just open the link in a new window at that point.
After a bit of investigation, I came across this, which doesn't use iframes at all. I know some people won't touch framesets with a bargepole, but I'd be interested to know what people think could be potential problems, other than the obvious "frames not supported".
<html>
<frameset rows="100,*" frameborder="no" framespacing="0">
<frame name="h" src="top_source" scrolling="no" noresize >
<frame name="t" src="main_source" scrolling="auto" noresize >
</frameset>
</html>
This makes use of the wildcard " * ", which div height attributes don't have.