Newbie: drop down menu and other questions

marcomesa · May 06, 2010, 07:16:31 PM

my god I just check with Ie7 my website for Godsake it is really mess up! I'm a totally newbye in the css I didnt notice to did that. Now in firefox works like a charm, even the dropdown menu is fine, but in explorer the dropdown menu doeasnt work and the website is totally wrong.
Maybe I play too much without knowledge...by the way where I could start to fix it? because it was a kind of epical challenge to adjust the template and make the dropdown...

by the way I did some test and even if re install the original orange sunset it is a mess. The strange thing is in another hosting the original template works. it make me so confusing, because even re installing all in IE7 doesnt works. Could be possible becauuse the different server?I dont think so...

So I am confused...dont know how to fix

here are my index.php

Code Select


<?php

/*

 WebsiteBaker Project <http://www.WebsiteBaker.org/>
 Copyright (C) 2004-2006, Ryan Djurovich

 WebsiteBaker is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation; either version 2 of the License, or
 (at your option) any later version.

 WebsiteBaker is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.

 You should have received a copy of the GNU General Public License
 along with WebsiteBaker; if not, write to the Free Software
 Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA

*/

?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//<?php echo LANGUAGE; ?>" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo LANGUAGE; ?>">

<head>
  <title><?php page_title(); ?></title>
  <meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo     DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
  <meta name="description" content="<?php page_description(); ?>" />
  <meta name="keywords" content="<?php page_keywords(); ?>" />

  <!-- **** layout stylesheet **** -->
  <link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/style.css" />

  <!-- **** colour scheme stylesheet **** -->
  <link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/colour.css" />

</head>

<body>
  <div id="main">

    <div id="links">
      <!-- **** INSERT LINKS HERE **** -->
      <?php show_menu2(2, SM2_ROOT, SM2_START, SM2_ALL, '<span>| [a][menu_title]</a>', ' |</span>', '', '');?>
    </div>
    <div id="logo"><h1><?php page_title('', '[WEBSITE_TITLE]'); ?></h1></div>


    
      <div id="menu">
        <?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="pmenu">'); ?>

      </div>
<div id="content">
<!-- **** Menu breadcrumb **** -->
<p></p>
<?php show_menu2(0, SM2_ROOT, SM2_CURR, SM2_CRUMB, '<span class="[class]"> > [a][menu_title]</a>', '</span>', '', '', '<b>You are here:</b> <span class="[class]">[a][menu_title]</a>');?>


<!-- **** Modulo Search **** -->
      <div id="column1">

        
        <!-- **** ONLY SHOW SUBMENU WHEN THERE IS ONE **** -->
        <?php ob_start();
        show_menu2(1, SM2_ROOT+2, SM2_CURR);
        $childmenu=ob_get_contents();
        ob_end_clean();
        if ($childmenu!="") {?>
        <div class="sidebaritem">
          <div class="sbihead">
            <h1>in this section</h1>
          </div>
          <div class="sbilinks">
            <?php echo $childmenu; ?>
          </div>
        </div>
        <?php } ?>

 

 <?php ob_start();
        show_menu2(1, SM2_CURR+1, SM2_CURR+1);
        $childmenu=ob_get_contents();
        ob_end_clean();
        if ($childmenu!="") {?>
        <div class="sidebaritem">
          <div class="sbihead">
            <h1>in this section</h1>
          </div>
          <div class="sbilinks">
            <?php echo $childmenu; ?>
          </div>
        </div>
        <?php } ?>

             
