Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Moving left module under the header

    Hey there,

    I'm currently using ja_Purity to create my own template and so far I've succeeded but now I'm having a new problem.
    Please check the screenshot below, what I basically wanna do is make the big banner to stretch all over the page coz it's 1000px wide and the left, right and middle modules to come underneath it and so far I haven't been able to work it out.

    Here is the css:
    Code:
    #ja-col {
        width: 1000px;
        overflow: hidden;
    	/*padding-top: 10px;*/
    }
    #ja-col1 {
    	float: none;
    	display: block;
    	width: 50%;
    	padding-top: 10px;
    	overflow: hidden;
    }
    
    #ja-col2 {
    	float: right;
    	width: 20%;
    	overflow: hidden;
    }
    
    #ja-col1 table,
    #ja-col2 table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    #ja-col1 ul li,
    #ja-col2 ul li {
    	padding-left: 15px;
    	margin: 0;
    	background: url(../images/bullet.gif) no-repeat 5px 50%;
    }
    
    #ja-col1 ul, #ja-col2 ul {
    	margin: 0;
    }
    
    #ja-col1 ol, #ja-col2 ol {
    	margin-left: 5px;
    }
    
    #ja-col1 .article_separator,
    #ja-col2 .article_separator {
    	display: none;
    }
    Here is the tags:
    Code:
    <div id="ja-containerwrap<?php echo $divid; ?>">
    <div id="ja-containerwrap2">
    	<div id="ja-container">
    	<div id="ja-container2" class="clearfix">
    
    		<div id="ja-mainbody<?php echo $divid; ?>" class="clearfix">
    
    		<!-- BEGIN: CONTENT -->
    		<div id="ja-contentwrap">
    		<div id="ja-content">
           
    	   
    	   <?php if ($this->countModules('bigbanner')): ?>
    		<div id="ja-col" style="width: 1000px;">
    			<jdoc:include type="modules" name="bigbanner2" style="xhtml" />
    		</div><br />
    		<?php endif; ?>
            
    			<jdoc:include type="message" />
    
    			<?php if(!$tmpTools->isFrontPage()) : ?>
    			<div id="ja-pathway">
    				<jdoc:include type="module" name="breadcrumbs" />
    			</div>
    			<?php endif ; ?>
    
    			<jdoc:include type="component" />
    
    			<?php if($this->countModules('banner')) : ?>
    			<div id="ja-banner">
    				<jdoc:include type="modules" name="banner" />
    			</div>
    			<?php endif; ?>
    
    		</div>
    		</div>
    		<!-- END: CONTENT -->
    
    		<?php if ($this->countModules('left')): ?>
    		<!-- BEGIN: LEFT COLUMN -->
            <div id="ja-coltop"></div>
    		<div id="ja-col1">
    			<jdoc:include type="modules" name="left" style="xhtml" />
    		</div><br />
    		<!-- END: LEFT COLUMN -->
    		<?php endif; ?>
    
            
    		<?php if ($this->countModules('right')): ?>
    		<!-- BEGIN: RIGHT COLUMN -->
    		<div id="ja-col2">
    			<jdoc:include type="modules" name="right" style="jarounded" />
    		</div><br />
    		<!-- END: RIGHT COLUMN -->
    		<?php endif; ?>
    
    	</div>
    	</div>
    </div>
    </div>
    And here is the source from view source coz I'm working locally:
    Code:
    <div id="ja-containerwrap-fr">
    <div id="ja-containerwrap2">
    	<div id="ja-container">
    	<div id="ja-container2" class="clearfix">
    
    		<div id="ja-mainbody-fr" class="clearfix">
    
    		<!-- BEGIN: CONTENT -->
    
    		<div id="ja-contentwrap">
    		<div id="ja-content">
           
    	   
    	   		<div id="ja-col" style="width: 1000px;">
    					<div class="moduletable">
    					<img src="/gezairi/templates/ja_purity/images/header-gezairi.jpg" border="0" width="930" height="242" />		</div>
    	
    		</div><br />
    		        
    			
    
    			
    			<table class="blog" cellpadding="0" cellspacing="0">
    
    
    </table>
    
    
    			
    		</div>
    		</div>
    		<!-- END: CONTENT -->
    
    				<!-- BEGIN: LEFT COLUMN -->
            <div id="ja-coltop"></div>
    		<div id="ja-col1">
    					<div class="moduletable_menu">
    
    					<ul class="menu"><li class="item11"><a href="http://www.joomla.org"><span>Joomla! Home</span></a></li><li class="item12"><a href="http://forum.joomla.org"><span>Joomla! Forums</span></a></li><li class="item13"><a href="http://docs.joomla.org"><span>Joomla! Documentation</span></a></li><li class="item14"><a href="http://community.joomla.org"><span>Joomla! Community</span></a></li><li class="item15"><a href="http://community.joomla.org/magazine.html"><span>Joomla! Magazine</span></a></li><li class="item16"><a href="http://www.opensourcematters.org"><span>OSM Home</span></a></li><li class="item17"><a href="/gezairi/administrator/"><span>Administrator</span></a></li></ul>		</div>
    	
    		</div><br />
    		<!-- END: LEFT COLUMN -->
    Thank you for your help.
    Attached Thumbnails Attached Thumbnails Moving left module under the header-geziair.jpg  

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Anyone please?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •