Somebody's Fat Posted March 20, 2006 Share Posted March 20, 2006 I'm constructing a website avoiding any usage of frames. However, I'm using plenty of <iframes>. The top portion of the page is for navigation, a simple table with drop-down menus. Below that, I'm attempting to script a simple <iframe> that takes up the remaining width and height of the page below the title navigation. The width="100%" setting is working perfectly, but the height="100%" either makes the iframe vanish, or appear at seemingly random heights. At first, I attempted something as simple as this: <iframe src="Homepage.htm" width="100%" height="100%" /> Unhappily, this didn't work. In Firefox, the iframe was about 150px high, and in IE, the iframe was about 150px too high, meaning there were 2 active scrollbars next to each other. I could trial & error this all night, but I'd rather post now and learn if there's something else I should be doing. Thanks. Link to comment Share on other sites More sharing options...
Somebody's Fat Posted March 20, 2006 Author Share Posted March 20, 2006 Based upon the 80 views and 0 replies, I take it nobody knows the answer...? Link to comment Share on other sites More sharing options...
Somebody's Fat Posted March 21, 2006 Author Share Posted March 21, 2006 Okay let me go about this another way...The dark grey area is the top of the webpage I'm attempting to create (obviously generic just to show the basics). If a page is extremely high with content, it is OK if the title scrolls off the page, although, I'd prefer for it to be stationary. The links are essentially roll-overs which bring up a list of further sections. When these links/sections are clicked, the LIGHT grey area changes depending on the content selected.Ok, so what I'm after is this: Based upon what you see here, what is the best way to go about creating this website? Frames would work, yes, but not with the rollovers I'm using, so that's a no. IFrames might work, but I'm having difficulty with the height attribute. If there's any other way you know how to do it, I'm all ears (eyes), even if it's some language I have no clue about (everything besides HTML, CSS & JavaScript).Thanks! Link to comment Share on other sites More sharing options...
Skemcin Posted March 22, 2006 Share Posted March 22, 2006 so you want the top area (dark grey) to be a fixed width and height and you want it to stay at the top of the page if the content that is loaded in the lower area (light grey) goes below the page fold. So basically, the lower (ligth grey) area is your <iframe>?so your problem is with the hieght and the scroll bars? Link to comment Share on other sites More sharing options...
Guest jvalick Posted March 22, 2006 Share Posted March 22, 2006 There is a simple solution to your problem. Use a table.1. Set both frames within one cell of a table. 2. Set your height and width of the table to "100%".3. Set your first iframe to it's desired height Ex: "100px" and the width to "100%".4. On your second iframe set the width and height to "100%".You are done.EXTRA:If you want to get rid of the margins surrounding your table, add a CSS script(which i have provided in the example below) to the <head> of the document that will configure the margin width of the body and the table.EXAMPLE CODE: <html><head><title>mypage</title><style type="text/css">body, table {margin: 0;}</style></head><body><table cellspaceing="0" cellpadding="0" border="0" height="100%" width="100%"><tr> <td> <iframe src="http://www.yahoo.com" height="100px" width="100%" frameborder="0"></iframe> <iframe src="http://www.w3schools.com" height="100%" width="100%" frameborder="0"></iframe> </td></tr></table></body></html> Enjoy!!~Val Link to comment Share on other sites More sharing options...
Somebody's Fat Posted March 22, 2006 Author Share Posted March 22, 2006 There is a simple solution to your problem. Use a table.1. Set both frames within one cell of a table. 2. Set your height and width of the table to "100%".3. Set your first iframe to it's desired height Ex: "100px" and the width to "100%".4. On your second iframe set the width and height to "100%".Actually, I had tried something similar along those lines, except the primary navigation wasn't using an iframe, and that didn't work. I seem to have found a different solution, however. The top navigation will remain consistent on each page of the website, including the forum, and under this train of thought, each page should simply link to or include it, and I've found a simple way to do this with php:<?php include ("navigation.php"); ?> Where index.htm is now index.php instead. This way, the external php document is included in the top area for the menu. The remaining pages fall by default below the top navigation. This way, I see no apparent need for an iframe for page content. I'm still constructing this, so who knows what else I'll stumble on, but thanks for the suggestions and help. Link to comment Share on other sites More sharing options...
Somebody's Fat Posted March 22, 2006 Author Share Posted March 22, 2006 so you want the top area (dark grey) to be a fixed width and height and you want it to stay at the top of the pageI've pretty much given in to having the navigation scroll off the page with the rest of the content for long pages. Other than the usage of frames, which I'm completely avoiding this time around, I know of no other way to have a stationary navigation bar at the top of a webpage. Unless... do z-index layers have the ability to separate themselves from the scrolling of lower layers of content? Link to comment Share on other sites More sharing options...
Skemcin Posted March 23, 2006 Share Posted March 23, 2006 have you search the forum for "scrolling div" cuz that was where I was going with my post after I was able to confirm that you wanted a stationary header but scrollable content.Here is an example:http://w3schools.invisionzone.com/index.ph...findpost&p=3872 Link to comment Share on other sites More sharing options...
Somebody's Fat Posted March 23, 2006 Author Share Posted March 23, 2006 have you search the forum for "scrolling div" cuz that was where I was going with my post after I was able to confirm that you wanted a stationary header but scrollable content.I hadn't heard of that until now actually, I'll give it a shot. Would you happen to know if a link to alternate content can be loaded within the div just like an iframe? Like this...<a href="link.htm" target="divname">LINK</a> where <div name="divname">(replaced content)</div> I gave that a shot, but it opened up the link in a new window. Link to comment Share on other sites More sharing options...
Somebody's Fat Posted March 23, 2006 Author Share Posted March 23, 2006 Nuts... and for the record: <div style="height: 100%; width: 100%; overflow: auto">(blah blah blah)</div> Has the same dimension problems as the iframe did. The overflow feature didn't apply to only viewable browser area, it extended all the way down to the end of the content. On top of that, a horizontal scroll bar was visible if the div had: a border, padding, or any margins. Link to comment Share on other sites More sharing options...
Somebody's Fat Posted March 23, 2006 Author Share Posted March 23, 2006 <table cellspaceing="0" cellpadding="0" border="0" height="100%" width="100%"><tr> <td> <iframe src="http://www.yahoo.com" height="100px" width="100%" frameborder="0"></iframe> <iframe src="http://www.w3schools.com" height="100%" width="100%" frameborder="0"></iframe> </td></tr></table> I gave this a shot, but I'm sorry to say I run into the same problem as I do using regular frames. The menu iframe (the top one) has drop-down menus that MUST overlap any content below it. So in other words, since the menu can't break free of the boundaries of the iframe, it must be contained within normal page content in order to overlap all content - iframes or otherwise. Thank you for the suggestion though. Link to comment Share on other sites More sharing options...
Skemcin Posted March 23, 2006 Share Posted March 23, 2006 Nuts... and for the record:<div style="height: 100%; width: 100%; overflow: auto">(blah blah blah)</div> Has the same dimension problems as the iframe did. The overflow feature didn't apply to only viewable browser area, it extended all the way down to the end of the content. On top of that, a horizontal scroll bar was visible if the div had: a border, padding, or any margins. a.) is any of your code available to view?b.) i'll post your other question tomorrow from work, but yes you can have a text link easily replace/change some content within a div. Link to comment Share on other sites More sharing options...
Somebody's Fat Posted March 24, 2006 Author Share Posted March 24, 2006 a.) is any of your code available to view?This is my current code:<?php include ("PHP/doctype.php"); ?><html><head><?php include ("PHP/head.php"); ?></head><body><?php include ("PHP/navigation.php"); ?><iframe src="iframe.htm" style="height: 100%; width: 100%"></iframe></body></html> b.) i'll post your other question tomorrow from work, but yes you can have a text link easily replace/change some content within a div.Are you referring to hidden/visible abilities or something else? I suppose it's a moot point to some extent if the div has equal issues when height="100%".I did some searching for this issue elsewhere on the web and found this link... I suppose it only confirms the problem is universal: Link. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now