A while ago spinder brought up the idea of liquid design, i have looked at it briefly until today.
I have designed a layout thats uses liquid design in sitespinner, while still very basic it allows you to build on it.
This a step by step tutorial on how to implement it into sitespinner or webengine.
Currently has a few problems in firefox which i am trying to resolve.
The index page will be pure code but will allow you to create your content pages in wysiwyg.
Easy customisation, will post more on that at a later date, i just thought this was something very useful and something that i belived could not be done with a wysiwyg
until now! View the finished page here 1. Copy and past this code into a custom code object
quote:
<style type="text/css">
#Menu {
position:absolute;
top:20px;
left:20px;
width:172px;
padding:10px;
background-color: #eee;
border:1px lined #999;
line-height:17px;
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
</style>
2. Create a seperate code object and copy and paste this code into it
quote:
<div id="menu">
<a href="javascript:loadintoIframe('geo91', 'page2.html')">Page 2</a><br>
</div>
*replace "page2.html" with your page link (this must be a "relative" link as it needs to probe your server)
**replace "page 2" with your link name
3.
Add this to the the code we created in step 1 before the </style> tag
quote:
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
height:32px;
border-style:solid;
border-color:#999;
border-width:1px 0px;
line-height:11px;
background-color:#eee;
font face: arial, verdana, times new roman;
font color: black
you should end up with a code looking like this
quote:
<style type="text/css">
#Menu {
position:absolute;
top:100px;
left:20px;
width:172px;
padding:10px;
background-color:#eee;
border:1px solid #999;
line-height:17px;
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
height:32px;
border-style:solid;
border-color:#999;
border-width:1px 0px;
line-height:11px;
background-color:#eee;
font face: arial, verdana, times new roman;
font color: black
</style>
4. Create another code object and copy and paste this code into it
quote:
<div id="header">
Your Site Name
</div>
5. Add this code to the original code object
quote:
#content {
position:absolute;
top:128px;
left:220px;
width:172px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
voice-family: "\"}\"";
voice-family:inherit;
width:600px;
You should now have something that looks like this
quote:
<style type="text/css">
#Menu {
position:absolute;
top:128px;
left:20px;
width:172px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:32px;
border-style:dashed;
border-color:#999;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#eee;
font face: arial, verdana, times new roman;
font color: black;
}
#content {
position:absolute;
top:128px;
left:220px;
width:172px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
voice-family: "\"}\"";
voice-family:inherit;
width:600px;
</style>
6. Create another code object and copy and paste this code into it
quote:
<head>
<script type="text/javascript">
//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["geo91", "Ggeo91"]
//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}
function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}
function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}
function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
</script>
</head>
7. Select each code object that you have created, once it is selected press Alt+O (left Alt and the letter "o") this should open the "object editor", go to the transformations tab and check "No CSS Positioning" , You must do this for each code object individually that has been created prior to this step.
8. Create yet another code object and copy and paste this code into it
quote:
<div id="content">
<iframe id="geo91" src="games/index.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>
</div>
9. Create more pages as you would a normal page, using sitespinner as a wysiwyg, remember to add the links into the code object "<div id="menu">", the menu will change itself no matter how many links you put in.
10. Any problems please post below
Currently Has a few teething problems with FireFox, Hopefully will be resolved soon
Special thanks to spinder for making the original post
