#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    262
    Rep Power
    19

    Cascading drop-down menu. Positioning problems


    Hi, I'm trying to make a drop-down menu using CSS and javascript. I'm posting this here because the javascript (and most of the css!) is working fine, I just need some help with the positioning.

    You can see the menu so far on the website I'm beginning to develop, 10pinleague.com. As you can see the initial drop downs work as intended but when you attempt to open a submenu, that should appear to the right of the drop down menu, it appears in completely the wrong place. And for some odd reason the distance from the drop-down menus to the submenus increases more and more as you progress from Menu 1 to Menu 2 and 3.

    I'm no expert at either javascript or CSS, so the drop down menu was something that I downloaded from a website, here, and then adapted to suit my site. Perhaps this wasn't intended to work as a cascading drop down menu. I just thought if I apply the same principle of wrapping the link in a div and getting that to show another new div containing the submenu it should work. And it kind of does, just in the wrong place - which I do not understand why this happens.

    Here is the HTML code for the menu. (note this is not the actual code on my website, this is code that is generated from a php loop I've made. But the HTML remains the same).
    Code:
    <!--	  START OF MENU	  !-->
    
    <table width='730' height='30'>
    <tr>
    	
    	
    	<td width='20%' align='center'>
    	<div id='menu1a'>
    	<a href='#'>Menu 1</a>
    	</div>
    	<div id='menu1b' class='menu_dropdown'>
    	<table width='150' height='50'>
    	<tr>
    		<td class='padded'>
    		<table width='100%' height='100%'>
    		<tr>
    			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
    			<div id='submenu1_1a'>
    			<a href='#'>Item 1</a>
    			</div>
    			</td>
    		</tr>
    		<tr>
    			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
    			<div id='submenu1_2a'>
    			<a href='#'>Item 2</a>
    			</div>
    			</td>
    		</tr>
    		<tr>
    			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
    			<div id='submenu1_3a'>
    			<a href='#'>Item 3</a>
    			</div>
    			</td>
    		</tr>
    		</table>
    		</td>
    	</tr>
    	</table>
    	</div>
    	<script type='text/javascript'>at_attach('menu1a', 'menu1b', 'hover', 'y', 'pointer');</script>
    	</td>
    	
    	
    	<td width='20%' align='center'><div id='menu2a'>
    	<a href='#'>Menu 2</a>
    	</div>
    	<div id='menu2b' class='menu_dropdown'>
    	<table width='150' height='50'>
    	<tr>
    		<td class='padded'>
    		<table width='100%' height='100%'>
    		<tr>
    			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
    			<div id='submenu2_1a'>
    			<a href='#'>Item 2</a>
    			</div>
    			</td>
    		</tr>
    		<tr>
    			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
    			<div id='submenu2_2a'>
    			<a href='#'>Item 2</a>
    			</div>
    			</td>
    		</tr>
    		<tr>
    			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
    			<div id='submenu2_3a'>
    			<a href='#'>Item 3</a>
    			</div>
    			</td>
    		</tr>
    		<tr>
    			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
    			<div id='submenu2_4a'>
    			<a href='#'>Item 4   ></a>
    			</div>
    			
    			<div id='submenu2_4b' class='menu_dropdown'>
    			<table width='150' height='50'>
    			<tr>
    				<td class='padded'>
    				<table width='100%' height='100%'>
    				<tr>
    					<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
    					<a href='#'>Item 4a</a>
    					</td>
    				</tr>
    				<tr>
    					<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
    					<a href='#'>Item 4b</a>
    					</td>
    				</tr>
    				</table>
    				</td>
    			</tr>
    			</table>
    			</div>
    			<script type='text/javascript'>at_attach('submenu2_4a', 'submenu2_4b', 'hover', 'y', 'pointer');</script>
    			
    			</td>
    		</tr>					
    		<tr>
    			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
    			<div id='submenu2_5a'>
    			<a href='#'>Item 5</a>
    			</div>
    			</td>
    		</tr>
    		</table>
    		</td>
    	</tr>
    	</table>
    	</div>
    	<script type='text/javascript'>at_attach('menu2a', 'menu2b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu3a'><a href='#'>Menu 3</a></div><div id='menu3b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_1a'><a href='#'>Item 3</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_2a'><a href='#'>Item 2</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu3a', 'menu3b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu4a'><a href='#'>Menu 4</a></div><div id='menu4b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_1a'><a href='#'>Item 4</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_2a'><a href='#'>Item 2</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu4a', 'menu4b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu5a'><a href='#'>Menu 5</a></div><div id='menu5b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_1a'><a href='#'>Item 1</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_2a'><a href='#'>Item 2</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu5a', 'menu5b', 'hover', 'y', 'pointer');</script></td>				
    	
    </tr>
    </table>
    Here is the related CSS.....but I doubt this is important.
    Code:
    .menu_dropdown { background-color: #a5caad; border: 1px solid #057c1f; position: absolute; visibility: hidden; font-size: small; }
    .menu_dropdown A:link {text-decoration: none; color: #000; font-weight: normal; }
    .menu_dropdown A:visited {text-decoration: none; color: #000; font-weight: normal; }
    .menu_dropdown A:active {text-decoration: none; color: #000; font-weight: normal; }
    .menu_dropdown A:hover {text-decoration: underline; color: #000; font-weight: normal; }
    
    td.menuNormal
    {padding: 0px;
    font-weight: bold;
    vertical-align: top;
    background-color:#a5caad;}
    
    td.menuHover
    {padding: 0px;
    font-weight: bold;
    vertical-align: top;
    background-color: #87bc93;}
    And here is the javascript file, that I have not modified in any way from the site I linked to above.
    Code:
    // <script>
    
    // Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
    // Technical support: http://www.php-development.ru/
    //
    // YOU MAY NOT
    // (1) Remove or modify this copyright notice.
    // (2) Distribute this code, any part or any modified version of it.
    //     Instead, you can link to the homepage of this code:
    //     http://www.php-development.ru/javascripts/dropdown.php.
    //
    // YOU MAY
    // (1) Use this code on your website.
    // (2) Use this code as a part of another product provided that
    //     its main use is not creating javascript menus.
    //
    // NO WARRANTY
    // This code is provided "as is" without warranty of any kind, either
    // expressed or implied, including, but not limited to, the implied warranties
    // of merchantability and fitness for a particular purpose. You expressly
    // acknowledge and agree that use of this code is at your own risk.
    
    function expand(s)
    {
      var td = s;
      var d = td.getElementsByTagName("div").item(0);
    
      td.className = "menuHover";
    }
    
    function collapse(s)
    {
      var td = s;
      var d = td.getElementsByTagName("div").item(0);
    
      td.className = "menuNormal";
    }
    
    // ----- Popup Control ---------------------------------------------------------
    
    function at_display(x)
    {
      var win = window.open();
      for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
    }
    
    // ----- Show Aux -----
    
    function at_show_aux(parent, child)
    {
      var p = document.getElementById(parent);
      var c = document.getElementById(child );
    
      var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
      var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;
    
      for (; p; p = p.offsetParent)
      {
        top  += p.offsetTop;
        left += p.offsetLeft;
      }
    
      c.style.position   = "absolute";
      c.style.top        = top +'px';
      c.style.left       = left+'px';
      c.style.visibility = "visible";
    }
    
    // ----- Show -----
    
    function at_show()
    {
      var p = document.getElementById(this["at_parent"]);
      var c = document.getElementById(this["at_child" ]);
    
      at_show_aux(p.id, c.id);
    
      clearTimeout(c["at_timeout"]);
    }
    
    // ----- Hide -----
    
    function at_hide()
    {
      var c = document.getElementById(this["at_child"]);
    
      c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
    }
    
    // ----- Click -----
    
    function at_click()
    {
      var p = document.getElementById(this["at_parent"]);
      var c = document.getElementById(this["at_child" ]);
    
      if (c.style.visibility != "visible")
           at_show_aux(p.id, c.id);
      else c.style.visibility = "hidden";
    
      return false;
    }
    
    // ----- Attach -----
    
    // PARAMETERS:
    // parent   - id of visible html element
    // child    - id of invisible html element that will be dropdowned
    // showtype - "click" = you should click the parent to show/hide the child
    //            "hover" = you should place the mouse over the parent to show
    //                      the child
    // position - "x" = the child is displayed to the right of the parent
    //            "y" = the child is displayed below the parent
    // cursor   - Omit to use default cursor or check any CSS manual for possible
    //            values of this field
    
    function at_attach(parent, child, showtype, position, cursor)
    {
      var p = document.getElementById(parent);
      var c = document.getElementById(child);
    
      p["at_parent"]     = p.id;
      c["at_parent"]     = p.id;
      p["at_child"]      = c.id;
      c["at_child"]      = c.id;
      p["at_position"]   = position;
      c["at_position"]   = position;
    
      c.style.position   = "absolute";
      c.style.visibility = "hidden";
    
      if (cursor != undefined) p.style.cursor = cursor;
    
      switch (showtype)
      {
        case "click":
          p.onclick     = at_click;
          p.onmouseout  = at_hide;
          c.onmouseover = at_show;
          c.onmouseout  = at_hide;
          break;
        case "hover":
          p.onmouseover = at_show;
          p.onmouseout  = at_hide;
          c.onmouseover = at_show;
          c.onmouseout  = at_hide;
          break;
      }
    }
    Can somebody please help me get the submenus appearing next to the divs in the drop-down menus that they relate to, rather than half way across the page? Thank you very much!


    PS. If you think I've asked this in the wrong place and it should be in the Javascript forum, could you move it for me? Thanks.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    262
    Rep Power
    19
    It really is vital that I can get this menu working as soon as possible. I'm beginning to think that maybe I'm not going about this in the simplest way.....can anybody recommend a nice and simple way I can implement a cascading drop down menu? The less javascript the better in my opion!

    If anybody just has some samples of code that provide this functionality that are simple enough to understand, or knows of a link to a script or tutorial somewhere online, that would be a great help! Thanks.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    I suggest you use the Suckerfish Menu system.
    This explains the technique:
    http://www.htmldog.com/articles/suckerfish/dropdowns/
    and this shows some improvements to it:
    http://www.positioniseverything.net/css-dropdowns.html

    Why should you avoid using tables for layout?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    262
    Rep Power
    19
    Thanks so much for the links, I'm sure I'll be able to tailor that to suit my needs! And I may attempt to convert my layout to CSS only and no tables, I'll worry about that later on. And I'll only have to change one file as all other pages are included into the main layout with PHP, so it shouldn't be too difficult. Thanks again, I really appreciate it!
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    262
    Rep Power
    19
    I'm back again! Well I've been trying for ages today to implement the suckerfish dropdown menu into my site, but I just cannot seem to get it working how I would like it to. I need the top horizontal bar with the top menu links to be no higher than 30px, but even when I try to set this value it insists on stretching to be larger than this - and I don't know why! Also, I don't want to top menu bar to have any background whatsoever, but it always appears white unless I set "background-color: transparent;", and then the drop down menus become transparent too!

    Here is how I would like the menu to look (just with functional secondary menus): http://www.10pinleague.com

    And here is how it looks at the moment with the suckerfish menu: http://www.10pinleague.com/index-backup.php

    For the moment, I've got all of the code on a single page for the suckerfish testing. Please can somebody correct this code so that it looks like the original menu?

    Here is the entire code:
    Code:
    <html>
    <head>
    <link rel='stylesheet' type='text/css' href='style.css'>
    
    <style type="text/css">
    #mainnav {
    	width: 730px;
    	height: 30px;
    }
    
    #nav, #nav ul {
    	float: left;
    	width: 730px;
    	list-style: none;
    	line-height: 1;
    	background-color: transparent;
    	font-weight: bold;
    	padding: 0;
    	margin: 0 0 1em 0;
    }
    
    #nav a {
    	display: block;
    	width: 10em;
    	color: #fff;
    	text-decoration: none;
    	padding: 0.25em 2em;
    }
    
    #nav a.daddy {
    	background: url(rightarrow2.gif) center right no-repeat;
    }
    
    #nav li {
    	float: left;
    	padding: 0;
    	width: 10em;
    }
    
    #nav li ul {
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 14.4em;
    	w\idth: 13.9em;
    	font-weight: normal;
    	border-width: 0.25em;
    	margin: 0;
    }
    
    #nav li li {
    	padding-right: 1em;
    	width: 13em
    }
    
    #nav li ul a {
    	width: 13em;
    	w\idth: 9em;
    }
    
    #nav li ul ul {
    	margin: -1.75em 0 0 14em;
    }
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    	left: -999em;
    }
    
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    	left: auto;
    }
    
    #nav li:hover, #nav li.sfhover {
    	background: #eda;
    }
    </style>
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    
    <title>10PinLeague.com -- The Ultimate Bowling League Management System!</title>
    
    </head>
    
    <body>
    
    <table width='100%' height='100%'>
    <tr>
    	<td align='center'>
    	<table class='main_table'width='800' height='100%'>
    	
    	<tr height='100'>
    		<td background='img/header.jpg' valign='top'>
    		<table width='800' height='30'>
    		<tr>
    			<td width='650'>&nbsp;</td>
    			<td width='150'>
    			<a href='badger.php'>Home</a>  <font color='#ffffff'>|</font>  <a href='badger.php'>Login</a>
    			</td>
    		</tr>
    		</table>
    		</td>
    	</tr>
    
    	<tr height='30'>
    		<td align='center'>
    		<table width='760' height='30'>
    		<tr>
    			<td width='15' background='img/menu-left.jpg'>&nbsp;</td>
    			
    			<td width='730' background='img/menu-bg.jpg'>
    			
    			
    			
    			<!--	  START OF MENU	  !-->
    			<div id='mainnav'>
    			<ul id='nav'>
    			
    				<!--  MENU 1  !-->							
    				<li><a href='#'>Menu 1</a>	
    					<ul>
    						<li><a href='#'>Item 1</a></li>
    						<li><a href='#'>Item 2</a></li>
    						<li><a href='#'>Item 3</a></li>
    						<li><a href='#'>Item 4</a></li>
    					</ul>
    				</li>				
    				
    				<!--  MENU 2  !-->
    				<li><a href='#'>Menu 2</a>	
    					<ul>
    						<li><a href='#'>Item 5</a></li>
    						<li><a href='#'>Item 6</a></li>
    						<li><a href='#'>Item 7</a></li>
    					</ul>
    				</li>		
    				
    				
    				
    				<!--  MENU 3  !-->						
    				<li><a href='#'>Menu 3</a>	
    					<ul>
    						<li><a href='#'>Item 8</a></li>
    						<li><a href='#'>Item 9</a></li>
    						<li><a href='#'>Item 10</a></li>
    						<li><a href='#'>Item 11</a></li>
    					</ul>
    				</li>	
    				
    				
    				
    				<!--  MENU 4  !-->						
    				<li><a href='#'>Menu 4</a>	
    					<ul>
    						<li><a href='#'>Item 12</a></li>
    						<li><a href='#'>Item 13</a></li>
    						<li><a href='#'>Item 14</a></li>
    						<li><a href='#'>Item 15</a></li>
    						<li><a href='#'>Item 16</a></li>
    					</ul>
    				</li>		
    				
    				
    
    						
    			
    			</ul>			
    			</div>
    
    			</td>
    			
    			<td width='15' background='img/menu-right.jpg'>&nbsp;</td>
    		</tr>
    		</table>
    		</td>
    	</tr>
    	
    	<tr>
    		<td valign='top' class='padded'>
    
    		<!--	  START OF MAIN SECTION	  !-->
    		
    
    		Hello!
    		
    		</td>
    	</tr>
    	
    	<tr height='20'>
    		<td class='main_table_bottom' align='right'>Created by Rob Masters 2007 </td>
    	</tr>
    
    	</table>
    	</td>
    </tr>
    </table>
    </body>
    
    </html>
    Thanks!
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    262
    Rep Power
    19
    Another day, another attempt at using a different script! I took a few days away from this for fear of smashing my PC in frustration, but now I'm stuck again. Hopefully this time there is a nice and easy solution to my problem.

    I'm now trying to use the drop-down menu that I found on this site. The problem is that even when I link my page to the menu css file that was provided and use the exact same HTML for the menu as in the demo, it doesn't work. You can see what I've done here: http://www.10pinleague.com/index-backup.php.

    This got me thinking maybe this was something to do with my hosting for some bizarre reason, so I thought I'd test this by copying the entire source of the menu demo page and hosting it to see if that would work. And it does! Obviously the images are broken, but the menu works fine! And I've adapted it ever so slightly to include the same menu css file, so I know that this can't be broken. Please can somebody tell me why the menu won't work on my site even though the code is identical? Could it be because the <div class='menu'> tag that wraps the menu is sitting in a table's <td> tag on my site, whereas the demo has a CSS layout? I'd really appreciate it if somebody can help me to understand!
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    1) That menu uses a nasty hack to make it work in IE5-6/Win. It only validates because it uses conditional comments to only show the invalid nesting to IE5-6/Win. It also uses a <table> that would otherwise be unnecessary and is semantically incorrect.

    2) Well for one thing index-backup.php doesn't have a doctype but test.php does.

    You should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict. A doctype is not a magic fix. It is the first step in the process of fixing your page. The doctype tells the browser how to render the page.
    Activating the Right Layout Mode Using the Doctype Declaration
    Fix Your Site With the Right DOCTYPE!
    Choosing a DOCTYPE
    Doctype switching
    Rendering Mode and Doctype Switching
    http://www.w3.org/QA/2002/04/valid-dtd-list.html
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    262
    Rep Power
    19
    Thanks for that Kravvitz! I can't believe I didn't actually know about doctypes until now! Hehe.

    Well that has fixed the problem of the drop down menu, but broken several other things. For example the <td> tag representing the main section is supposed to have a height of 100% but with the doctype it now shrinks to the size of the content within it. Also, the text 'Hello!' has decided to center-align itself for some reason. I've tried various doctypes from the links you provided, but they all showed the same results so I stuck with the HTML 4.01 Strict as you recommended. Spot the difference:

    Before adding doctype: http://www.10pinleague.com/index-backup.php
    After adding doctype: http://www.10pinleague.com/index-doctype.php

    Any advice how I can fix this? Or would now be a good time to get out of the habit of making <table> layouts and use CSS only? Thanks again, at least I can start making some progress now.
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Now is a very good time to move to using semantic markup and CSS to make layouts instead of tables.

    Here's two pages that explain how to do 100% height layouts:
    How do you put a footer at the bottom of the window?
    Lock the footer to the bottom of viewport
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  18. #10
  19. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    262
    Rep Power
    19
    Thanks for the links. I've tried using the CSS in them to make my 100% high layout with a footer bar, but for some reason my layout <div> insists on remaining only as high as its content! Everything else is CSS though.....with the exception of the table in the header area to position the 'Home' and 'Login' links correctly and the table in the menu bar. Here is all of the relevant code:

    index-css.php (http://www.10pinleague.com/index-css.php):
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <link rel='stylesheet' type='text/css' href='style.css'>
    <link rel='stylesheet' type='text/css' href='menu.css'>
    
    <title>10PinLeague.com -- The Ultimate Bowling League Management System!</title>
    </head>
    <body>
    	
    <div id="minHeight"></div><!-- Safari hack -->
    <div id="outer">
    
    	<div id='header'>
    	<table width='800' height='30'>
    	<tr>
    		<td width='650'>&nbsp;</td>
    		<td width='150'>
    		<a href='badger.php'>Home</a>  <font color='#ffffff'>|</font>  <a href='badger.php'>Login</a>
    		</td>
    	</tr>
    	</table>
    	</div>
    	
    	<div id='menubar'>
    		<table width='760' height='30'>
    		<tr>
    			<td width='15' background='img/menu-left.jpg'>&nbsp;</td>			
    			<td width='730' background='img/menu-bg.jpg'>			
    			
    			<!--	  START OF MENU	  !-->
    			<div class="menu">	
    			<ul>
    				<li>
    				<a href="#">Menu 1<!--[if gt IE 6]><!--></a>
    				<!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
    					<ul class="leftbutton">
    						<li><a href="#"><span class='menulink'>Item 1</span></a></li>
    						<li><a href="#"><span class='menulink'>Item 2</span></a></li>
    						<li><a href="#"><span class='menulink'>Item 3</span></a></li>
    					</ul>
    				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    				</li>
    			</ul>
    			
    			<ul>
    				<li>
    				<a href="#">Menu 2<!--[if gt IE 6]><!--></a>
    				<!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
    					<ul class="leftbutton">
    						<li><a href="#"><span class='menulink'>Item 4</span></a></li>
    						<li><a href="#"><span class="drop"><span class='menulink'>Item 5</span>&raquo;</span><!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
    							<ul>
    								<li><a href="#"><span class='menulink'>Item 5a</span></a></li>
    								<li><a href="#"><span class='menulink'>Item 5b</span></a></li>
    								<li><a href="#"><span class='menulink'>Item 5c</span></a></li>
    							</ul>
    							<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    						</li>
    						<li><a href="#"><span class="drop"><span class='menulink'>Item 6</span>&raquo;</span><!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
    							<ul>
    								<li><a href="#"><span class='menulink'>Item 6a</span></a></li>
    								<li><a href="#"><span class='menulink'>Item 6b</span></a></li>
    								<li><a href="#"><span class='menulink'>Item 6c</span></a></li>
    								<li><a href="#"><span class='menulink'>Item 6d</span></a></li>
    								<li><a href="#"><span class='menulink'>Item 6e</span></a></li>
    							</ul>
    							<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    						</li>
    					</ul>
    				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    				</li>
    			</ul>
    			
    			<ul>
    				<li>
    				<a href="#">Menu 3<!--[if gt IE 6]><!--></a>
    				<!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
    					<ul class="leftbutton">
    						<li><a href="#"><span class='menulink'>Item 7</span></a></li>
    						<li><a href="#"><span class='menulink'>Item 8</span></a></li>
    						<li><a href="#"><span class='menulink'>Item 9</span></a></li>
    						<li><a href="#"><span class='menulink'>Item 10</span></a></li>
    						<li><a href="#"><span class='menulink'>Item 11</span></a></li>
    					</ul>
    				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    				</li>
    			</ul>
    			
    			<ul>
    				<li>
    				<a href="#">Menu 4<!--[if gt IE 6]><!--></a>
    				<!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
    					<ul class="leftbutton">
    						<li><a href="#"><span class='menulink'>Item 12</span></a></li>					
    						<li><a href="#"><span class='menulink'>Item 13</span></a></li>
    						<li><a href="#"><span class="drop"><span class='menulink'>Item 14</span>&raquo;</span><!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
    							<ul>
    								<li><a href="#"><span class='menulink'>Item 14a</span></a></li>
    								<li><a href="#"><span class='menulink'>Item 14b</span></a></li>
    								<li><a href="#"><span class='menulink'>Item 14c</span></a></li>
    							</ul>
    							<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    						</li>
    						<li><a href="#"><span class='menulink'>Item 15</span></a></li>
    						<li><a href="#"><span class='menulink'>Item 16</span></a></li>
    					</ul>
    				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    				</li>
    			</ul>
    			
    			</div> <!-- close "menu" div -->
    	
    			</td>
    			
    			<td width='15' background='img/menu-right.jpg'>&nbsp;</td>
    		</tr>
    		</table>
    	</div> <!-- close "menubar" div -->
    	
    	<div id='content'>
    		
    		Hello!		
    			
    	</div> <!-- close "content" div -->
    
    </div> <!-- close "outer" div -->
    <div id='clearfooter'></div>
    </div>
    
    <div id='footer'>Created by Rob Masters 2007 </div>
    
    </body>
    
    </html>
    style.css:
    Code:
    html,body {margin:0;padding:0}
    
    #outer{
    	min-height:100%;
    	margin-bottom:-20px;
    	height:auto;
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    	background-color: #fff;
    	border-left: 4px solid #582100;
    	border-right: 4px solid #582100;
    }
    * html #outer{height:100%;}
    
    #footer {
        clear:both;
    	height:20px;
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    	background-color: #de7500;
    	color: #000000;
    	border-top: 2px solid #582100;
    	border-left: 4px solid #582100;
    	border-right: 4px solid #582100;
    	font-size: small;
    	font-variant: small-caps;
    	font-style: italic;
    }
    
    #clearfooter {
    	clear: both;
    	height:
    	20px;
    }
    div>p {margin:0}
    
    html>body #minHeight{float:left;width:0px;height:100%;margin-bottom:-22px;} /*safari wrapper */
    
    div#content {
    	margin-top: 1px;
    	padding: 10px;
    }
    
    div#header {
    	position: relative;
    	width: 800px;
    	height: 100px;
    	float:left;
    	vertical-align:top;
    	border:0;
    	margin: 0px;
    	text-align: center;
    	background-image: url('img/header.jpg');
    }
    
    div#menubar {
    	position: relative;
    	width: 760px;
    	height: 30px;
    	margin-left: auto;
    	margin-right: auto;
    }
    	
    
    table  { border-collapse: collapse; border-spacing: 0; }
    td, th { padding: 0; }
    td.padded { padding: 5px; }
    td.lmargin10 { margin-left: 10px; }
    I don't understand where I've gone wrong following the examples. What do I need to change to achieve the 100% high layout? Thanks so much for the help so far, I'm sure this will be my last question!
  20. #11
  21. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You didn't set the height on html and body to 100%.

    Use this:
    Code:
    /* commented backslash hack \*/ 
    html, body{height:100%;} 
    /* end hack */
    You don't need any tables for this. Check out the many changes I made:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    html,body {
      margin:0;
      padding:0;
      /* hide from IE5/Mac \*/
        height:100%;
      /* end hide */
    }
    
    
    #outer{
      min-height:100%;
      margin-bottom:-22px;
      height:auto;
      width: 800px;
      margin-left: auto;
      margin-right: auto;
      background-color: #fff;
      border-left: 4px solid #582100;
      border-right: 4px solid #582100;
    }
    * html #outer{height:100%;}
    
    #footer {
      clear:both;
      height:20px;
      width: 800px;
      margin-left: auto;
      margin-right: auto;
      background-color: #de7500;
      color: #000000;
      border-top: 2px solid #582100;
      border-left: 4px solid #582100;
      border-right: 4px solid #582100;
      font-size: small;
      font-variant: small-caps;
      font-style: italic;
    }
    
    #clearfooter {
      clear: both;
      height: 22px;
    }
    div>p {margin:0}
    
    
    html>body #minHeight{ /* for Safari Safari 1.0-1.2 */
      float:left;
      width:0px;
      height:100%;
      margin-bottom:-22px;
    }
    
    div#content {
      margin-top: 1px;
      padding: 10px;
    }
    
    div#header {
      position: relative;
      width: 800px;
      height: 100px;
      vertical-align:top;
      border:0;
      margin: 0px;
      text-align: center;
      background-image: url('img/header.jpg');
      background-color: #9b3b00;
      color: #fff;
    }
    
    #header .links {
      margin-left: 650px;
      width: 150px;
      padding: 5px 0;
    }
    
    div#menubar {
      position: relative;
      width: 760px;
      height: 30px;
      margin-left: auto;
      margin-right: auto;
      background: url(img/menu-left.jpg) no-repeat top left;
    }
    div#menubar .menu {
      margin-left: 15px;
      padding-right: 15px;
      background: url(img/menu-right.jpg) no-repeat top right;
    }
    div#menubar .menu ul {
      background: url(img/menu-bg.jpg);
      margin: 0;
      padding: 0;
      list-style-type: none;
      height: 30px;
    }
    div#menubar .menu ul ul {
      color:#000;
      background:#a5caad;
      position: absolute;
      left: -9000px;
      top: 30px;
      height: auto;
    }
    div#menubar .menu ul li:hover ul {
      left: 0;
    }
    div#menubar .menu ul li,
    div#menubar .menu ul li a {
      float: left;
      width: 10em;
      height: 30px;
      line-height: 30px;
      position: relative;
    }
    
    </style>
    </head>
    <body>
      
    <div id="minHeight"></div>
    <div id="outer">
    
      <div id='header'>
      <div class="links">
        <a href='badger.php'>Home</a> | <a href='badger.php'>Login</a>
      </div>
      </div>
      
      <div id='menubar'>    
          
          <!--    START OF MENU    !-->
          <div class="menu">  
          <ul>
            <li>
            <a href="#">Menu 1</a>
            
              <ul class="leftbutton">
                <li><a href="#"><span>Item 1</span></a></li>
                <li><a href="#"><span>Item 2</span></a></li>
                <li><a href="#"><span>Item 3</span></a></li>
              </ul>
            
            </li>
            <li>
            <a href="#">Menu 2</a>
            
              <ul class="leftbutton">
                <li><a href="#"><span>Item 4</span></a></li>
                <li><a href="#"><span class="drop"><span>Item 5</span></span></a>
                  <ul>
                    <li><a href="#"><span>Item 5a</span></a></li>
                    <li><a href="#"><span>Item 5b</span></a></li>
                    <li><a href="#"><span>Item 5c</span></a></li>
                  </ul>
                  
                </li>
                <li><a href="#"><span class="drop"><span>Item 6</span></span></a>
                  <ul>
                    <li><a href="#"><span>Item 6a</span></a></li>
                    <li><a href="#"><span>Item 6b</span></a></li>
                    <li><a href="#"><span>Item 6c</span></a></li>
                    <li><a href="#"><span>Item 6d</span></a></li>
                    <li><a href="#"><span>Item 6e</span></a></li>
                  </ul>
                  
                </li>
              </ul>
            
            </li>
            <li>
            <a href="#">Menu 3</a>
            
              <ul class="leftbutton">
                <li><a href="#"><span>Item 7</span></a></li>
                <li><a href="#"><span>Item 8</span></a></li>
                <li><a href="#"><span>Item 9</span></a></li>
                <li><a href="#"><span>Item 10</span></a></li>
                <li><a href="#"><span>Item 11</span></a></li>
              </ul>
            
            </li>
            <li>
            <a href="#">Menu 4</a>
            
              <ul class="leftbutton">
                <li><a href="#"><span>Item 12</span></a></li>          
                <li><a href="#"><span>Item 13</span></a></li>
                <li><a href="#"><span class="drop"><span>Item 14</span></span></a>
                  <ul>
                    <li><a href="#"><span>Item 14a</span></a></li>
                    <li><a href="#"><span>Item 14b</span></a></li>
                    <li><a href="#"><span>Item 14c</span></a></li>
                  </ul>
                  
                </li>
                <li><a href="#"><span>Item 15</span></a></li>
                <li><a href="#"><span>Item 16</span></a></li>
              </ul>
            
            </li>
          </ul>
          
          </div> <!-- close "menu" div -->
    
      </div> <!-- close "menubar" div -->
      
      <div id='content'>
        
        Hello!    
          
      </div> <!-- close "content" div -->
    
    <div id='clearfooter'></div>
    </div> <!-- close "outer" div -->
    
    <div id='footer'>Created by Rob Masters 2007 </div>
    
    </body>
    </html>
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  22. #12
  23. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    262
    Rep Power
    19
    Thanks again Kravvitz, you've been a huge help! I thought I had set the height to 100% but I'd obviously overlooked that somehow, my bad.

    Now theres just one small problem regarding the positioning of the footer (I know I'm deviating from the thread topic now, but I really don't think this is worth starting a new one). I'm probably being overly fussy here, but I just want the layout to be perfect before I start worrying about content. As it is, the footer always extends below the bottom of the page causing a vertical scrollbar to appear - even when the main content area is empty (I'm still relating to this page, the css for which can be found in my previous posts). This is because of the margin of -20px set to the outer div I know, but I don't know how to do it in a similar way so the footer sits flush against the bottom with no vertical scrollbar. I tried making the footer have an absolute positioning and set its bottom to 0, and then placed this div within the main 'outer' div, but then the footer did not move when the page scrolled. I'm completely stumped with this as I'm still fairly new to CSS....how do I get it to appear properly?
    Last edited by MastahUK; October 12th, 2007 at 07:31 AM.
  24. #13
  25. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    262
    Rep Power
    19
    Well after a bit of tinkering (a bit of an understatement!), I've fixed my problem. As usual it turned out to be something that is so completely obvious I'm not sure how I missed it! Hehe, turns out I had just placed the 'clearfooter' <div> tag in the wrong place; I'd put it after I'd closed the 'outer' </div> tag, instead of just before it. Silly me. Well, seems this thread is fully resolved now - I hope my mistakes can be a lesson to other people!
  26. #14
  27. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome.

    But you're still using tables? Look at the changes I made in order to remove them in the code I posted.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo