Frames Based PhpWcms

[jsw_nz]

I remember reading an article some time ago on the topic and as far as I know, PhpWcms does not support frames...so I guess asking the question again is a little moot. I have a project that would be ideally presented in frames. So my question is, might there be any way to get frames (or a frames equivalent) to work. What I want to happen is to have a dummy page at top and bottom and have all content located in center frame. The content would always be located at exact middle of the browser window. So I wanted to throw the idea out there...to see if others in the community might have an idea or two of how to accomplish this. I have provided a link of the page design (static) right now...this site is very much in progress.....


http://intermundi.webbiznz.co.nz/in_pro ... ault_1.htm


Cheers,

[jsw_nz]

I guess I answered my question:

I applied styles to the standard phpWcms layout tables and was able to create a 'frames equivalent' of the previously posted link. I created the page using Wcms on a local installation.....so all the code is generated by the system. I copied and pasted this into a new page (static) which I am posting here:

http://intermundi.webbiznz.co.nz/in_pro ... valent.htm


Style tags (default css):

Code: Select all

//outer table height of 100% applied to layout (all bocks input area)
.heightFull{
     height:100%;
}

//for content area (center) - fixed height 400px
.heightFixed {
     height:400px;

}

//for top area
.heightVariableTop{
     height:25%;
     vertical-align: bottom;
}

//for bottom area
.heightVariableBottom{
     height:25%;
     vertical-align: top;
}

Seems to work, but have not tested in larger screen settings.
There is an issue related to the differences between IE and Mozilla's applying %'s in the stylesheets. IE has preference to display pixel count first and then %. Since the Flash (center - content area) height property is set to 400 pixels...it gets treated first....if browser window height is 600px, the percentage style are readjusted (approx 16.5%.....Firefox prefers % first....not pixels....so it displays the full 25% then adds pixels (400 - center area), thus rendering the bottom section imperfectly (it ends up as far less that 25% ........will likely explore javascript methods to resolve this.....a brainteaser....

cheers,
john

[pico]

Hi

I have done it also with CSS and I have solved the IE/FF like this

http://www.hdk-online.de/css.phtml

[brans]

I would use 4 div layers:

Code: Select all

<div id="header"></div>
<div id="content">your flashcontent</div>
<div id="whitestripe">The blue speaker at the left</div>
<div id="footer"></div>

Code: Select all

/* Css Stylesheet: */

html,body {
margin: 0;
padding: 0;
width:100%;
}
#header {
height:yourheight;
width:100%;
background:url(../../img/im/lattice.jpg) black; 
/*you'd need to either create another div layer or combine shim.gif and lattice.gif */
background-repeat:no-repeat;
background-position:bottom center;
}
#content {
height:yourheight;
width:100%;
overflow:auto;
}
#whitesripte {
height:yourheight;
width:100%;
background:url(../../img/im/default_name_right.gif) white;
background-repeat:no-repeat;
background-position:top right; 
}
#footer {
height:yourheight;
width:100%;
background:url(../../img/im/default_tag.gif) grey;
background-repeat:no-repeat;
background-position:top right; 
/* see selfhtml css section for further instructions on background-position! */
}

[jsw_nz]

Hi guys,

Good to see you have got the CSS approach working. Particualrly nice job Pico. I gave CSS a spin and found the vertical- alignment within div id is a wee bit funny. Basically the top of the page (lattice-stars) uses a table (set to 100% height) and (vAlign=bottom) to push the lattice down >> next to the lights). I tried this same positioning scheme using the div, applied either to a table or a test image:

Code: Select all

#header { 
height:25%; 
width:100%; 
background:url(img/im/stars.jpg); 
background-repeat:repeat; 
vertical-align: bottom;
}

and found that the vertical-align: bottom approach seemed not too work....I did a wee search on this and found that this property does not vertically align elements inside a box element. It is not the css equivalent for the HTML attribute valign="bottom". Basically vertical-align aligns the content inline. That is not to say that this approach is not valid....like you said Brans, it might need to rely on another div tag or a style applied to either a tr or td tag, (which I am using at the moment). I do like your concept of overflow. I remember somewhere reading about custom divs, handling overflow uniquiely, such that custom buttons can hancle rollover events and scroll a clipped {CONTENT} layer. Could be a wee bit more elegant than a standard inline scrollbar.....just a thought here....although standard scrollbars are user friendly and easy to understand....

Just a word on the way Flash layout is handled. I set the vertical height to a fixed (400 px) and the width to percentage (100%). This allows you to show a 'panorama, since 100% tag tells the browser to show everything in the swf (even stuff that is technically of the Flash stage, which is 760 pixels wide - kind of an undocumented feature-mixing px with %....

btw: the site is 'very' unfinished

[Darkmatter]

Hi

I have done it also with CSS and I have solved the IE/FF like this

http://www.hdk-online.de/css.phtml

Nicely done!

Can this also be accomplished with the content block not resizing on expansion/contraction of window size in IE/Firefox?

Thanks.