"Framed" look with CSS or HTML? [Archive]

dean80

03-07-2003, 10:09 PM

Hi guys. Subject of this thread is my question -- is there a relatively easy way to create a webpage that functions as if it were in frames, but really isn't?

I have my header and navigation that I'd like to be fixed while the content below is scrollable. If this can be done without 900 lines of JS code, I would be eager to hear a suggestion.

Thanks in advance for your ideas!
Dean

meow

03-07-2003, 10:41 PM

I think you are looking for 'position: fixed'. Only problem is that it isn't supported by IE Win. :(

brothercake

03-07-2003, 10:48 PM

what aspect of a frame's behaviour do you want - you want a part of it to scroll, and part of it static?

Mr J

03-07-2003, 11:05 PM

You'd be looking at something like this.

A script would be used to load contents into the "main" frame.
The amount of contents loading into the "main" frame would be a major factor in what method of "loading" you would have to use.

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY style="overflow:hidden">
<div style="position:absolute;left:10 top:10; width:750;height:100;border:2 solid gray">Header</div>
<div style="position:absolute;left:10;top:115;width:100;height:350;border:2 solid gray">Nav</div>
<div id="main" style="position:absolute;left:110;top:115;width:650;height:350;border:2 solid gray;overflow-y:scroll">main</div>
</BODY>
</HTML>

More Info?

dean80

03-09-2003, 02:25 PM

Hey, thanks for the replies!

Mr J, I made a test page of the code example you provided. When I simply code in some text as "content", then vertical scroll bar is in active. Is there a reason why?

Also, is there a way to have the position for the "frames" to be top-left? I tried 0,0 to no avail.

I appreciate the effort thus far though! Thanks!

Mr J

03-10-2003, 05:23 PM

Sorry, there was a typo in my last posting but to make the positioning easier I have nested the "Frames" in another DIV.

Also the scrollbar in the "main frame" should not now be shown unless the contents require it.

Also make sure that the embolded text is all one line as my last posting was not rendered correctly by this forum.

Please try the following.

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY style="overflow:hidden">

<div style="position:absolute;left:0; top:0">

<div style="position:absolute;left:0; top:0; width:750;height:100;border:2 solid gray">Header</div>

<div style=" position:absolute;left:0;top:100;width:100;height:350;border:2 solid gray">Nav</div>

<div id="main" style=" position:absolute;left:100;top:100;width:650;height:350;border:2 solid gray;overflow-y:auto">Main Contents </div>

</div>
</BODY>
</HTML>

dean80

03-10-2003, 09:01 PM

Hey J, BINGO! Works tight. I greatly appreciate the effort on your part.

The scroller works great and all the other "frames" in divs are stationary regardless of the content "frame". Very nice! I was able to find a way to create a custom colored scrollbar as well.

Life is good now. Thanks man.

dean80

03-20-2003, 04:22 PM

Quick question. Is there a way to get the div size of the scrollable area to be auto just like the scrolling ability? For instance in the scrolling area there is a fixed height right now, which I can specify for say...800x600 rez. The only problem is on a higher rez the fixed scrollable area is still the same...which if you've ever seen a situation like that, it doesn't look right. Is there a way to do something along the lines of a percentage height with a fixed width for the scrollable area? That way on a lower rez content will be scrollable and on a higher rez the content does not need to scroll.

Let me know what you think, everything else is supafly! :cool:

dean80

03-21-2003, 02:52 PM

Let me revise the question I just asked above. Is there a way to specify the remaining available height rather than a percentage?

I tried a percentage last night and hardcoded a percentage in that looks good on 800x600 but on higher resolutions a portion of the page is clipped. Specifically I coded in 60% height and looks good on 800x600 but 60% on 1024x768 leaves about a 1/3 of the page unusable. So, is there an attribute or a method that allows scrollable for the remaining height of the window, regardless of resolution?

Thanks!

Mr J

03-21-2003, 06:22 PM

Try the following page in a screen resolution of 800 x 600 and 1024 x 768.

See if this is the effect you are after.

Make sure that the bold lines are all one as sometimes it is not rendered correctly in this forum.

In 800 x 600 the main and nav "frame" heights are set to 350px
In 1024 x 768 the main and nav "frame" heights are set to 530px

The script automatically adjusts to suit

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script language="javascript">

</script>

</HEAD>
<BODY style="overflow:hidden">

<div style="position:absolute;left:0; top:0">

