Log in

View Full Version : CSS Frames


balushahi
03-13-2008, 02:32 PM
I got a CSS frames layout from Dynamic drive (http://www.dynamicdrive.com/style/layouts/item/css-left-and-top-frames-layout/) with left, top & main divs. However I need another div before main which works just like it except it doesn't scroll. Just wondering how do I place that frame?

Thanks in advance for your help.
Nile
03-13-2008, 02:55 PM
What do you mean by one that doesn't scroll?
boogyman
03-13-2008, 02:56 PM
overflow:scroll;


apply that CSS style to whatever element you wish to scroll
balushahi
03-13-2008, 03:13 PM
Thanks I know how to scroll or not:

what I"m looking for is I need to put a top most css frame with 100% width for breadcrumbs. It would move the left, header & main frames down by whatever height I would set that to, like 50px;

the other one I need to place it below header and left of main frame. Please view the example page and you'll know what I'm talking about. Its on dynamic drive itself & I need to just modify it a little by adding 2 more frames.

Thanks
balushahi
03-13-2008, 03:18 PM
Thanks for your reply.

I know how to scroll a div with overflow property.
Please view the example on dynamic drive. I need to modify that page by adding 2 more frames on that page
1 - on top of the page with 100% width, so left=0

2- one under the header and to the left of main frame.

[breadcrumbs header]
------------------------------
left frame | main header frame
--------------------
| middle frame | main frame
Medyman
03-13-2008, 03:20 PM
Is this what you're looking for?

HTML:

<div id="header">
Header
</div>

Add that right below the <body> tag

CSS:

div#header { height:50px; width:100%; }



For your second one:

<div id="middleframe">
Middle Frame
</div>

Place this INSIDE the maincontent div

CSS:

div#middleframe { float:left; background:red; height:300px; }
balushahi
03-13-2008, 04:04 PM
When I added your given code for new divs, the results were like this -

In FF -
new header
------------
left | old top frame
| new middle layer [old main frame] (the new middle layer also scrolls with the main frame, it needs to be separate independent frame. Main frame picked the height of this new middle layer and doesn't show the scrolls)

{The above layout is what basically I'm going for. all those layers need to behave like independent frames}

In IE, however, its like this:
left | old topframe
| new header
| middle layer (this should not scroll - overflow:hidden & no set height, needs to be independent frame (should behave just like the left frame)
| old mainframe (scroll doesn't show at all)

Does that make sense?