Wed, 2013-05-22 23:49
http://mmaydesign.com/
i have added the animated element (with the branches and birds) to this template using:
position:absolute
but when i view the template on very large monitors or on small mobile devices, the animated element moves out of sync with the template elements.
index.php code
<?php /** * @version $Id: index.php 1434 2012-07-01 15:16:12Z james $ * @author RocketTheme <a href="http://www.rockettheme.com" rel="nofollow">http://www.rockettheme.com</a> * @copyright Copyright (C) 2007 - 2012 RocketTheme, LLC * @license <a href="http://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow">http://www.gnu.org/licenses/gpl-2.0.html</a> GNU/GPLv2 only * * Gantry uses the Joomla Framework (<a href="http://www.joomla.org" rel="nofollow">http://www.joomla.org</a>), a GNU/GPLv2 content management system * */ // no direct access defined( '_JEXEC' ) or die( 'Restricted index access' ); // load and inititialize gantry class require_once('lib/gantry/gantry.php'); $gantry->init(); function isBrowserCapable(){ global $gantry; $browser = $gantry->browser; // ie. if ($browser->name == 'ie' && $browser->version < <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/cool.png" title="Cool" alt="Cool" class="smiley-content" /> return false; return true; } // get the current preset $gpreset = str_replace(' ','',strtolower($gantry->get('name'))); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $gantry->language; ?>" lang="<?php echo $gantry->language;?>" > <head> <?php $gantry->displayHead(); $gantry->addStyles(array('template.css')); if ($gantry->browser->platform != 'iphone') $gantry->addInlineScript('window.addEvent("domready", function(){ new SmoothScroll(); });'); if ($gantry->get('loadtransition') && isBrowserCapable()){ $gantry->addScript('load-transition.js'); $hidden = ' class="rt-hidden"'; } else { $hidden = ''; } ?> </head> <body <?php echo $gantry->displayBodyTag(); ?>> <div style="z-index:1; position:absolute; right:100px; padding:0 10px; height:315px; width:400px;"><iframe frameborder="0" src="../../birds_and_flowers.html" height="315px" width="340px"></iframe></div> <div id="rt-headerblock"> <?php /** Begin Drawer **/ if ($gantry->countModules('drawer')) : ?> <div id="rt-drawer"> <div style="z-index:2; position:absolute; right:380px; padding-top:2px;"><a href="https://www.facebook.com/mmaydesignweb" target="_blank"><img src="images/fb_icon.png" /></a></div> <div class="rt-container"> <?php echo $gantry->displayModules('drawer','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Drawer **/ endif; ?> <?php /** Begin Top **/ if ($gantry->countModules('top')) : ?> <div id="rt-top" class="block-module"> <div class="rt-container"> <?php echo $gantry->displayModules('top','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Top **/ endif; ?> <?php /** Begin Header **/ if ($gantry->countModules('header')) : ?> <div id="rt-header"> <div class="rt-container"> <?php echo $gantry->displayModules('header','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Header **/ endif; ?> <?php /** Begin Navigation **/ if ($gantry->countModules('navigation')) : ?> <div id="rt-navigation"> <div class="rt-container"> <?php echo $gantry->displayModules('navigation','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Navigation **/ endif; ?> </div> <?php /** Begin Sub Navigation **/ if ($gantry->countModules('subnavigation')) : ?> <div id="rt-subnavigation"> <div class="rt-container"> <?php echo $gantry->displayModules('subnavigation','standard','menu'); ?> <div class="clear"></div> </div> </div> <?php /** End Sub Navigation **/ endif; ?> <div id="rt-transition"<?php echo $hidden; ?>> <?php /** Begin Showcase **/ if ($gantry->countModules('showcase')) : ?> <div id="rt-showcase"> <div class="rt-container"> <?php echo $gantry->displayModules('showcase','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Showcase **/ endif; ?> <?php /** Begin Feature **/ if ($gantry->countModules('feature')) : ?> <div id="rt-feature" class="block-module"> <div class="rt-container"> <?php echo $gantry->displayModules('feature','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Feature **/ endif; ?> <?php /** Begin Utility **/ if ($gantry->countModules('utility')) : ?> <div id="rt-utility" class="block-module"> <div class="rt-container"> <?php echo $gantry->displayModules('utility','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Utility **/ endif; ?> <?php /** Begin Main Top **/ if ($gantry->countModules('maintop')) : ?> <div id="rt-maintop" class="block-module"> <div class="rt-container"> <?php echo $gantry->displayModules('maintop','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Main Top **/ endif; ?> <?php /** Begin Breadcrumbs **/ if ($gantry->countModules('breadcrumb')) : ?> <div id="rt-breadcrumbs"> <div class="rt-container"> <?php echo $gantry->displayModules('breadcrumb','basic','breadcrumbs'); ?> <div class="clear"></div> </div> </div> <?php /** End Breadcrumbs **/ endif; ?> <?php /** Begin Main Body **/ ?> <?php echo $gantry->displayMainbody('mainbody','sidebar','standard','standard','standard','standard','standard'); ?> <?php /** End Main Body **/ ?> <?php /** Begin Main Bottom **/ if ($gantry->countModules('mainbottom')) : ?> <div id="rt-mainbottom" class="block-module"> <div class="rt-container"> <?php echo $gantry->displayModules('mainbottom','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Main Bottom **/ endif; ?> <?php /** Begin Extension **/ if ($gantry->countModules('extension')) : ?> <div id="rt-extension" class="block-module"> <div class="rt-container"> <?php echo $gantry->displayModules('extension','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Extension **/ endif; ?> </div> <?php /** Begin Bottom **/ if ($gantry->countModules('bottom')) : ?> <div id="rt-bottom" class="block-module"> <div class="rt-container"> <?php echo $gantry->displayModules('bottom','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Bottom **/ endif; ?> <?php /** Begin Footer **/ if ($gantry->countModules('footer')) : ?> <div id="rt-footer"> <div class="rt-container"> <?php echo $gantry->displayModules('footer','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Footer **/ endif; ?> <?php /** Begin Copyright **/ if ($gantry->countModules('copyright')) : ?> <div id="rt-copyright"> <div class="rt-container"> <?php echo $gantry->displayModules('copyright','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Copyright **/ endif; ?> <?php /** Begin Debug **/ if ($gantry->countModules('debug')) : ?> <div id="rt-debug"> <div class="rt-container"> <?php echo $gantry->displayModules('debug','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Debug **/ endif; ?> <?php /** Begin Popups **/ echo $gantry->displayModules('popup','popup','popup'); echo $gantry->displayModules('login','login','popup'); /** End Popup s**/ ?> <?php /** Begin Analytics **/ if ($gantry->countModules('analytics')) : ?> <?php echo $gantry->displayModules('analytics','basic','basic'); ?> <?php /** End Analytics **/ endif; ?> </body> </html> <?php $gantry->finalize(); ?>
Thu, 2013-05-23 02:44
#1
One way to do it is position
One way to do it is position the element like:
left:50%; /* The left edge will be in the center of the page */ margin-left: 200px; /* not sure exactly where you want it */
It will be easier to keep with the rest of the content if you position it from the center as the content is centered.
Thu, 2013-05-23 05:14
#2
thanks, that worked perfect
thanks, that worked perfect