Wayfinder & Menu Snippet Noobie Questions

Hello All,

I apologize if this is not posted in the right place, I was torn about where to post it. I am new to modx and have been doing my best to learn it the past 2 weeks.

1) My biggest problem right now is that when I am using the Wayfinder snippet it is offset to the right. It doesn’t matter what template or where within the template it is always offset when I call it?

2) Besides Wayfinder what are the most common snippets that people use in Modx. I know people say not to use DropMenu because it has problems. I really want to do a horizontal menu that would go under a site banner. Any ideas?

Thanks for the help,
Joel Logan

Use CSS to position the menu the way you want it.

Read:

http://alistapart.com/articles/taminglists/

Examples:

http://css.maxdesign.com.au/listamatic/

Thanks for those sites. I was able to fix my problem with wayfinder. My problem ended up being the following two lines:


BEFORE:
margin:0;
padding:0;


AFTER:
margin-left:0;
padding-left:0;

Putting in the "-left" fixed the issue. Hope this post may help somebody else starting out.

Joel Logan

I spoke too soon, it only fixed my problem in Firefox, not IE. Forgive me for not knowing more, but the following is where it is called from in the CSS file:

_____________________
#avmenu{

clear:left;

float:left;

width:150px;

margin-left:0;

padding-left:0;

font-size:0.9em;
}
_______________________________________________
Any idea what else I can try??

Thanks,
Joel Logan

Do you have a link to the site for us to see what it is doing?

www.hillscollsioncenter.com
.

I am using a modified Andean template. Haven’t changed out the banner or changed colors yet. Works good in Firefox but not IE. The Wayfinder menu is shifted over too much to the right.

Joel Logan

<div id="avmenu"> <!-- left sidebar -->
<div class="sideblock" id="sideMenu">
<ul><li class="active"><a href="/index.php?id=1" title="Welcome" >Welcome</a></li>
</ul>
</div>
</div>

To me, using FF with the Chris Pedrick extension, that the #avmenu has a width declared to it and is possibly floating the a tag to the left, but is leaving the width the same. The problem comes up in IE that it is then floating right to the outside right edge of the div.

#avmenu{
clear:left;
float:left;
margin-left:0;
padding-left:0;
width:200px;
font-size:0.9em;
}

Change to:

#avmenu{
clear:left;
float:left;
margin-left:0;
padding-left:0;
font-size:0.9em;
}

See what that does....not to sure what else right now as I have some issues on my end with my site, but I will check into it further and let you know.

Removing the width tag didn’t help. If you can think of anything else to try I would appreciate it!

Thanks,
Joel Logan

Change your #sidemenu ul to this:

#sideMenu ul {
list-style:none;
width:150px;
padding:0;
margin: 0px;
}

It is only adding a margin: 0px to it, and that seems to clear it up on my end with both FF and IE7.

Hope that helps......

THAT FIXED IT!

Thanks so much for your help and time, I would have never figured that out!

Joel Logan