|
HTML - Frames Question - Scrolling & Fixed Sizes
Is there any way that I can set up a page with frames where the frames remain a fixed width and will stay that size even if the browser cannot show them in their entirety?
This is a simplified version of what I'm trying to do (with two random sites in the frames for an example) <html> <frameset cols="800, 800"> <frame src="google.com"> <frame src="yahoo.com"> </frameset> </html> How that is working right now is that if you reduce the size of the browser then the frames also reduce in size so that they both remain on the page... I don't want this. I want the frames to remain the fixed width (800) and if the browser is not large enough to display them (<1600), I want it to have a scroll bar along the bottom to scroll further right to view them. I don't really ever use frames though, so I'm not quite sure if there's a command to throw in either frameset or frame tags or if there's something else I need to do. Thanks! Similar Tutorialscan someone outline the steps to making a page with a fixed background and a scrolling foreground such as can be found here? http://www.paul-wallas.co.uk/ i've looked at the code and what information i've found on the web but i don't see how it is done. tia, I want the side columns on my website, http://www.thethuglife.com to be fixed, like a frame, while scrolling. They contain my ads and I want my ads visible to the visitor at all times. How can I make these side columns fixed like a frame, but still centered vertically and horizontally on any viewing size? Any help would be appreciated. Hi, I have had to use frames to get an audio loop to run consistently over multiple pages. However the issue i now have is with scrolling. The frame (top bar with just logo and audio script in) remains static when you scroll meaning the main page scrolls seperately. How do i get the whole page to scroll as one!? J Okay, so. Im completely new here! But I really need help fixing a tumblr theme code. The content/images is scrolling over/infront of the fixed header image, so what would be the code to fix that up? There is no CSS for the header as the original style didnt really include one. The HTML for the header is: <body> <head> <div style="width: 488px; height: 288px; margin: 0 auto; background: url(http://i56.tinypic.com/mwto2t.png) no-repeat top center fixed;"></div> <div id="yes"> <div id="center"> <div id="info"> <a href="/"></a><br><br> Thank you for any help I have a Flash menu in a top frame, with a bottom frame that holds the content. Some of the content is large and needs to be scrolled. I would like the site to appear frameless, so the menu scrolls along with the content (so if you scrolled all the way down, you wouldn't see the menu). I initially tried putting it all into another frame, but didn't have much luck with that. I'm open to any suggestions. Let me know if I need to clarify anything. Thanks. Hello. First time here asking for help. Hope there's a solution! The site in question is http://www.jason-bradbury.com/Design.html. It's my first attempt at web design and I'm stumped. The goal is to present my art portfolio in a horizontal scrolling layout with a fixed header and footer. Ideally it would look identical across the many browser platforms. On a Windows laptop, my page looks and functions as it should in the latest browser versions of Safari, Google Chrome and Firefox as long as there aren't a stack of toolbars enabled. If toolbars are present (mostly in Firefox), the footer gets truncated and the page will not vertical scroll to allow it to be seen. So my first problem is getting the vertical scrolling (for the entire page including header and footer) to appear only when necessary in that situation. On my Mac Pro (I have not been able to test a Macbook yet) the page appears normal across the board with Safari and Firefox (have not tested Chrome or IE) The second problem is that in all versions of IE (and older versions of Firefox prior to 4.0) the page is displayed incorrectly. In IE, the header is missing, the left margin is way off and a vertical scrollbar is present for the body (again, if the vertical scrolling was for the entire page it wouldn't be so bad). As for the horizontal scrolling, it is very sluggish in IE. Firefox only has the vertical scrollbar in the body problem and since the header is shown in that browser, the body overlaps it when scrolled up. The page was originally designed in iWeb and then I had to tweak the code in Dreamweaver to get the fixed header and footer. Hope someone can help me out here! Cheers, Jason. Hello, I am building a personal website from which I plan to link to other sites such as facebook. flickr, etc where I have publicly viewable content. I have been working on a frame that I will put on top of these pages when they are linked from my site. So, I have made the frame and corresponding html documents, but I was wondering... I have the top frame set at 25px, which is just enough to show a single line of text and some links. I used the * variable to make the bottom frame, which is the actual page, to fill in the rest. My problem is that it appears the frame is draggable, meaning you can pull it down farther or smush it all the way up to the top. Is there a way to fix this? I can provide the code for the frames if neccessary. here is the site: http://www.trevorsummerfield.us All help is greatly appreciated Thanks Can anyone tell me why someone may want to have frames or multiple html docs on a web page? I can't find a reason for this anywhere on the net? I am creating a site using frames and was wondering if it was possible to have the website centered so that it would look the same in all browsers. Also I am having an issue with the background on my right side frame repeating and I can't seem to get the no-repeat sort of codes to work for me. Any suggestions? Thank you. Is there a code to hide the scroll bar on the right altogether? I know there are some to change the colors, positioning, etc. I'm trying to get horizontal scrolling of images that scroll behind a block of fixed text. I attached a mock up. And here is one of the staging pages if you want to see the html/css. I'm trying to accomplish a "layered" effect of image gallery and text. As you can see in the mockup, the block of text has a transparent background to help this effect. I tried to do a hiden overflow for the horizontal navigation container and have the block of text be a container with a fixed position. But its a mess. Any advice on achieving this? **Edit: This site has the same kind of architecture I'm looking for - http://csaustodesign.com/work_ns.html I can't seem to figure out how this person did it though, their source code is a mess... <HTML> <HEAD> </HEAD> <frameset border=0 noresize=yes COLS="400,*"> <frame src="http://facebook.com" name="myframe1" scrolling=yes> <frame src="http://twitter.com" name="myframe2" scrolling=yes> </frames>et> <noframes> <body> This page uses frames, but your browser doesn't support them. </body> </noframes> </HTML> To make this real quick...I want to have twitter and facebook in two frames on one page...whenever I do it, both sites don't seem to allow it to happen. The entire thing just redirects me to Twitter's website automatically, and if I click on the Facebook frame it does the same. Any way around this? Thanks in advance! Hi guys, I am trying to help my friend figure out what is going on with his (VERY BASIC) website. I believe that he created it using dreamweaver originally, and then tampered with the code a little. The problem is as follows: The website seems to display perfectly as intended on mac ( safari) however when viewed on PC wit internet explorer the frames do not not work properly, They are opening in different windows etc. I know that no-on ould ever recommend building a site like this with frames, but would recommend iframes etc, however i ws wondering if there is a flaw in the code that can be fixed to resolve his problem simply? Thanks for even taking the time to read this, any helpful advice would be most appreciated! the code is as follows: The code titled "main" the main piece of code, then the coodes titled "top", "middle" and "bottom" are the codes for the respective frames. MAIN: -------------------------------------------------------------------------------------------------------- HTML Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> </head> <frameset rows="67,*,74" framespacing="0" frameborder="no" border="0"> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="topframe.html" name="topFrame" scrolling="No" noresize="noresize" name="topFrame" /> </frameset> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="midframe.html" name="mainFrame" name="mainFrame" title=""mainFrame" target="_self" /> </frameset> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="bottomframe.html" name="bottomFrame" scrolling="No" noresize="noresize" name="bottomFrame" /> </frameset> </frameset> <noframes><body> </body> </noframes></html> TOP: -------------------------------------------------------------------------------------------------------- HTML Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #A890AE;
background-image: url(Images/maze%20strip%20top.jpg);
}
.style1 {font-size: 8px}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
-->
</script>
</head>
<body onload="FP_preloadImgs(/*url*/'Images/image-g.gif'); MM_preloadImages('Images/discography-black.gif','Images/images-black.gif','Images/text-black.gif','Images/download-black 45pt.gif','Images/download-g.gif','Images/download-b.gif','Images/image-g.gif','Images/text-g.gif')">
<div align="center"><img src="Images/divider.gif" alt="." width="65" height="33" /><a href="download.html" target="mainFrame" onmouseover="MM_swapImage('download','','Images/download-g.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/download-b.gif" name="download" width="205" height="10" border="0" id="download" /></a><img src="Images/divider.gif" width="30" height="33" /><a href="images.html" target="mainFrame"><img src="Images/image-b.gif" name="images" width="124" height="10" border="0" id="images" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'images',/*url*/'Images/image-g.gif')" /></a><img src="Images/divider.gif" width="30" height="33" /><a href="text.html" target="mainFrame" onmouseover="MM_swapImage('text','','Images/text-g.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/text-b.gif" name="text" width="104" height="10" border="0" id="text" /></a><img src="Images/divider.gif" alt="." width="65" height="33" /><a href="midframe.html" target="mainFrame"></a></div>
</body>
</html>
MIDDLE: -------------------------------------------------------------------------------------------------------- HTML Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>untitled</title>
<style type="text/css">
<!--
body {
background-image: url();
}
.style1 {
border-width: 0px;
}
-->
</style>
<base target="_self" />
</head>
<body>
<div align="center">
<p> </p>
<p><a target="mainFrame" href="download.html">
<img alt="" src="Images/doomsayercoverthumb.jpg" width="319" height="319" class="style1" /></a></p>
<p> </p>
<p> </p>
</div>
</body>
</html>
BOTTOM: -------------------------------------------------------------------------------------------------------- HTML Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>untitled</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
background-image: url(Images/maze%20strip%20bottom.jpg);
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 13px;
font-weight: bold;
}
.style2 {font-size: 10px}
.style4 {font-size: 12px}
-->
</style></head>
<body>
<div align="center" class="style1">
<p class="style2"> </p>
<span class="style4">last updated 08/12/2011</span></div>
</body>
</html>
So a few questions, If you have a webpage within a frame, be it a regular frame or an iframe, and there is a link in the webpage inside the frame, if no target is specified for that link then by default the link loads in the same frame as the original web page, in all browsers, correct? Secondly, what is the syntax for specifying a target while doing a meta tag automatic refresh? Thanks for the help! Hi! I am new to HTML. Stuck at this. Could someone please help? Need simple HTML code to create frame like this: Image below. Thanks I'm setting up a forum page for a friend. I already found the forum and am making it so that it looks consistent with the rest of his website. Another webmaster already built his site, I'm just creating another page that will include a forum. http://goltoof.com/wchr/wchra_mboard.html This is just a test page. You'll find that I'm using iframe to embed the forum page into the webpage. The problem I'm having here is that I want the table I created to stretch to 100% of the webpage so that people won't have to scroll using the main sidebar. You'll see in firefox it only shows part of the page while in ie the forum table doesn't show at all. Please let me know what I'm doing wrong and ask me to elaborate more if my question doesn't make sense to you. Thanks. I'm using the developer toolbar for FireFox and I've outlined the tables on the following web page. http://www.carlmumford.me/email Are the tables different sizes? Can someone explain to me why there is a slight change in table size when you outline them? I have the images at 600px wide and the tables are 600px with no padding. Ignore the bottom nested table because that's fine, it's the outline of the bigger tables that are bothering me. They show correctly but they are not quite lined up, is this fine? On another note, how do I get the link colours to display in gmail because they default to the nasty blue colour. I can't get them to display properly, what would you use? Can someone take a look at this page: http://www.robotsandcomputers.com/robots/index.htm in both IE and Firefox and tell me why the images in the right hand side of the screen are larger in IE than in Firefox? I have been through the code and I can cannot figure it out.. Thanks Oh, and something else... On the menu at the top of the page. On that page you notice (in Firefox) that the menu spans the entire screen. But if you click on any other link on that menu, then the menu bar is centered. I removed the <p></p> tags in the menu on the first page because in IE they were adding way too much space above and below the menu links. Is there anyway to center those links (like they are on all the other pages) but still have IE display them correctly? I hope that makes sense.... Thanks.... Hey i am just wondering why text size changes between browsers if you set it at a certain size. I set my text at 11px print, and the size from mozilla -> ie6 changes (gets bigger in ie6) but even greater difference in ie7... is there a way to make them all the same for sure without recoding for each browser? thanks in advance, -uberwalla I am trying to make a generic html page. This page is going to switch between two htm files. For some reason I cannot get the font to increase. I need it to be about 125font size in word. Here is what I have: span class="fontsize100"><Font Color=red>test</font></span> I assume this is incorrect? |
|||||||