Page 1 of 1
Frames Based PhpWcms
Posted: Tue 26. Apr 2005, 00:33
by 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,
Posted: Tue 26. Apr 2005, 02:44
by 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
Posted: Tue 26. Apr 2005, 08:19
by 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
Posted: Tue 26. Apr 2005, 08:47
by 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! */
}
Posted: Tue 26. Apr 2005, 11:52
by 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
Posted: Sun 11. Sep 2005, 01:36
by Darkmatter
Nicely done!
Can this also be accomplished with the content block not resizing on expansion/contraction of window size in IE/Firefox?
Thanks.