asked on

Web Design Layout Help Needed

Hi guys!
I need some help on what is going on with my main page layout for my wiki.
The file is called GuMax.php.
The reason I need help is that Im trying to insert an image that is a viewport (a "glue-like" image that stays fixed in the one position on the page, no matter if you scroll off the page vertically, it remains visible and fixed right in position, so it looks glued).
Basically, the layout of my page currently is as follows:

========================================================= PHP Page (GuMax.php)
A B
<------------------><--------------------Body Content--------------><---------->

In the above, A and B is white space, and are 2 "column'" areas that extend the whole length of the page vertically.
So the page looks like 2 small columns (A and B either side of Body Content) plus a fat column smack bang in the middle vertically of the page.
Now, my issue is, is that I dont think in the code Im going to show you, that "A" and "B" are actually housed in their own div section.
The reason I say this to you is because what Im trying to do, is to load an image (the viewport) into the "B" area, and fix it into position half way down vertically, in "section" B.
If "A", Body Content, and "B" are ALL part of the same div, then Im not sure what to do to get this result, which is why I need you guys to look at GuMax.php and:
1) Interpret if A, B and Body Content are part of the same div
2) If they are, how can I "safely" break this up so that "B" is separate from Body Content, so that I can then place a viewport into "B"
I have tried to do this with no luck at the moment, and I think its because A, B and Body Content are part of the same div. Id like help trying to change this.

Guys, here is my code for the GuMax.php.
I then follow this by the code Id like to insert into "B".

============================================================== GuMax.php
<?php
/*
* ----------------------------------------------------------------------------
* 'GuMax' style sheet for CSS2-capable browsers. Loosely based on the monobook style
* @Version 3.1.1
* @Author Paul Y. Gu, <gu.paul@gmail.com>
* ----------------------------------------------------------------------------
*/

if( !defined( 'MEDIAWIKI' ) )
die( -1 );

/** */
require_once('includes/SkinTemplate.php');

/**
* Inherit main code from SkinTemplate, set the CSS and template filter.
* @todo document
* @package MediaWiki
* @subpackage Skins
*/
class SkinGuMax extends SkinTemplate {
/** Using GuMax. */
function initPage( &$out ) {
SkinTemplate::initPage( $out );
$this->skinname = 'gumax';
$this->stylename = 'gumax';
$this->template = 'GuMaxTemplate';
}
}