<div style="position:absolute;left:0; top:0; width:750;height:100;border:2 solid gray">Header</div>

<div id="nav" style=" position:absolute;left:0;top:100;width:100;height:350;border:2 solid gray">Nav</div>

<div id="main" style=" position:absolute;left:100;top:100;width:650;height:350;border:2 solid gray;overflow-y:auto">
<P>Main Contents <P>Main Contents <P>Main Contents <P>Main Contents <P>Main Contents <P>Main Contents <P>Main Contents <P>Main Contents <P>Main Contents <P>Main Contents <P>Main Contents <P>Main Contents <P>Main Contents <P>Main Contents
</div>

</div>
</BODY>
</HTML>

Vladdy

03-21-2003, 06:37 PM

Just drop the width and height and go for right and bottom to get the fluid layout that adjusts to whatever the browser size is (you would need a little JS to compensate for IE inability to render such simple CSS correctly). See example at: www.klproductions.com/home.html (still under construction)... in the bottom right corner set the presentation style to large and then reduce your browser window to make all the scrollbars appear....

dean80

03-26-2003, 04:37 PM

Mr J, I've tried your script, works extremely well for the purposes you coded it with. I reduced the timeout to 0ms to try to get an instant resizing effect. The scrollbar flickers of course, I guess this is because the browser originally is trying to create a scrollbar for an 800x600 window and on a larger window the scrollbar disappears after running the test. One thing I've noticed is that if you have the screen rez bumped up 1024 but have your browser sized at 800 scroll bars will not appear whatsoever. I guess the screen size takes precedence over browser window size.

Vladdy, I checked out your pages under construction, and for the most part your solution is a good one. However I have never attempted anything where do you specify right and bottom of a window before.

If either of you could help more I would appreciate it greatly. The time you've spent helping thus far is really awesome!

Thanks!

Vladdy

03-26-2003, 05:47 PM

Originally posted by dean80
I have never attempted anything where do you specify right and bottom of a window before.

There is nothing to it. Let's say you have banner on the top, menu on the left, footer on the bottom, and you want your content resize with the page.

#banner
{position: absolute;
top: 0px;
height: 100px; // banner height is fixed
left: 0px;
right: 0px;
}

#footer
{position: absolute;
bottom: 0px;
height: 50px; // footer height is fixed
left: 0px;
right: 0px;
}

#menu
{position: absolute;
top: 100px; //leave space for banner
bottom: 50px; //leave space for footer
left: 0px;
width: 200px; //menu width is fixed
}

#content
{position: absolute;
top: 100px; //leave space for banner
bottom: 50px; // leave space for footer
left: 200px; //leave space for menu
right: 0px;
overflow: auto;
}

That is all you need to create a layout that adjusts to the browser size and give content element its own scroll in the CSS compliant browsers.
Now IE does not render correctly elements that do not have height and width specified. This bug can be taken care of by a simple javascript.

APF_WIDTH=2;
APF_HEIGHT=4;

