noob importing Dremweaver site...problem inserting wayfinder

Hi all,

I started with the idea to use a template in Modx but have got courageous enough to attempt to build my own. So I built the index and css in dreamweaver with tables tr td( I want to use div’s eventually but for right now with my limited experience I’m happy with tables... can I use tr and td tags or do I need div’s for modx?) Now I’m trying to insert the dropdown menu directly from the step template. Have linked the pages and inserted the js file and spent the past 2 days reading and trying to figure out how to get the menu to work, but it doesn’t...so I come to you for advice, what am I doing wrong?

html code for index:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Balloch Group</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
<link href="assets/CSS/theballochgroup.css" rel="stylesheet" type="text/css" />
<script src="[(base_url)]assets/templates/theballochgroup/menu.js" type="text/javascript"></script>
<script src="manager/media/script/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="manager/media/script/scriptaculous/scriptaculous.js" type="text/javascript"></script>
</head>

<body>
<table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="778" height="95" class="style1"><table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="285" height="95"><img src="assets/templates/theballochgroup/logo.gif" alt="" name="logo" width="285" height="95" id="logo" /></td>
<td width="715" height="95" align="right" valign="bottom" background="assets/templates/theballochgroup/logo background.gif"><span class="style2">English</span></td>
</tr>
</table></td>
</tr>
</table>
<table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1000" height="26" class="style1"><div id="nav">[!DropMenu? &amp;startDoc=0 &amp;levelLimit=`2`!]</div></td>
</tr>

...there’s more but this last line is where I want to put in Dropmenu

css

/* NAV - Son of Suckerfish Dropdowns http://www.htmldog.com/articles/suckerfish/dropdowns/ */

#nav, #nav ul {padding: 0;margin: 0;list-style: none}
#nav {background: #999 url("assets/templates/theballochgroup/imgs/button_dn.gif") repeat-x;font-weight:bold;height:2.09em;font: bold 96% arial;margin: 0 0px 0 0px}
#nav li {position:relative;background: #999 url("assets/templates/theballochgroup/imgs/button_dn.gif") repeat-x;float: left;width: auto;display:block;margin: 0;border-bottom: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;padding:0}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {border-bottom: none;text-decoration:none;cursor:pointer;color:#999;display: block;padding: 4px 10px 2px}
#nav a:hover {background: #999 url("assets/templates/theballochgroup/imgs/button_up.gif") repeat-x;color:#81A021}

#nav li ul {border-bottom: 1px solid #999;border-left: 1px solid #999;border-right: 1px solid #999;background: #f6f6f6;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8;
-khtml-opacity:0.8;
width:15.8em;font-size:90%;margin-top:3px;position: absolute;font-weight:normal;left: -999em;}

#nav li:hover ul, #nav li.sfhover ul {top:19px;left: 0;z-index:99999}
#nav li li {background:none;float:none;border:none;border: 1px solid #999;border-top:1px solid #fff;border-right:none;border-left:none;padding-left:0}
#nav li li.last {border-bottom:none}
#nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {
color:#000;
border-bottom: none;
padding: 3px 10px 2px;
width:14em}
#nav li li a:hover {color:#000;background:#EFEFEF url("assets/templates/theballochgroup/imgs/button_up.gif") repeat-x}

#nav li.active {background: #EFEFEF;}
#nav li.active ul {border:none;background: #EFEFEF}
#nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {}
#nav li.active a:hover {color:#000}
#nav li.here {color:#000;background:#F3F9E1 url("assets/templates/theballochgroup/imgs/bgcloser.jpg") repeat-x}
#nav li li.here {color:#000;
background: #D2DEB0;
padding: 3px 10px 2px;
width:14em}

#nav li.active li {border:none;border-top: 1px solid #EFEFEF}
#nav li.active li.last {border-bottom: none;}
#nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#000}
#nav li.active li a:hover {background: #EFEFEF;color:#000}

#nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#000;font-weight:bold;background: #EFEFEF}

/* hide from IE mac \*/
#nav li {width:auto}

Quote from: dhilden at Jan 05, 2007, 05:36 PM

Hi all,

I started with the idea to use a template in Modx but have got courageous enough to attempt to build my own. So I built the index and css in dreamweaver with tables tr td( I want to use div’s eventually but for right now with my limited experience I’m happy with tables... can I use tr and td tags or do I need div’s for modx?) Now I’m trying to insert the dropdown menu directly from the step template. Have linked the pages and inserted the js file and spent the past 2 days reading and trying to figure out how to get the menu to work, but it doesn’t...so I come to you for advice, what am I doing wrong?

About the table vs. div question: both are perfectly possible to use while running your website on ModX. On a sidenote: 2 days is not a lot of time regarding the complexity of the topics which you began to explore. I’d advise against heading straight for the fancyiest dropdown of all. Instead you could start with something more basic.
Quote from: dhilden at Jan 05, 2007, 05:36 PM

html code for index:
[...]

...there’s more but this last line is where I want to put in Dropmenu

Where did you put this code? Are you aware of the template system of ModX? Did you create the chunks required by the step template? Did you understand the install instructions supplied with the Step template? (see: http://www.modxcms.com/forums/index.php/topic,3879) And finally: Why did you start a topic stating that you want to insert Wayfinder when the step template does not use it at all?
Quote from: dhilden at Jan 05, 2007, 05:36 PM

css
[...]

oops thought it was wayfinder, apologies.

Think I will take your advice and start off with an easier horizontal drop down menu, anyone have a recomendation?

I did create a new template and insert the hmtl code.

Most of the examples on modx all use div tags. I’m using tables tr td and don’t really know how to insert the chunks, snippets etc into tables. So if I code the website in Dreamweaver and try and hook up some snippets and chunks into the template how would my code look? something like this:

....
<tr>
<td width="1000" height="26" class="style1"><div id="nav">[!DropMenu? &amp;startDoc=0 &amp;levelLimit=`2`!]</div></td>
</tr>
....