/**
* @todo document
* @package MediaWiki
* @subpackage Skins
*/
class GuMaxTemplate extends QuickTemplate {
/**
* Template filter callback for GuMax skin.
* Takes an associative array of data set from a SkinTemplate-based
* class, and a wrapper for MediaWiki's localization database, and
* outputs a formatted page.
*
* @access private
*/
function execute() {
// Suppress warnings to prevent notices about missing indexes in $this->data
wfSuppressWarnings();

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="<?php $this->text('xhtmldefaultnamespace') ?>" <?php
foreach($this->data['xhtmlnamespaces'] as $tag => $ns) {
?>xmlns:<?php echo "{$tag}=\"{$ns}\" ";
} ?>xml:lang="<?php $this->text('lang') ?>" lang="<?php $this->text('lang') ?>" dir="<?php $this->text('dir') ?>">




<head>

<meta http-equiv="Content-Type" content="<?php $this->text('mimetype') ?>; charset=<?php $this->text('charset') ?>" />

<?php $this->html('headlinks') ?>

<title><?php $this->text('pagetitle') ?></title>

<style type="text/css" media="screen,projection">
/*<![CDATA[*/ @import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/gumax_main.css?<?php echo $GLOBALS['wgStyleVersion'] ?>"; /*]]>*/</style>
<link rel="stylesheet" type="text/css" <?php if(empty($this->data['printable']) ) { ?>media="print"<?php } ?> href="<?php $this->text('stylepath') ?>/common/commonPrint.css?<?php echo $GLOBALS['wgStyleVersion'] ?>" />
<link rel="stylesheet" type="text/css" media="handheld" href="<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/handheld.css?<?php echo $GLOBALS['wgStyleVersion'] ?>" />






<?php print Skin::makeGlobalVariablesScript( $this->data ); ?>

<script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('stylepath' ) ?>/common/wikibits.js?<?php echo $GLOBALS['wgStyleVersion'] ?>"></script>
<?php if($this->data['jsvarurl' ]) { ?>
<script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('jsvarurl' ) ?>"></script>
<?php } ?>
<?php if($this->data['pagecss' ]) { ?>
<style type="text/css"><?php $this->html('pagecss' ) ?></style>
<?php }
if($this->data['usercss' ]) { ?>
<style type="text/css"><?php $this->html('usercss' ) ?></style>
<?php }
if($this->data['userjs' ]) { ?>
<script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('userjs' ) ?>"></script>
<?php }
if($this->data['userjsprev']) { ?>
<script type="<?php $this->text('jsmimetype') ?>"><?php $this->html('userjsprev') ?></script>
<?php }
if($this->data['trackbackhtml']) print $this->data['trackbackhtml']; ?>

<?php $this->html('headscripts') ?>
</head>








<body <?php if($this->data['body_ondblclick']) { ?>ondblclick="<?php $this->text('body_ondblclick') ?>"<?php } ?>
<?php if($this->data['body_onload' ]) { ?>onload="<?php $this->text('body_onload') ?>"<?php } ?>
class="mediawiki <?php $this->text('nsclass') ?> <?php $this->text('dir') ?> <?php $this->text('pageclass') ?>">




<div id="gumax-page">












<div id="gumax-header">
<a name="top" id="contentTop"></a>












<div id="gumax-p-login">
<ul>
<?php $lastkey = end(array_keys($this->data['personal_urls'])) ?>
<?php foreach($this->data['personal_urls'] as $key => $item) {
?><li id="gumax-pt-<?php echo Sanitizer::escapeId($key) ?>"><a href="<?php
echo htmlspecialchars($item['href']) ?>"<?php
if(!empty($item['class'])) { ?> class="<?php
echo htmlspecialchars($item['class']) ?>"<?php } ?>><?php
echo htmlspecialchars($item['text']) ?></a>
<?php if($key != $lastkey) echo "|" ?></li>
<?php } ?>
</ul>
</div>







<div id="gumax-site-logo">
<?php $sitelogo = $this->data['stylepath'] . '/' . $this->data['stylename'] . '/images/header/' . /* CHANGE_LOGO_IMAGE_HERE__BEGIN */ 'Panoramic.jpg' /* CHANGE_LOGO_IMAGE_HERE__END */; ?>
<a style="background-image: url(<?php echo $sitelogo ?>);"
href="<?php echo htmlspecialchars($this->data['nav_urls']['mainpage']['href'])?>"
title="<?php $this->msg('mainpage') ?>"></a>
</div>



</div>







<table id="gumax-p-navigation-table">
<tr> 



<td class="gumax-navigation-table-left">


<div id="gumax-p-navigation">
</div>

</td>



<td class="gumax-navigation-table-right">
s



</td>
</tr>
</table>







<div id="content">
<a name="top" id="top"></a>

<?php if($this->data['sitenotice']) { ?><div id="siteNotice"><?php $this->html('sitenotice') ?></div><?php } ?>
<h1 class="firstHeading"><?php $this->data['displaytitle']!=""?$this->html('title'):$this->text('title') ?></h1>
<div id= "bodyContent" class="gumax-bodyContent">
<h3 id="siteSub"><?php $this->msg('tagline') ?></h3>
<div id="contentSub"><?php $this->html('subtitle') ?></div>
<?php if($this->data['undelete']) { ?><div id="contentSub2"><?php $this->html('undelete') ?></div><?php } ?>
<?php if($this->data['newtalk'] ) { ?><div class="usermessage"><?php $this->html('newtalk') ?></div><?php } ?>
<?php if($this->data['showjumplinks']) { ?><div id="jump-to-nav"><?php $this->msg('jumpto') ?> <a href="#column-one"><?php $this->msg('jumptonavigation') ?></a>, <a href="#searchInput"><?php $this->msg('jumptosearch') ?></a></div><?php } ?>


<?php $this->html('bodytext') ?>
<?php if($this->data['catlinks']) { ?>
<div id="catlinks">
<?php $this->html('catlinks') ?>
</div><?php } ?>



<script type="text/javascript">
var winheight = parseInt(document.documentElement.clientHeight)
var boheight = parseInt(document.body.scrollHeight)
if(winheight <= boheight) {
document.write('<div class="backToTop"><a href="#" onclick="window.scrollTo(0,0);return false;" title="Back to the top of the page"> </a></div>');
}
</script>

<div class="visualClear"></div>
</div>
</div> 


</div> 




<div id="gumax-page-actions">
<div id="gumax-content-actions">
<ul>
<?php $lastkey = end(array_keys($this->data['content_actions'])) ?>
<?php foreach($this->data['content_actions'] as $key => $action) {
?><li id="ca-<?php echo Sanitizer::escapeId($key) ?>"
<?php if($action['class']) { ?>class="<?php echo htmlspecialchars($action['class']) ?>"<?php } ?>
><a href="<?php echo htmlspecialchars($action['href']) ?>"><?php
echo htmlspecialchars($action['text']) ?></a>
<?php if($key != $lastkey) echo "|" ?></li>
<?php } ?>
</ul>
</div>
</div> 



<div id="gumax-page-footer">





<div id="gumax-personal-tools">
<ul>
<?php if($this->data['notspecialpage']) { foreach( array( 'whatlinkshere', 'recentchangeslinked' ) as $special ) { ?>
<li id="t-<?php echo $special?>"><a href="<?php
echo htmlspecialchars($this->data['nav_urls'][$special]['href'])
?>"><?php echo $this->msg($special) ?></a> | </li>
<?php } } ?>
<?php if($this->data['feeds']) { ?><li id="feedlinks"><?php foreach($this->data['feeds'] as $key => $feed) {
?><span id="feed-<?php echo Sanitizer::escapeId($key) ?>"><a href="<?php
echo htmlspecialchars($feed['href']) ?>"><?php echo htmlspecialchars($feed['text'])?></a> </span>
<?php } ?> | </li><?php } ?>
<?php foreach( array('contributions', 'blockip', 'emailuser', 'upload', 'specialpages') as $special ) { ?>
<?php if($this->data['nav_urls'][$special]) {?><li id="t-<?php echo $special ?>"><a href="<?php
echo htmlspecialchars($this->data['nav_urls'][$special]['href'])
?>"><?php $this->msg($special) ?></a>
<?php if($special != 'specialpages') echo "|" ?></li>
<?php } ?>
<?php }

if(!empty($this->data['nav_urls']['permalink']['href'])) { ?>
<li id="t-permalink"> | <a href="<?php echo htmlspecialchars($this->data['nav_urls']['permalink']['href'])
?>"><?php $this->msg('permalink') ?></a> | </li><?php
} elseif ($this->data['nav_urls']['permalink']['href'] === '') { ?>
<li id="t-ispermalink"> | <?php $this->msg('permalink') ?></li><?php
}

wfRunHooks( 'MonoBookTemplateToolboxEnd', array( &$this ) ); ?>

<li><a href="/mediawiki/index.php/Special:Categories">Categories</a> | </li>
<li><a href="/mediawiki/index.php/Category:Templates">Templates</a> | </li>
<li><a href="/mediawiki/index.php/Special:Allpages">All Pages</a></li>
</ul>

</div> 



<div id="gumax-footer">
<div id="gumax-f-message">
<?php if($this->data['lastmod' ]) { ?><span id="f-lastmod"><?php $this->html('lastmod') ?></span><?php } ?>
<?php if($this->data['viewcount' ]) { ?><span id="f-viewcount"><?php $this->html('viewcount') ?> </span><?php } ?>
</div>




<ul id="gumax-f-list">
<?php if($this->data['about' ]) { ?><li id="f-about"><?php $this->html('about') ?> | </li><?php } ?>
<li><a href="/mediawiki/index.php/Change_Log">Change Log</a> | </li>
<li><a href="/mediawiki/index.php/Site_Extensions">Site Extensions</a> | </li>
<li><a href="/mediawiki/index.php/MediaWiki_HOWTOs">MediaWiki HOWTOs</a> | </li>
<li><a href="/mediawiki/index.php/MediaWiki_Links">MediaWiki Links</a> | </li>
<li><a href="/mediawiki/index.php/MediaWiki_Maintenance">Maintenance</a> | </li>
<?php if($this->data['disclaimer']) { ?><li id="f-disclaimer"><?php $this->html('disclaimer') ?> | </li><?php } ?>
<li><a href="http://mediawiki.org">Powered by MediaWiki</a> | </li>
<li><a href="http://paulgu.com">Design by Paul Gu</a></li>
</ul>
</div> 


<?php $this->html('bottomscripts'); /* JS call to runBodyOnloadHook */ ?>

</div> 


<?php $this->html('reporttime') ?>

</body></html>
<?php
      wfRestoreWarnings();
      } // end of execute() method
} // end of class
?>
=======================================================================

========================================================= Code Id like to insert into "B"
The following is a html file, but Id like to execute this in the "B" section of GuMax.php....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 1st January 2002), see www.w3.org"><title>position: fixed in Internet Explorer - additions on Gunlaug's homepages</title>
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
/* ===================== ELEMENT FIXED TO MIDDLE OF VIEWPORT */
/* ==================== DIV FIXME-MIDDLE ==DIV SETTINGS =================================================== */
div#fixme-middle {
position: fixed;
top: 50%;
left: 73%;
width: 0;
height: 0;
z-index: 2;
}

/* THE BELOW SECTION STOPS THE JERKINESS WHEN SCROLLING. MAKES IT LOOK GLUED TO THE SECTION */
* html div#fixme-middle {position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+((documentElement.clientHeight-this.clientHeight)/2)
: document.body.scrollTop
+((document.body.clientHeight-this.clientHeight)/2));

left:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollLeft
+ (document.body.clientWidth /1.8 )
: document.body.scrollLeft
+ (document.body.offsetWidth /1.4 ));
}

/* END OF IE EXPRESSION */

/* slight adjustment */
div#fixme-middle img {
float: left;
margin: -22px -100px -100px 75px;
position: relative;
}

</style>
</head>
<body>
<pre>
This is text for testing......... <br>
This is text for testing......... <br>
</pre>
<ul>
<li><a class="z1" href="http://www.howtocreate.co.uk/fixedPosition.html">Making IE 5.5+ use position: fixed</a></li>
<li><a class="z1" href="http://www.fu2k.org/alex/css/frames/">Frames without frames</a></li>
</ul>



<div id="fixme-middle"><img src="wd_additions_15_files/1072.gif" alt="fix me #3" title="fix me in the middle"></div>
</body></html>

=========================================================================

Thanks guys :>)

ebosscher

actually, if you're looking to "glue" this to the right what difference does it make if they are the same div or different divs? wouldn't you create a separate div on the page, increase the z-index and float it right? The glue functionallity would be on the scrolling of the page, and would be controlled by javascript. The page layout underneath the floating div shouldn't matter, should it?

ASKER CERTIFIED SOLUTION

ebosscher

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Simon336697

ASKER

Hi ebosscher!
Thanks for your comments. When you say:

"....actually, if you're looking to "glue" this to the right what difference does it make if they are the same div or different divs? wouldn't you create a separate div on the page, increase the z-index and float it right?........"

Youre probably 100% right, but thats the reason I asked.....Im not sure..and the same with your comment about the z-index..

Simon336697

ASKER

ebosscher!
The "glue" functionality --> Im not using javascript here for this.
Im using an alternative, and this is IE expressions.
I have this in my code above :>)
/* THE BELOW SECTION STOPS THE JERKINESS WHEN SCROLLING. MAKES IT LOOK GLUED TO THE SECTION */
...............................................
* END OF IE EXPRESSION */

Simon336697

ASKER

Thanks for your help :>)