|
HTML - Frames' Height Problem
Hello. I am creating a website that has a frames layout as follows:
_______________________ | ..................................... | |______________________| | ..... | ................................ | | ..... | ................................ | | ..... | ................................ | |___|__________________| |______________________| Basically a header, a footer, links/navigation on the left, and the page in the center. My problem now is that I created this site in a high resolution (1280*1024) and when viewed in 1024*768 (standard for a lot of PC's I think), the Links frame becomes scrollable which is very ugly, and since the height of the header and footer are fixed, the main content frame becomes very flat (narrow is not a problem). My question now is: how do I assign fixed heights to the left (links/navigation) and the main content (center, right) so that if this webpage is viewed at a smaller resolution, the center and links frames are not individually scrollable, but that the ENTIRE page is scrollable (so the footer is not in sight, but at the bottom of the page). I'm not sure if the above is clear so I will say it again: main content and links are no longer scrollable (even in 1280*1024) but the entire webpage is scrollable. The links and content frames have fixed heights, and if this heigh it larger than the window size, the footer goes down and the entire webpage is scrollable. Thanks A LOT for your help! Similar TutorialsHi. I have an index page with a url on it. When user clicks on the url it displays the html page having two frames A and B. Frame A contains image1. Frame B contain some data and a submit button. When user enters the data and clicks the submit button Frame A is replaced with image2 and frame B with report. When user clicks browser back button, Frame A and Frame B is restoring back to image1 and data respectively. Now when user clicks again on browser back button, ideally the navigation should go to index page instead it displaying image2-data,image1-data and then goes to index page so instead on one click it takes two more clicks to go to index page. what is base target? Can i use that to solve the above problem. if so what and where do i need to include? Please some one respond ASAP. For better understanding my problem, go he http://www.pageresource.com/html/frameex5.htm. Here on left frame click on Change 2 Frames url. The left and right frame gets changed. Now click on browser back button only the right frame is restored not the left frame. Also to go to the page where we started we have to click 3 times instead of two. Can somebody throw light here?? -Thank you Sudhak hey guys, i am tushaar and this is my first post. i made an html doc in which there are 2 frames, left one and right one. in the right one is a list of links. if i click on ay one of the links in the right frame, its supposed to open in the left frame. this is the coding i put: <html> <head><title>Coded By Tushaar Talwar</title> </head> </body> <a href="http://www.kingsofchaos.com/recruit.php?uniqid=g78w334h" target="frame1">TheGodfather_KW</a> </body> </html> This is for the right frame. Now, when i click this link, instead of opening in the left frame, the whole frames disappear to be replaced by the destination of this wondow alone. This is the code of my frameset page. <html> <head> <title>Coded By Tushaar Talwar</title> </head> <frameset cols="80%,20%" border="10"> <frame src="about:blank" name="frame1"> <frame src="k1.htm" name=frame2> </frameset> </html> I have a page with 2 frames, top and bottom and there is a space between the frames. Does anyone know why? I'm trying to make the 2 images connected and if the resolution is bigger than 1024 x 768 then the 2 images should be centered vertically. Is that possible? Code: <!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>Untitled Document</title> </head> <frameset rows="304,*" frameborder="no" border="0" framespacing="0"> <frame src="top-main.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" /> <frame src="main.html" name="mainFrame" id="mainFrame" title="mainFrame" /> </frameset> <noframes><body> </body> </noframes></html> I am not getting that why css is not working with frameset nd frames ?? can anyone guide me ???? actually all my pages are jsp pages , i hv also follwed the standard syntax, but its not working please help me out Thanks Hi All Just posted a friends page and it looks o.k on ie but netscape won't display the right hand frames, the site address is:- http://www.inspirejournal.info/ and the html code for the page is <HTML> <HEAD> <TITLE>Inspire.com</TITLE> </HEAD> <FRAMESET> <FRAMESET ROWS="0,*" FRAMESPACING=0 FRAMEBORDER=0> <FRAME NAME="A" SRC="grey.htm" SCROLLING="NO" FRAMEBORDER=0> <FRAMESET COLS="90, 10, 150, *, 100 SCROLLING="NO" FRAMEBORDER=0> <FRAME NAME="B" SRC="grey.htm" SCROLLING="NO" FRAMEBORDER=0> <FRAME NAME="C" SRC="buff.htm" SCROLLING="NO" FRAMEBORDER=0> <FRAME NAME="D" SRC="menu.htm" SCROLLING="NO" FRAMEBORDER=0> <FRAMESET> <FRAMESET ROWS="200, *" FRAMESPACING=0 FRAMEBORDER=0> <FRAME NAME="E" SRC="welcome.htm" SCROLLING="NO" FRAMEBORDER=0> <FRAME NAME="F" SRC="content.htm" FRAMEBORDER=0> </FRAMESET> <FRAMESET> <FRAMESET COLS="100" SCROLLING="NO" FRAMEBORDER=0> <FRAME NAME="G" SRC="buff.htm"SCROLLING="NO" FRAMEBORDER=0> </FRAMESET> </HTML> I know from research that netscape handles frames a bit diffrently than ie but haven't been able to find the right bit of code to fix it. Any help would be most welcome. Thanks Eldarau I feel really stupid now, I can't figure out how to start a new thread. Please someone help me figure out what is wrong with my nested frames: <html> <head> <title></title> </head> <frameset rows="99%"> <frame src=""/> <frameset cols="20%,80%"> <frame src=""/> <frame src=""/> </frameset> </frameset> </html> They work individually but not collectively. Thanks in advance! Can anyone help me with a small issue I have with some frames? I've not used frames for ages, but have to for this project. I have 3 frames with fixed height and width, and the noresize attribute. Then I have 6 surrounding frames so the 3 content frames are always centered. My problem is the content frames resize when you shrink the browser. How can I stop this from happening? Page in question he http://www.swnetsolutions.com/frames/ The page is using the following code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>Untitled</title> <!-- start frames --> <frameset rows="*,351,*" cols="*,823,*"> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frameset cols="322,501"> <frame noresize="noresize" name="image" src="image1.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" /> <frameset rows="51,300"> <frame noresize="noresize" name="nav" src="test.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" /> <frame noresize="noresize" name="content" src="test2.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" /> </frameset> </frameset> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> <frame name="blank" src="blank.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" bordercolor="#ff0000" /> </frameset> <!-- end frames --> </head> <body> </body> </html> Hi All, I am creating a new website using html frames (I know, using the html frames are a bad idea but my client wants this). The website have a header, content panel and footer. Html frameset have 1px border. I need frames align centered in the webpage. could somebody help me to short it out. Frameset code is here <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>vvaves</title> </head> <frameset border="1" bordercolor="#CCCCCC" frameborder="0" rows="330,800,150" style="height:1180px"> <frame src="top_panel.html" frameborder="0" scrolling="no" noresize="noresize" /> <frame src="content_panel.html" frameborder="0" scrolling="no" noresize="noresize" /> <frame src="bottom_panel.html" frameborder="0" scrolling="no" noresize="noresize" /> </frameset><noframes></noframes> <body> <div align="center"></div> </body> </html> Please help me. Thanks in advance. Sunil Saini So we're fixing another one of our websites and it seems that when you click on the "home" button in the left frame... it opens up the home page in a new window rather than in the main frame. Ahhh difficulties. I've been thinking it's a target issue, but I can't figure it out where and why. Any help? http://www.carlsonbldgservices.com Thank you! thank you for taking the time to help. Being very new at HTML codes, I almost got it where I want it. The problem I have I can't see one of the objects in the web page. Can someone show me why its not showing up. Now be kind to me, like I said I so new at this. This will be my second day working with HTML. The codes that I do have. was pasted in from various web sites. The code as follows: HTML Code: <html>
<head>
<title></title>
</head>
<body>
<!-- Put the body of your page below this line -->
<HTML>
<HEAD>
<TITLE>SCHEDULE OF EVENTS</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=2>
<CAPTION>UPCOMMING EVENTS</CAPTION>
<TR>
<TH><div><embed src="http://widget-75.slide.com/widgets/slidemap.swf" type="application/x-shockwave-flash" quality="high" scale="noscale" salign="l" wmode="transparent" flashvars="cy=h5&il=1&channel=3170534137675403893&site=widget-75.slide.com" style="width:450px;height:425px" name="flashticker" align="middle"/><div style="width:450px;text-align:left;"><a href="http://www.slide.com/pivot?cy=h5&at=un&id=3170534137675403893&map=5" target="_blank"><img src="http://widget-75.slide.com/c1/3170534137675403893/h5_t001_v000_s0un_f00/images/xslide11.gif" border="0" ismap="ismap" /></a> <a href="http://www.slide.com/pivot?cy=h5&at=un&id=3170534137675403893&map=6" target="_blank"><img src="http://widget-75.slide.com/c2/3170534137675403893/h5_t001_v000_s0un_f00/images/xslide6.gif" border="0" ismap="ismap" /></a> <a href="http://www.slide.com/pivot?cy=h5&at=un&id=3170534137675403893&map=H" target="_blank"><img src="http://widget-75.slide.com/c4/3170534137675403893/h5_t001_v000_s0un_f00/images/xslide42.gif" border="0" ismap="ismap" /></a></div></div></TH>
<TH><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="416" height="312" id="mbox_player_309edbb41214e3c3be"><param name="movie" value="http://www.motionbox.com/external/hd_player/type=sd,video_uid=309edbb41214e3c3be" /><param name="allowScriptAccess" value="always" /><param name="allowFullscreen" value="true" /><embed src="http://www.motionbox.com/external/hd_player/type=sd,video_uid=309edbb41214e3c3be" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="416" height="312" allowFullscreen="true" allowScriptAccess="always" name="mbox_player_309edbb41214e3c3be"></embed></object></TH>
<TR>ALIGN=middle
<TH><object type="application/x-shockwave-flash" width="435" height="270" data="http://www.profileplaylist.net/mc/mp3player_new.swf?config=http%3A%2F%2Fwww.profileplaylist.net%2Fext%2Fpc%2Fconfig_black_noautostart.xml&mywidth=435&myheight=270&playlist_url=http%3A%2F%2Fwww.profileplaylist.net%2Floadplaylist.php%3Fplaylist%3D58484656%26t%3D1233933569">
<param name="bgcolor" value="#e8e8e8"/>
<param name="movie" value="http://www.profileplaylist.net/mc/mp3player_new.swf?config=http%3A%2F%2Fwww.profileplaylist.net%2Fext%2Fpc%2Fconfig_black_noautostart.xml&mywidth=435&myheight=270&playlist_url=http%3A%2F%2Fwww.profileplaylist.net%2Floadplaylist.php%3Fplaylist%3D58484656%26t%3D1233933569"/>
</object>
<br/>
<a href="http://www.profileplaylist.net"><img src="http://www.profileplaylist.net/mc/images/create_black.jpg" border="0" alt="Get a playlist!"/></a>
<a href="http://www.mysocialgroup.com/standalone/58484656" target="_blank"><img src="http://www.profileplaylist.net/mc/images/launch_black.jpg" border="0" alt="Standalone player"/></a>
<a href="http://www.mysocialgroup.com/download/58484656"><img src="http://www.profileplaylist.net/mc/images/get_black.jpg" border="0" alt="Get Ringtones!"/></a>
</div></TH>
<TH><div><embed src="http://widget-37.slide.com/widgets/slideticker.swf" type="application/x-shockwave-flash" quality="high" scale="noscale" salign="l" wmode="transparent" flashvars="cy=h5&il=1&channel=3170534137675390263&site=widget-37.slide.com" style="width:426px;height:320px" name="flashticker" align="middle"/><div style="width:426px;text-align:left;"><a href="http://www.slide.com/pivot?cy=h5&at=un&id=3170534137675390263&map=1" target="_blank"><img src="http://widget-37.slide.com/p1/3170534137675390263/h5_t000_v000_s0un_f00/images/xslide1.gif" border="0" ismap="ismap" /></a> <a href="http://www.slide.com/pivot?cy=h5&at=un&id=3170534137675390263&map=2" target="_blank"><img src="http://widget-37.slide.com/p2/3170534137675390263/h5_t000_v000_s0un_f00/images/xslide2.gif" border="0" ismap="ismap" /></a> <a href="http://www.slide.com/pivot?cy=h5&at=un&id=3170534137675390263&map=F" target="_blank"><img src="http://widget-37.slide.com/p4/3170534137675390263/h5_t000_v000_s0un_f00/images/xslide42.gif" border="0" ismap="ismap" /></a></div></div>
<div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450px;"></TH>
</TR>
<TR>
</BODY>
</HTML>
Hi All, I am building a website that has traditional nested frames. I am staying away from iFrames for search engine purposes. I am having a problem lining up a fixed background and content on both IE and Firefox. I can get everything to line up perfectly in Firefox but then IE misaligns everything. When I try to line it up in IE it still doesn't line up perfectly and then screws it up on Firefox. The style I am using is: body { margin: 0px 0px 0px 0px; background: url(img/content_bg.jpg) top center fixed no-repeat; background-attachment: fixed;} It's being used on this page: http://therestaurantdesigngroup.com/new/main.htm (Look at it in IE and FF, currently it's working in FF only) The entire site with frames is http://therestaurantdesigngroup.com/new/ (Look at it in IE and FF) If you want to look at the source files download them he http://therestaurantdesigngroup.com/new/mbaweb.zip I am not worried about the bottom frame at this time. I want to fix main.htm first. Thanks! Ryan Hi, One of my files is calling an iframe inside a single table. The code looks like following iframe.htm ========================================================================== <html> <head> <title> New Document </title> </head> <body topmargin="0" leftmargin="0" style="overflow:auto"> <table cellpadding="0" cellspacing="0" height="100%" width="100%"> <tr> <td><iframe name="parent_iframe" src="frames.htm" frameborder="0" framespacing="0" height="100%" width="100%" scrolling="yes"></iframe></td> </tr> </table> </body> </html> ========================================================================== frames.htm has following code ========================================================================== <html> <head> <title>Denials Management System</title> </head> <frameset rows="50%,*" border="1" bordercolor="black" marginheight="0" marginwidth="0" framespacing="0"> <frame src="frame_top.htm" scrolling="yes" name="topFrame"> <frame src="frame_bottom.htm" scrolling="yes" name="bottomFrame"> </frameset> <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> </body> </html> ========================================================================== Everything works fine. The only problem is resize functionality doesn't work in 'frames.htm'. After trying few options, I have found that if I remove height attribute from table (height="100%") in 'iframe.htm', resize starts working. But, this shrinks the iframe vertically. I have tried all other options but nothing makes the resize working. I am facing this problem with IE7. It works perfect with Mozilla Firefox 2.0. IE7 doesn't produce any error but the resizing simply doesn't work. Can someone help me please ? Thanks in advance. Regards, Sandeep Resolved and links no longer available so text removed. Hi, My site is here I am having problems with the left side. It looks how I want it in Firefox but in IE it is ignoring my height commands and centering all the rows across the whole table. Anyone know how I can get this to look the same in Firefox and IE? Bit of a numpty so please be gentle Thanks Jon I get the impressions that td height= 100% messes with a lot of web designers. I am one of them. Someone please help me with my problem, or at least point me towards a resource that discusses this issue. Both of my files work fine on my PC in both IE and Netscape. However, they mess up on certain Apple browsers. I think Safari is one that they mess up on. I don't have an Apple, so I have no way to fiddle with them. http://www.customrocknyc.com/content/main/service.php http://www.customrocknyc.com/content/main/designer.php As you can see, I'm just try to get this star design to wrap around text of different lengths. Apple doesn't display the text right, it leaves half empty cells, and arranges the graphics badly. Can anyone make this page work? The code to look at is between these two tags: <!-- BEGIN TABLE THAT HOLDS COMPLETE GREY-PINK BOX --> <!-- END TABLE THAT HOLDS COMPLETE GREY-PINK BOX --> Hello, I've recently noticed that IE renders this table a bit differently than most browsers (Firefox, Opera, Safari, etc). The real page is much more complicated and uses proper styling, but I simplified it into the code below. The inline CSS sets the height of each individual cell and then the last cell is not provided with a height. I would love for the last cell to take the rest of the available height. I've tried many things to try and get this to work (like setting the height to 100%). The page renders how I expect it to in every browser I've tested except for the IE series. It seems as though Internet Explorer decides to ignore my row heights and calculate its own for some reason. Also, using a fixed height for the last cell is not possible due to how dynamic the web page is. Does anyone have any tips? HTML Code: <table style="table-layout:fixed;" border=1 width=100%> <tr> <td style="height:17px;width:150px;"> </td> <td style="height:600px" colspan=3 rowspan=5>This should span all of the rows and the remaining columns</td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td>This cell should take the rest of the available column height area</td> </tr> </table> Thank you. Hi Folks, I have a problem with my wordpress template. It's a header - 2 column - footer design: | ----- header ----- | | -- col 1 -- | col 2 | | ----- footer ------ | The problem is, that in some cases (like the main page), the col 2 has a bigger height than col 1. What I need is col 1 to have the same height so it fills it with the same background top to bottom and doesn't leave this ugly empty part on the bottom. (I don't want to define a set height for the col 1 because both column's content is dynamic. you know the deal) What's my brainfart? The site is @ www.priedel.com/dic Thanks a lot! Paul hi guys below is my css code and html code respectively but id doesn't work in mozila the height of outer div and few more divs doesn't increase automaticaly , please help //////////css code //////// * { padding: 0em; margin: 0em; } body { padding: 35px 0px 35px 0px; } #upbg{ position:absolute; text-align:left; margin:0 auto; width: 100%; height:20px; z-index: 1; left: 0px; right:0px; top: 0px; background-color:#434343; } #outer{ position:relative; margin:0 auto; width: 901px; border:1px double #FF0066; background-color:white; z-index: 1; } #container{ position:relative; width: 901px; background-image:url('images/bg2.jpg'); background-repeat:repeat-x; z-index: 1; } #image{ width:30%; float:left; position:relative; } #contect12{ width:69%; float:right; position:relative; left: 6px; top: 0px; } #Contentcontainer{ position:relative; padding-top:10px; width:55%; left:7px; padding:5px; float:left; z-index: 1; } #contect1{ border: 3px groove #000000; width:100%; position:relative; background-image: url('images/2.jpg'); background-repeat: repeat-x; left: 3px; } #lmnu{ position:relative; width: 895px; z-index: 1; left: 0px; } #lMenubar{ position:relative; width: 20%; padding:5px; float:left; z-index: 1; left: 0px; } #lmenu{ width:100%; position:relative; padding-top:10px; } #RMenubar{ position:relative; width: 20%; padding:5px; float:right; z-index: 1; left: 0px; } #rmenu{ width:100%; position:relative; padding-top:10px; } #header{ width:901px;; position:relative; left: 0px; top: 0px ; margin-bottom:2px; } #menu{ position:relative;border-width: 1px; border-color: #666666; width:901px; height:31px; background-image: url('images/1.jpg'); background-repeat: repeat-x; left: 0px; top: 0px; border-bottom-style: solid; } .td { background-image:url('images/1.jpg'); height:30px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#990033; font-weight:normal; background-repeat:repeat-x; border:2px silver groove; } .td2 { background-image:url('images/1.jpg'); height:30px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#990033; font-weight:normal; background-repeat:repeat-x; border:2px lime groove; } //////////// Html Code //////////// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="en-us" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Rishabh Arts ,Art of Making Confident People</title> <link rel="stylesheet" type="text/css" href="default.css"/> </head> <body> <div id="upbg"> </div> <div id="outer"> <div id="header"><img src="1.jpg" /><img src="2.jpg" /></div> <div id="menu" style="left: 0px; top: 0px" ></div> <div id="container"> <div id="lmnu"> <div id="lMenubar"> <div id="lmenu"> <table style="width: 100%"> <tr> <td class="td" style="width: 169px" >Menu 1</td> </tr> <tr> <td class="td" style="width: 169px">Menu 1</td> </tr> <tr> <td class="td" style="width: 169px">Menu 1</td> </tr> <tr> <td class="td" style="width: 169px">Menu 1</td> </tr> </table> </div> </div> <div id="Contentcontainer"> <div id="contect1"> <div id="image" ><img src="rr.gif" style="float: left" /> </div> <div id="contect12"> skaydasid<br /> dasdgasd<br /> asdgasdas<br /> dasdhas </div> </div> </div> <div id="RMenubar" > <div id="rmenu"> <table style="width: 100%"> <tr> <td class="td2" >Menu 1</td> </tr> <tr> <td class="td2">Menu 1</td> </tr> <tr> <td class="td2">Menu 1</td> </tr> <tr> <td class="td2">Menu 1</td> </tr> </table> </div> </div> </div> </div> </div> </body> </html> Hi all, Having a bit of trouble with a table layout in IE. The following link renders correctly (or at least as I would like) in Firefox yet in IE the header and navigation bars are too think. I've tried adding a height attribute to all td's concerned, but to no avail. here's the link: http://www.events.ex.ac.uk/ivfdf2009...s/template.php any help you can offer muchly appreciated! |
|||||||