funciton IEBodyResizePlusOnLoad
{ if(browser!='ie') return; //add your sniffer here
fixIEAbsPos('banner',APF_WIDTH);
fixIEAbsPos('footer',APF_WIDTH);
fixIEAbsPos('menu',APF_HEIGHT);
fixIEAbsPos('content,APF_WIDTH|APF_HEIGHT);
}

function fixIEAbsPos(divID,dir)
{ div=document.getElementById(divID);
if(div.parentElement.tagName=='BODY')
{ parentWidth=document.body.clientWidth;
parentHeight=document.body.clientHeight;
}
else
{ parentWidth=div.parentElement.offsetWidth;
parentHeight=div.parentElement.offsetHeight;
}
if((dir & APF_WIDTH)> 0)
{ divWidth=parentWidth-div.offsetLeft-parseInt(div.currentStyle.right);
div.style.width=divWidth>0?divWidth:'1'+'px';
}
if((dir & APF_HEIGHT)> 0)
{ divHeight=parentHeight-div.offsetTop-parseInt(div.currentStyle.bottom);
div.style.height=divHeight>0?divHeight:'1'+'px';
}
}

just add IEBodyResizePlusOnLoad to body's onResize and onLoad

dean80

03-26-2003, 06:17 PM

Hi Vladdy! Thanks for the prompt response!

Looking at your stylesheet, I basically have that same setup, courtesy of help from Mr J. I did not know that overflow: auto; was an available feature -- that'll provide the scrolling as necessary I assume?

Looking at the JS you've posted, I'm very curious to know what APF_WIDTH=2; APF_HEIGHT=4; do. I'm a sucker for "how stuff works" explanations. Moreover, can I just create this as an external JS file to have all related pages link to?

just add IEBodyResizePlusOnLoad to body's onResize and onLoad
And I'm confused with this statement -- does that mean add it to the body tag?

Thanks again for your help!

Vladdy

03-26-2003, 06:34 PM

APF_WIDTH and APF_HEIGHT are just the constants I defined to use with the function fixIEAbsPos. They are defined as 2 in the power on N so that you can OR them like APF_WIDTH | APF_HEIGHT.

This JS code can be put in a JS file and linked to all the pages that use it.

This will attach the function to the body events:

<body onload="IEBodyResizePlusOnLoad();" onresize="IEBodyResizePlusOnLoad();" >

dean80

03-26-2003, 07:38 PM

Hi Vladdy. I'm getting an error when trying this out:

'browser' is undefined

Vladdy

03-26-2003, 07:52 PM

Yeah, as per my comment you need to replace that line with some browser sniffing code.
AFAK attachEvent is IE only method (DOM compliant method is addEventListener) so you can do

funciton IEBodyResizePlusOnLoad
{ if(document.body.attachEvent)
{ fixIEAbsPos('banner',APF_WIDTH);
fixIEAbsPos('footer',APF_WIDTH);
fixIEAbsPos('menu',APF_HEIGHT);
fixIEAbsPos('content,APF_WIDTH|APF_HEIGHT);
}
}

Mr J

03-27-2003, 11:41 PM

Sorry but I am curious?

Would the following not do the same thing?

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script language="Javascript">

</script>

</HEAD>
<BODY onload="resizeme()">

<div id="head" style="position: absolute;left:0px; top:0px; height:100px; background-color:green">Header</div>

<div id="menu" style="position: absolute;left:0px; top:100px;width:200; background-color:red">Menu</div>

<div id="content" style="position: absolute;left:200px; top:100px; overflow:auto; background-color:blue">Content
<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World</div>

<div id="foot" style="position: absolute;left:0px; bottom:0px; height:50px; background-color:yellow">Footer</div>

</BODY>
</HTML>

dean80

03-31-2003, 01:20 AM

Hey Mr J, yeah, I tested your solution and it does work to a degree. There is a separation of sections (header, menu, footer, content), but there are double scrollbars. The content div does have a scrollbar that auto sizes very nicely, however, there is a ghosted scrollbar spanning the entire height of the window as well.

Vladdy, using your solution is good as well, but I'm having problems in Netscape with the scrollable div. For some reason there's just a blank space in its place. Am I doing something wrong?

Both of you guys deserve a pat on the back for the continued help. Thanks!

dean80

04-03-2003, 09:16 PM

Found out about the ghosted scrollbar...by using the style="overflow:hidden" inside of the body tag, it eliminates that problem in IE. However, I guess in Netscape it treats all of the widths and heights as absolute and totally messes up the page. Is this just something Netscape is flawed with?

God...I hate Netscape.

Catman

04-03-2003, 09:47 PM

No, it's more an IE problem. The trick is to test for IE and set the body overflow to hidden only for IE using javascript:

if (isIE) document.body.style.overflow = "hidden";

To set the isIE value, search the Javascript forums for sniffer.

dean80

04-07-2003, 08:03 PM

Hey all,

Still having problems. I have a page online that is a work in progress. It is nearly complete with the exception of the scrolling issue. Ideally I want only the text portion of the page to be scrollable while the gray and header/menu portions are don't scroll at all.

click here (http://www.tampa-xway.com/www2/directors01.html) to see what's going on with the page. Assume any and all other links are dead.

When I use the style="overflow:hidden" attribute in the body tag, I get no scrollbars at all. When I remove that attribute the page scrolls in both the entire layout and the area that I want to scroll. A fresh set of eyes and brain cells are needed.

A solution that works in both IE and NS would be great. Thanks.

dean80

04-07-2003, 08:46 PM

UPDATE: I have it semi-working now, you can still use the link above. However, what's the best way to specify height of the scrollable section? Right now I use percentages because when I specify "auto" for a height, all of the content disappears in IE altogether.

Any thoughts?

Mr J

04-08-2003, 07:43 PM

I am not sure if I have lost the plot of your thread or wether my brain took a wrong turn but I have been tinkering around and have come up with the following.

The text is positioned at the left hand side of the image whilst the scrollbar is at the right hand side of the image.

The text scrolls, the image doesn't.

This effect uses 2 layers.

Layer one is set with the image positioned to the right.

Your text is placed in layer one.

The second layer is made big enough to cover layer one and the image and given a higher z:index.

The image is positioned using CSS.

Utilising the clip attribute limits the viewing areas of both layers.

The overflow attribute is used to hide the scrollbar of layer one whilst layer two is set at auto.

A table is placed in layer two whose height is made the same height of the contents of layer one.

This is determined by a small script

So the scrollbar of layer two scrolls the contents of layer one.

See the attachment

If it is no good just bin it

dean80

04-09-2003, 06:10 PM

Hi MrJ!

I am working with your example right now to try and make it fit my scheme here. The photo is part of the scrollable section of the page. Everything in that section is intended to be scrollable.

I really appreciate you helping me so much. Thanks!

Mr J

04-09-2003, 06:45 PM

If everything should be scrollable then ignore my example otherwise it might confuse the issue

dean80

04-09-2003, 06:59 PM

I think you've got some good ideas here, especially concerning the clip attribute. I'd never heard of it before. If I can just get the entire section scrollable with an auto calculated height, I'll be in business.

Still pluggin away...

select sires

04-09-2003, 08:13 PM

probably silly question .. In terms of creating a 'frames' look with CSS, is it possible for links to target a 'frame', or a i guess a < div>? Or, is it necessary to have separate pages for each target in the menu.

thanks.

Mr J

04-09-2003, 08:18 PM

You can target a "Frame" like this:

<a href="yourpage.html" target="YourFrameName">Your Link</a>

select sires

04-09-2003, 08:21 PM

ok great, so when planning it, if i have #right ,
I can just say a href="content.html" target="right" ?

Mr J

04-09-2003, 08:29 PM

DEAN80

So you want the "Content" div to scroll only when it is necessary?

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script language="Javascript">

</script>

</HEAD>
<BODY onload="resizeme()" style="overflow:hidden">

<div id="head" style="position: absolute;left:0px; top:0px; height:100px; background-color:green">Header</div>

<div id="menu" style="position: absolute;left:0px; top:100px;width:200; background-color:red">Menu</div>

<div id="content" style="position: absolute;left:200px; top:100px; overflow:auto; background-color:blue">Content
<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World</div>
</BODY>
</HTML>

The above is slightly different to my previous script

Mr J

04-09-2003, 08:32 PM

select sires

Yes

For a bit more information about frames see

www.huntingground.freeserve.co.uk/webplus/frames/frames.htm

dean80

04-10-2003, 04:47 PM

Hey MrJ.

Yes, that is the type of effect I'm trying to go for with the content. I'm trying to get it working on both IE and NS. Your example rocks with IE, but NS doesn't fill white areas of the page in the way that IE does. Basically it treats overflow:hidden attribute literally and small strips result instead of filling the space.

http://www.tampa-xway.com/www2/images/screenshot_ns.gif

dean80

04-10-2003, 05:02 PM

If I could get the functionality of the blue content div to work with the layout I'm using I'd be in business. Is there a way to determine the height of just a single div, or does the browser need to know the dimensions of the other divs relative to it in order to auto calculate height for it?

Vladdy

04-10-2003, 05:09 PM

just use right and bottom attributes

dean80

04-10-2003, 05:23 PM

With right:0px bottom:0px attributes we get the following. The green area is very curious though.

http://www.tampa-xway.com/www2/images/screenshot_ns2.gif

Vladdy

04-10-2003, 06:49 PM

Did you use right:0px with the header as well???

Mr J

04-10-2003, 07:42 PM

Post the code you used for your last example

dean80

04-10-2003, 07:44 PM

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script language="Javascript">

</script>

</HEAD>
<BODY onload="resizeme()" style="overflow:hidden">

<div id="head" style="position: absolute;left:0px; top:0px; right:0px; bottom:0px; height:100px; background-color:green">Header</div>

<div id="menu" style="position: absolute;left:0px; top:100px; right:0px; bottom:0px; width:200px; background-color:red">Menu</div>

<div id="content" style="position: absolute;left:200px; top:100px; right:0px; bottom:0px; overflow:auto; background-color:blue">Content
<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World<P>Hello World</div>
</BODY>
</HTML>