+ Post New Thread
Results 1 to 9 of 9
Web Development Thread, Problem developing new joomla template in Coding and Web Development; I'm having a bit of a problem with a new joomla template i'm creating for school. They want the menu ...
  1. #1
    dezt's Avatar
    Join Date
    Dec 2005
    Location
    Lancs
    Posts
    1,026
    Thank Post
    157
    Thanked 58 Times in 46 Posts
    Rep Power
    29

    Problem developing new joomla template

    I'm having a bit of a problem with a new joomla template i'm creating for school. They want the menu to be in the left module position, which is easy enough to do, but when the main content is bigger than the menu, the menu drops to about halfway down the content section and I can't get it to the top of the left column.

    I have looked at adding "vertical-align: top" in the css for the template but it doesn't do anything. I have also added the valign to the column that has the php code for the left module position in it, but that hasn't worked either.

    Can someone please help, google keeps bringing up articles regarding the top menu when I search for "align top main menu"

  2. #2

    Join Date
    Jun 2006
    Location
    Dorset
    Posts
    111
    Thank Post
    2
    Thanked 5 Times in 4 Posts
    Rep Power
    17
    It sounds like you might need to sort out the module order in the backend. If you go the modules page, and then find your menu module, you should be able to place it first in the list so that it will display at the top.

    I'm not entirely sure this is what you are after though - can you post a link to your site?

  3. #3

    SYSMAN_MK's Avatar
    Join Date
    Sep 2005
    Posts
    4,005
    Thank Post
    489
    Thanked 1,340 Times in 728 Posts
    Rep Power
    427
    I am guessing that it is something to do with the content in the page making the content section to wide, therefore pushing the module down. Does the content have large images in it by any chance?

    What theme are you using as a base for your new template?

    Alos have you got a link to the site in question? Or screen dump?

  4. #4

    Join Date
    Nov 2006
    Location
    UK
    Posts
    21
    Thank Post
    0
    Thanked 2 Times in 2 Posts
    Rep Power
    16

    Layout issues

    It seems odd that it's pushing the left hand column out of the way. Are you using tables or DIVs and have you wrapped both the left column and main content in an outer container?

    Could do with seeing your code really.

  5. #5
    dezt's Avatar
    Join Date
    Dec 2005
    Location
    Lancs
    Posts
    1,026
    Thank Post
    157
    Thanked 58 Times in 46 Posts
    Rep Power
    29
    here's my index.php
    Code:
    <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
    <!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">
    <head>
    <?php if ( $my->id ) { initEditor(); } ?>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <?php mosShowHead(); ?>
    <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
    <style type="text/css">
    <!--
    .style4 {font-size: 11px}
    .style11 {font-size: 10px}
    .style12 {color: #000000}
    .style14 {font-size: 11px; color: #FFFFFF; }
    body {
    	margin-top: 0px;
    }
    -->
    </style>
    </head>
    <body>
    <table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="174"><img src="templates/norden_template/images/lion.png" width="174" /></td>
        <td width="626"><div align="left"><img src="templates/norden_template/images/Logo.jpg" /></div></td>
      </tr>
      <tr>
        <td height="414" colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="19%" height="414"><table width="174" height="414" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="174" height="207" valign="top"><div class="background">
                  <?php mosLoadModules ( 'left' ); ?>
                  <br />
                  <span class="search">
                    <?php mosLoadModules ( 'user2' ); ?>
                    </span><img src="templates/norden_template/images/address.jpg" width="174" height="360" /><span class="login">
                      <?php mosLoadModules ( 'user4' ); ?>
                    </span></div>
                        <div class="search"></div></td>
              </tr>
              <tr> </tr>
            </table></td>
            <td width="81%" height="414" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="3%">&nbsp;</td>
                <td width="97%"><?php mosPathWay(); ?></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td><?php mosMainBody(); ?></td>
              </tr>
            </table></td>
          </tr>
          <td colspan="2"><?php include_once('includes/footer.php'); ?></td>
          </table></td>
      </tr>
      <tr> </tr>
    </table>
    </body>
    </html>
    here is a screenshot of the problem and how I want it to look.



  6. #6

    Join Date
    Jul 2007
    Location
    Devon
    Posts
    233
    Thank Post
    8
    Thanked 9 Times in 8 Posts
    Rep Power
    16
    for your whole page table, 174 + 626 isn't 700, it's 800

    In your left nav, the content exceeds the height you've specified, not sure if that means anything though

    Also on the container <td> for your left nav, there is no valign="top" (probably why it doesn't appear where you want it), there is on the content container though.

    There's one or two unused tags in there too, whether by design, or by accident.

    Also at the end, all the tags go a-miss.. ie: you end a column, but start a row, then end a table...

    Have you considered using padding for the spacing to the left of the content instead of a 3% column... Also using a fixed width for the content nav may be useful since you started.


    After I did the above:
    HTML Code:
    <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td width="174">
                <img src="templates/norden_template/images/lion.png" width="174" />
            </td>
            <td width="626">
                <div align="left">
                    <img src="templates/norden_template/images/Logo.jpg" />
                </div>
            </td>
        </tr>
        
        <tr>
            <td colspan="2">
            
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
    
                    <tr>
                        <td width="174" valign="top">
    					
                            <table width="174" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td width="174" valign="top">
                                    
                                        <div class="background">
                                            <?php mosLoadModules ( 'left' ); ?>
                                            <br />
                                            <span class="search">
                                                <?php mosLoadModules ( 'user2' ); ?>
                                            </span>
                                                <img src="templates/norden_template/images/address.jpg" width="174" height="360" />
                                            <span class="login">
                                                <?php mosLoadModules ( 'user4' ); ?>
                                            </span>
                                        </div>
                                        <div class="search"></div>
                                        
                                    </td>
                                    
                                </tr>
                            </table>
    					
                        </td>
                        <td width="626" valign="top">
    					
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td width="3%">&nbsp;</td>
                                    <td width="97%"><?php mosPathWay(); ?></td>
                                </tr>
                                <tr>
                                    <td width="3%">&nbsp;</td>
                                    <td width="97%"><?php mosMainBody(); ?></td>
                                </tr>
                            </table>
    
                        </td>
                    </tr>
                </table>
                 
            </td>
        </tr>
        <tr>
            <td colspan="2"><?php include_once('includes/footer.php'); ?></td>
        </tr>
    </table>
    Last edited by Lithium; 15th March 2008 at 09:57 AM.

  7. Thanks to Lithium from:

    dezt (15th March 2008)

  8. #7
    dezt's Avatar
    Join Date
    Dec 2005
    Location
    Lancs
    Posts
    1,026
    Thank Post
    157
    Thanked 58 Times in 46 Posts
    Rep Power
    29
    Thanks for that, it works a treat now.

    Hopefully thais will get the SBM off my back about he new website.


    Thanks again.

  9. #8

    Join Date
    Nov 2005
    Location
    North
    Posts
    1,817
    Thank Post
    24
    Thanked 91 Times in 71 Posts
    Rep Power
    50
    Would recommend the web developers toolbar for FF, helps me loads when doing this sort of stuff.

  10. #9
    dezt's Avatar
    Join Date
    Dec 2005
    Location
    Lancs
    Posts
    1,026
    Thank Post
    157
    Thanked 58 Times in 46 Posts
    Rep Power
    29
    Thanks again to everyone that helped me, i've changed the template by using lithium's code, it works perfect in firefox, but when i tried it in IE6, i got this problem.



    I think that the problem may lie in my index.php file but i'm not 100% sure.

SHARE:
+ Post New Thread

Similar Threads

  1. Joomla Template Header Question
    By rusty155 in forum EduGeek Joomla 1.0 Package
    Replies: 9
    Last Post: 22nd February 2008, 09:01 PM
  2. Template Problem
    By Dafty in forum EduGeek Joomla 1.0 Package
    Replies: 4
    Last Post: 5th December 2007, 12:29 PM
  3. CSS Edit in Edugeek Joomla Template
    By bensewell in forum Web Development
    Replies: 2
    Last Post: 5th July 2007, 09:11 AM
  4. Probs with Smooth Gallery on Joomla Template
    By bensewell in forum Web Development
    Replies: 2
    Last Post: 26th June 2007, 07:09 AM
  5. Joomla Template Expert Needed
    By russdev in forum Web Development
    Replies: 3
    Last Post: 23rd April 2007, 03:29 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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