<div class="sidebaritem">
          <div class="sbihead">
            <h1>Looking for...</h1>
          </div>
          <div class="sbicontent">
            <!-- **** INSERT NEWS ITEMS HERE **** -->
            <?php if(SHOW_SEARCH) { /* Only show search box if search is enabled */ ?>
        <form name="search" action="<?php echo WB_URL; ?>/search/index<?php echo PAGE_EXTENSION; ?>" method="post">
	<input type="text" name="string" style="width: 100px;" />
            <input type="submit" name="submit" value="Search" style="width: 80px;" />
               </form>
        <?php } ?>

            <p></p>
          </div>
        </div>
   

        <?php if(FRONTEND_LOGIN AND !$wb->is_authenticated()) {?>
            <div class="sidebaritem">
                <div class="sbihead">
                    <h1><?php echo $TEXT['LOGIN']; ?></h1>
                </div>
                <div class="sbicontent">
                    <form name="login" action="<?php echo LOGIN_URL; ?>" method="post" class="login_table">
                        <?php echo $TEXT['USERNAME']; ?>:
                        <input type="text" name="username" style="text-transform: lowercase;" />
                        <?php echo $TEXT['PASSWORD']; ?>:
                        <input type="password" name="password" />
                        <input type="submit" name="submit" value="<?php echo $TEXT['LOGIN']; ?>" style="margin-top: 3px; text-transform: uppercase;" />
                        <a href="<?php echo FORGOT_URL; ?>"><?php echo $TEXT['FORGOT_DETAILS']; ?></a>
                        <?php if(is_numeric(FRONTEND_SIGNUP)) { ?>
                            <a href="<?php echo SIGNUP_URL; ?>"><?php echo $TEXT['SIGNUP']; ?></a>
                        <?php } ?>
                    </form>
                </div>
            </div>
        <?php } elseif(FRONTEND_LOGIN AND $wb->is_authenticated()) {?>
            <div class="sidebaritem">
                <div class="sbihead">
                    <h1><?php echo $TEXT['LOGIN']; ?></h1>
                </div>
                <div class="sbicontent">
                    <form name="logout" action="<?php echo LOGOUT_URL; ?>" method="post" class="login_table">
                        <h2><?php echo $TEXT['LOGGED_IN']; ?></h2>
                        <?php echo $TEXT['WELCOME_BACK']; ?>, <?php echo $wb->get_display_name(); ?>
                        <br />
                        <input type="submit" name="submit" value="<?php echo $MENU['LOGOUT']; ?>" />
                        <br />
                        <a href="<?php echo PREFERENCES_URL; ?>"><?php echo $MENU['PREFERENCES']; ?></a>
                        <a href="<?php echo ADMIN_URL; ?>/index.php"><?php echo $TEXT['ADMINISTRATION']; ?></a>
                    </form>
                </div>
            </div>
        <?php } ?>


        <div class="sidebaritem">
          <div class="sbihead">
            <h1>contacts</h1>
          </div>
          <div class="sbicontent">
            <!-- **** INSERT OTHER INFORMATION HERE **** -->
            <p>
             contact us:</p>
		<p>info@beavita.it</p>
		
            </p>
          </div>
        </div>
      </div>
      <div id="column2">
        <h1><bigger than life...('','[PAGE_TITLE]'); ?></h1>
        <!-- **** INSERT PAGE CONTENT HERE **** -->
        <?php page_content(); ?>
      </div>
    </div>
    <div id="footer">
        Powered by <a href="http://www.WebsiteBaker.org">Website baker</a><br/>
      copyright &copy; 2008 Marco Mezzalana | <a href="#">marcomesa@gmail.com</a> | <a href="http://digilander.libero.it/marco.mesa">Marco Mezzalana Photography</a>
    </div>
  </div>
</body>
</html>

and here my style.css

Code Select

/* global */
html{height: 100%;}

body
{ font-family: verdana, arial, sans-serif;
  padding: 0px;
  margin: 0px;
  font-size: .68em;
}

p
{ margin: 0px;
  padding: 0px 0px 6px 0px;
  line-height: 1.7em;
}

h1
{ font-family: arial, sans-serif;
  letter-spacing: .1em;
}

h2
{ margin: 0px;
  padding: 0px 0px 4px 0px;
  font-size: 100%;
}

img{border: 0px;}

a{outline: none;}

/* image positioning - left, right and center */
.left
{ float: left; 
  padding: 0px 8px 0px 0px;
}

.right
{ float: right; 
  padding: 0px 0px 0px 8px;
}

.center
{ display: block;
  text-align: center;
  margin: 0 auto;
}

/* block quote */
blockquote
{ margin: 20px 0px 20px 0px; 
  padding: 10px 20px 0px 20px;
  border-left: 8px solid;
}

/* unordered list */
ul
{ margin: 8px 0px 0px 16px;
  padding: 0px;
}

ul li
{ list-style-type: none;
  margin: 0px 0px 11px 0px; 
  padding: 0px;
}

/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
  padding: 0px;
}

ol li
{ margin: 0px 0px 11px 0px; 
  padding: 0px;
}

/* main container */
#main
{ width: 780px;
  margin-left: auto; 
  margin-right: auto;
}

/* links above the logo / footer */
#links, #footer
{ margin-left: auto;
  margin-right: auto;
  padding: 10px 21px 0px 19px;
  width: 720px;
  height: 26px;
  font-size: 94%;
  text-transform: uppercase;
}

#links{text-align: right;}

#footer{text-align: center;}

#links a, #footer a{text-decoration: none;}

#links a:hover, #footer a:hover{text-decoration: underline;}

/* logo */
#logo
{ margin-left: auto; 
  margin-right: auto;
  width: 760px;
  height: 100px;
  text-align: left;
}

#logo h1
{ margin: 0px;
  padding: 41px 0px 0px 19px;
  font-size: 150%;
  letter-spacing: .2em;
}

/* navigation menu */
#menu
{ height: 42px;
  width: 760px;
  margin-left: auto; 
  margin-right: auto;
}

#menu ul{margin: 0px auto;} 

#menu li
{ float: left; 
  margin: 0px; 
  padding: 0px;
} 

#menu li a 
{ display: block; 
  float: left; 
  height: 37px;
  text-decoration: none; 
  padding: 3px 19px 2px 19px;
  text-transform: uppercase;
} 

/* main content */
#content
{ margin-left: auto; 
  margin-right: auto;
  width: 760px;
  height: auto;
  padding: 0px;
  overflow: hidden;
} 

/* column 1 - contains sidebar items */
#column1
{ width: 207px;
  float: right;
  padding: 16px 0px 5px 0px;
}

.sidebaritem
{ text-align: left;
  width: 188px;
  float: left;
  margin: 0px 0px 5px 0px;
}

.sbihead
{ height: 14px;
  width: 188px;
  padding: 5px 0px 5px 19px;
  text-transform: uppercase;
}

.sbihead h1
{ padding: 0px; 
  margin: 0px; 
  font-weight: bold;
  font-size: 112%;
}

.sbicontent{padding: 14px 8px 8px 19px;}

.sbicontent p
{ line-height: 14px;
  padding: 0px 0px 5px 0px;
}

.sbilinks{padding: 0px;}

.sbilinks ul{margin: 0px auto;} 

.sbilinks li 
{ margin: 0px; 
  float: left; 
  list-style: none; 
} 

.sbilinks li a , .sbilinks li a:hover
{ float: left; 
  height: 16px;
  text-decoration: none; 
  padding: 5px 0px 4px 19px;
  width: 188px;
  border: 0px;
} 

/* column 2 - page content */
#column2
{ text-align: justify;
  width: 512px;
  float: left;
  padding: 12px 3px 15px 19px;
}

#column2 h1
{ padding: 6px 0px 4px 0px; 
  margin: 0px 0px 12px 0px; 
  border-bottom: 1px solid;
  font-size: 150%;
  text-transform: uppercase;
  font-weight: normal;
}

.sidebaritem a, #column2 a
{ padding: 0px 0px 2px px;
  text-decoration: none;
  border-bottom: 1px dashed;
}

.sidebaritem a:hover, #column2 a:hover{border-bottom: 1px solid;}

/* contact page - form layout */
.sidebaritem form{margin-top: 0px;}

.sidebaritem div.row
{ clear: both;
  width: 448px;
}

.sidebaritem div.row span.formlabel
{ float: left;
  width: 150px;
  text-align: left;
}

.sidebaritem div.row span.forminput
{ float: right;
  text-align: right;
} 

.sidebaritem div.spacer
{ clear: both;
  width: 160px;
}

.sidebaritem input, textarea
{ width: 130px;
  font-family: verdana, arial, sans-serif;
  border: 1px solid;
  font-size: 100%;
  margin: 2px;
}

.sidebaritem submit
{ font-family: verdana, arial, sans-serif;
  border: 1px solid;
  width: 70px;
  height: 22px;
  cursor: pointer;
  font-size: 100%;
}




#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}
#pmenu {margin:25px 0 20px 15px;}
#pmenu li {float:left;position:relative;}
#pmenu a, #pmenu a:visited {display:block; width:110px;  height:37px;  text-decoration:none; text-indent:5px; }
#pmenu li ul li a, #pmenu li ul li a:visited { border-bottom: 1px groove #FFFFFF; }
#pmenu li:hover > a{background:#dfd7ca; color:#c00; }
#pmenu li ul {display: none;}
#pmenu li:hover > ul {display:block; position:absolute; font-size:9px; top:0; left:148px; border-left:1px inset #DBD7D1; border-right:1px inset #DBD7D1; border-left:1px inset #DBD7D1;}
#pmenu > li:hover > ul {left:0; top:42px;}

Argos · May 03, 2010, 05:25:26 PM

Quote from: marcomesa on May 03, 2010, 05:06:13 PM
hi,
I was able to remove the square, I think it was a parameter of the UL command...Also some other people told me about that, in firefox works good, Dont know why in Internet explorer doesnt work...

There are often different CSS interpretations in different browsers. You should check at least firefox, ie7 and ie8.

marcomesa · May 03, 2010, 05:06:13 PM

hi,
I was able to remove the square, I think it was a parameter of the UL command...Also some other people told me about that, in firefox works good, Dont know why in Internet explorer doesnt work...

Argos · May 03, 2010, 10:10:57 AM

I don't see squares, but in IE8 your design is rather messed up though. I didn't check other browsers.

marcomesa · April 29, 2010, 11:08:57 PM

ok I tryied a lot and it seems i fixed my dropdown menu, everything seems to work like a charm, I have just one question, how can I avoid in my menu the little square on the left of each menu entry?
I did some test but I still dont know how can I fix it!
Thank you...
here my website

http://www.beavita.it

marcomesa · April 18, 2010, 09:50:38 PM

I also see you suggest me to use showmenu instead showmenu2 is there any particular reason?because I think there is not the function showmenu 1 installed on my website baker, maybe I should convert the showmenu 1 code in showmenu 2...Am I wrong?

marcomesa · April 14, 2010, 06:16:11 PM

thank you so much for the tips, I 've done what you said (I put the code in dropdown.js because I cannot use in windows /dropdown.js name cause the "/")
but what it comes out it's just another menu same as the main menu, but with a different style (I think because the code I paste in the file style.css).
but there is no dropdown menu unfortunately...something went wrong maybe...

by the way what I would do is replace the static main menu with a dropdown and the dropdown should use the same style of the template I'm using...I try so hard but all my attempt were unsuccesful

comfort · April 14, 2010, 05:37:10 PM

try this one:

example: http://www.stichtingknipoog.nl/

put this code in where you want the dropdown:

Code Select

<div class="dropdown" id="my_dropdown_id">
                <?php show_menu(1, 0, 1, false, '<li>[a][menu_title]</a>','</li>','<ul>','</ul>','',''); ?>
            </div>
            <script type="text/javascript">createDropdown('my_dropdown_id');</script>

put this code in the head (between <head> and </head>) of your template:

Code Select

<script type="text/javascript" src="/dropdown.js"></script>

put this code in a new file (/dropdown.js)

Code Select


var dropdown_rootNode = null; // Reference to root node of the current navigation.
var dropdown_timer = null; // Timer to hide all menu's on a 'onmouseout'.
var dropdown_timerWait = 750; // Time to wait before closing all open menu's.
var dropdown_zIndex = 1000; // zIndex of the navigation.

function createDropdown(nav_id)
{
    if(document.getElementById) // Browser compatability
    {
        try 
        {
            var rootNode = document.getElementById(nav_id);

            // Add javascript to items in navigation and hide submenu's.
            for(var i = 0; i < rootNode.childNodes.length; i++)
            {
                var ulNode = rootNode.childNodes[i];

                if(ulNode.nodeName == 'UL') // Lookup UL tags
                {
                    for(var j = 0; j < ulNode.childNodes.length; j++)
                    {
                        var liNode = ulNode.childNodes[j];

                        if(liNode.nodeName == 'LI') // Lookup LI tags
                        {
                            // Init subitems
                            __initDropdown(liNode);

                            // Add a mouseover-event to each list item.
                            liNode.onmouseover = function() 
                            {
                                try
                                {
                                    clearTimeout(dropdown_timer);
                                }
                                catch(e)
                                {
                                }

                                __showDropdown(this);
                            }

                            liNode.onmouseout = function()
                            {
                                try
                                {
                                    clearTimeout(dropdown_timer);
                                }
                                catch(e)
                                {
                                }

                                dropdown_timer = setTimeout('__hideDropdown()', dropdown_timerWait);
                            }
                        }
                    }
                }
            }
        }
        catch(e)
        {
            // Ignore
        }
    }
}

// Add classes and mouse-events to subitems.
function __initDropdown(rootNode)
{
    dropdown_zIndex += 2;
    var zIndex = dropdown_zIndex;

    // Open subitems
    for(var i = 0; i < rootNode.childNodes.length; i++)
    {
        var ulNode = rootNode.childNodes[i];

        if(ulNode.nodeName == 'UL')
        {
            ulNode.style.display = 'none';
            ulNode.style.visibility = 'hidden';
            ulNode.style.zIndex = zIndex;

            for(var j = 0; j < ulNode.childNodes.length; j++)
            {
                var liNode = ulNode.childNodes[j];

                if(liNode.nodeName == 'LI')
                {
                    // liNode.style.zIndex = zIndex + 1;

                    // Init subitems
                    __initDropdown(liNode);

                    // Add a mouseover-event to each list item.
                    liNode.onmouseover = function() 
                    {
                        try
                        {
                            clearTimeout(dropdown_timer);
                        }
                        catch(e)
                        {
                        }

                        this.className += ' hover';
                        __showDropdown(this);
                    }

                    liNode.onmouseout = function()
                    {
                        try
                        {
                            clearTimeout(dropdown_timer);
                        }
                        catch(e)
                        {
                        }

                        this.className = this.className.replace('hover', '');

                        dropdown_timer = setTimeout('__hideDropdown()', dropdown_timerWait);
                    }
                }
            }
        }
    }
}

// Show submenu
function __showDropdown(rootNode)
{
    if(dropdown_rootNode == null)
    {
        dropdown_rootNode = rootNode.parentNode.parentNode;
    }

    // Hide siblings' submenu's
    var ulNode = rootNode.parentNode;
    for(var i = 0; i < ulNode.childNodes.length; i++)
    {
        var liNode = ulNode.childNodes[i];

        if(liNode.nodeName == 'LI')
        {
            if(liNode != rootNode)
            {
                __hideDropdown(liNode);
            }
        }
    }

    // Show submenu's (if any)
    for(var i = 0; i < rootNode.childNodes.length; i++)
    {
        var ulNode = rootNode.childNodes[i];

        if(ulNode.nodeName == 'UL')
        {
            ulNode.style.display = 'block';
            ulNode.style.visibility = 'visible';
        }
    }
}

// Hide submenu's
function __hideDropdown(rootNode)
{
    if(__hideDropdown.arguments.length < 1)
    {
        var tmpNode = dropdown_rootNode;
        dropdown_rootNode = null;

        if(tmpNode != null)
        {
            for(var i = 0; i < tmpNode.childNodes.length; i++)
            {
                var ulNode = tmpNode.childNodes[i];

                if(ulNode.nodeName == 'UL')
                {
                    for(var j = 0; j < ulNode.childNodes.length; j++)
                    {
                        var liNode = ulNode.childNodes[j];
                        if(liNode.nodeName == 'LI')
                        {
                            __hideDropdown(liNode);
                        }
                    }
                }
            }
        }
    }
    else
    {
        for(var i = 0; i < rootNode.childNodes.length; i++)
        {
            var ulNode = rootNode.childNodes[i];

            if(ulNode.nodeName == 'UL')
            {
                ulNode.style.display = 'none';
                ulNode.style.visibility = 'hidden';

                for(var j = 0; j < ulNode.childNodes.length; j++)
                {
                    var liNode = ulNode.childNodes[j];

                    if(liNode.nodeName == 'LI')
                    {
                        __hideDropdown(liNode);
                    }
                }
            }
        }
    }
}

and add this to your stylesheet:

Code Select

.dropdown
{
    background: #000000;
    height: auto;
    padding: 4px 4px 4px 10px;
}

.dropdown ul
{
    list-style: none none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: left;
}

.dropdown ul li
{
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 18px 0px 0px;
    position: relative;
}

.dropdown ul li a
{
    color: #FFFFFF;
    font-family: arial;
    font-size: 12px;
    font-weight: bold;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-decoration: none;
}

.dropdown ul li a:hover
{
    text-decoration: underline;
}

.dropdown ul li ul
{
    background: #F0F0F0;
    border: #000000 solid 1px;
    display: none;
    left: 0px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    position: absolute;
    top: 25px;
}

.dropdown ul li ul li
{
    color: #000000;
    display: block;
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    left: auto;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    top: auto;
    width: 120px;
}

.dropdown ul li ul li a
{
    color: #000000;
    display: block;
    padding: 3px 3px 3px 6px;
}

.dropdown ul li ul li ul 
{
    left: 125px;
    top: 2px;
}

marcomesa · April 12, 2010, 10:49:59 AM

Hi folks,
I just moved my website from a netsons host to another one, it was so hard for a totally beginner like me, but I did it. now I'm changing the style of my website and i really would appreciate your help.
let's start with my website (sorry it's in italian)

http://www.beavita.it/

the temeplate is orange sunset and utile now it worked fine, but I need soome changement to do. Do you see in the section "the bigtrip" on the left menu there are 4 entries. If you go to "trip news" you don see anything but "trip news" it's the parent of a lot of pages I would displayed a drop down in "in this section" menu under the news button...it would make also the website structure browsable with ease. Actually the only way i know to do it is writing in the main body of the page an hyperlink for every page son of "trip news", I will do it, but I would also make the website structure clear. i think a dropdown menu could suit my needs...could you help me please? Or if you have any other idea how to make this kind of structure feel free to suggest me...
Oh I must resay I'm a totally newbie in this world so be patient...

please forgive my english, it is not my native language...

News:

Newbie: drop down menu and other questions

comfort