How Do I Get My Inline Wayfinder to Line-up Inline?

88 Posts

SymbioticDesign Reply #1, 16 years, 7 months ago

Hi! Thanks for reading.

I’m trying to get my inline wayfinder output to simply line-up inline.

[[Wayfinder? startId=`0` &outerTpl=`links-template` &rowTpl=`link-items` &removeNewLines=`TRUE`]]

Doesn’t seem to work at all.

What I want is for the parent items to offer a colon after them, and list children inline.

Here’s my links-template chunk:

<ul [+wf.classes+]>[+wf.wrapper+]</ul>

Here’s my link-items chunk:

<li [+wf.id+] [+wf.classes+]>
<span style="white-space:nowrap">• <a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a></span>
[+wf.wrapper+]
</li>

But I am getting line breaks all over, after every parent, event though there is plenty of room and it doesn’t have to wrap.

I understand that that is good for vertical menus, but I am trying to condense about 60 links into a simple list of links.

My CSS is (relevant stuff in Blue)...

#text-links {
text-align:left;
font-family:Franklin Gothic Book, Arial, Geneva, Helvetica, sans-serif;
font-size:.8em;
}
#text-links ul li {
padding:0 0 0 3px;
display:inline;
}
#text-links a:link {
color:#E21E26;
text-decoration:none;
font-weight:bold;
}
#text-links a:visited {
color:#810303;
text-decoration:none;
font-weight:bold;
}
#text-links a:hover {
color:#E34141;
text-decoration:underline;
font-weight:bold;
}

Where am I missing the boat, here?

Eventually, I’ll want to have it styled something like...

*Home: *About Us *Products: *Heaters: *Model X *Parts List *Air Conditioners: *Model Y *Model Z *Parts List *Ordering Info *Support *Dealers *Contact Us

But I really do need to condense everything down.

Where do I get enough info to accomplish this?

Thanks!
I appreciate all the help I can get.
-Doug

Doug Peters, Symbiotic Design. (605) 251-8973
http://W3DN.com | http://www.DomainHostmaster.com

87 Posts

legio_noctis Reply #2, 16 years, 7 months ago

Could you post a screenshot of what you’re getting at the moment and the menu HTML that is generated?
I’m not precisely sure what effect you’re trying to get (I have a feeling that coloured-text mockup lost its formatting when you posted it): could you draw it and post an image of that too?

88 Posts

SymbioticDesign Reply #3, 16 years, 6 months ago

Hi...

Since posting the CMS version of the site went live, though I am still working on it "behind the scenes".

http://www.elstonmfg.com/gopher-getters.html

This page is a perfect example of what I am talking about. If you look at the text links at the bottom of the page, they get broken up because a new line will occur when a new submenu starts.

Some of this could be avoided according to menu organization, but the company is in control of that and I think that’s the way they want it.

I’m simply trying to organize the menu better along a vertically oriented space/line.

I know I want to add bread crumbs, as well. But maybe an up menu might work better for my needs.

I just want to clean-up the mess.

Thanks for the reply.
-Doug

Doug Peters, Symbiotic Design. (605) 251-8973
http://W3DN.com | http://www.DomainHostmaster.com

87 Posts

legio_noctis Reply #4, 16 years, 6 months ago

I have a few ideas for organising it and will look at it later today. Are (CSS) drop down menus OK or do all the links need to be visible all the time?

87 Posts

legio_noctis Reply #5, 16 years, 6 months ago

I reckon the problem that you were having was that you weren’t display:inline-ing the nested <ul>s. This isn’t a prettified solution, but it demonstrates the idea (to a working depth of three levels).

Also, this css changes the look of the menu just above as well, so you will probably want to give one of them a unique id/class to style it separately.

On a test page, add this to your current css:

#text-links ul {
clear: both;
margin-bottom: 5px;
}

#text-links ul li {
border: #810303 1px solid;
border-radius: 5px;
-moz-border-radius: 5px;
color: #810303;
display: inline;
float: left;
font-family: Franklin Gothic Book,Arial,Geneva,Helvetica,sans-serif;
font-weight: bold;
margin-right: 10px;
padding: 0.1em;
white-space: nowrap;
}

#text-links ul a:link, #text-links ul a:visited {
color: #810303;
text-decoration: none;
}

#text-links ul li ul {
display: inline;
font-weight: normal;
list-style-type: none;
margin: 0;
padding: 0;
}

#text-links ul li ul a:link, #text-links ul li ul a:visited {
font-weight: normal;
}

#text-links ul li ul a:link, #text-links ul li ul a:visited {
color: #810303;
}

#text-links ul li ul li {
border: 0 none;
display: inline;
float: none;
font-weight: normal;
}

#text-links ul li ul li ul {
display: inline;
font-size: 0.9em;
}

#text-links ul li ul li ul li {
border: 0 none;
display: inline;
}

I’ve tested this css with the following html (slightly modified):

<!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>
<title>Gopher Getters - Elston Mfg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="Elston Gopher Getters provide a safe, economical, and fast method of controlling gophers." />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="/style-flyouts.css" />
<base href="http://www.elstonmfg.com/"></base>
</head>
<body onload="MM_preloadImages('images/menu/menu_btns_706.png')">
<div id="container"><div id="header"><div id="company-logo"><a href="/"><img src="images/logos/elstonmfg-logo.png" alt="Elston Manufacturing, Inc. Company Logo" name="ElstonLogo" width="226" height="76" border="0" id="ElstonLogo" /></a></div><!-- company-logo --><div id="heading"><h1>Gopher Getters</h1></div><!-- /heading --></div><!-- /header -->
  <div id="section">
    <div id="content-area-wrapper">
      <div id="content-area-top-left-corner"><img src="images/layout/bgs/content_top-left-corner.png" width="43" height="42" alt="Content Area Top Left Corner" /></div>
      <!-- /content-area-top-left-corner -->
      <div id="content-area">
        <div id="aside">
          
        </div><!-- /aside -->
        <div id="content">
          <h2>Elston Gopher Getters</h2>
          <p>Elston Gopher Getters provide a safe, economical, and fast method of controlling gophers.</p>
<ul>
<li><span style="font-weight: bold;">Safe</span> All our products distribute the bait underground into tunnels, where the gophers are, for maximum safety and effectiveness.</li>
<li><span style="font-weight: bold;">Fast</span> Gopher Getters allow you to treat gopher problems quicker than by hand or by other techniques out there. With our larger models, one man can treat
up to 10 acres per hour.</li>
<li><span style="font-weight: bold;">Economical</span> In addition to the time you'll save, all of our products meter out bait in present quantities that provide an effective kill without wasting
bait.</li>
</ul>
<p>We also mix and sell our own <a title="Gopher Bait" href="gopher-bait.html">gopher bait</a>. It is an excellent bait with 0.5% strychnine and good free flowing properties. When used with Elston Gopher Getters, gophers die underground safely out of reach of other animals.</p>
<h3>Models Available</h3>
<p>We offer four models of Gopher Getters (sometimes called burrow builders):</p>
<ul>
<li><span style="font-weight: bold;"><a title="Gopher Getter Jr. (GA-600)" href="gopher-getters/ga-600-gopher-getter-jr.html">GA-600</a></span><br />
    Our handheld model. It is designed to control gophers in large lawns and small acreages.</li>
<li><span style="font-weight: bold;"><a title="Standard 3-Point Gopher Getter" href="gopher-getters/ga-400-gopher-getter.html">GA-400</a></span><br />
    Our entry-level 3-point hitch model. It is our most popular model and allows you to easily treat many acres.</li>
<li><span style="font-weight: bold;"><a title="New Larger 3-Point Gopher Getter Entry" href="gopher-getters/ga-300-gopher-getter.html">GA-300</a></span><br />
    Our entry-level 3-point hitch model is designed for larger tractors than the GA-400. This is the newest addition to our product line.</li>
<li><span style="font-weight: bold;"><a title="Pull Type Gopher Getter" href="gopher-getters/ga-500-gopher-getter.html">GA-500</a></span><br />
    Our pull-type (drawbar) model. It has attached wheels that allow to transport at highway speeds.</li>
<li><span style="font-weight: bold;"><a title="Heavy Duty 3-Point Gopher Getter" href="gopher-getters/ga-700-gopher-getter.html">GA-700</a></span><br />
    Our heavy duty 3-point hitch model. It is designed for tough and rocky ground and lots of acres.</li>
</ul>
<h3>Additional Information</h3>
<p><a title="Find a Place to Purchase your Gopher Getter" href="gopher-getters/gopher-getter-ordering.html">How
         to purchase a Gopher Getter</a></p>
<p>Product Brochure (<a title="Page 1 of Brochure for Gopher Getters" href="gophergetter/gopher_getter_pg1.pdf" target="_parent">page 1</a>) (<a title="Page 2 of Brochure for Gopher Getters" href="gophergetter/gopher_getter_pg2.pdf">page 2</a>)</p>
          <p id="endgame"><a href="/"><img src="images/logos/elston-logo-mod_335x80_v2.png" alt="Elston Manufacturing, Inc." name="ElstonMfg" width="335" height="80" border="0" id="ElstonMfg" /></a></p>
        </div><!-- /content -->
        <div id="text-links">
          <p><strong>Navigation Links:</strong></p>
          <ul ><li  >
<a href="http://www.elstonmfg.com/" title="Cargo Heaters, Traction Sanders and Gopher Getters" >Home Page</a>

</li>
<li  >
<a href="/cargo-heaters.html" title="Cargo and Universal Heaters" >Cargo Heaters</a>

</li>
<li  >
<a href="/traction-sanders.html" title="Elston Traction Sanders" >Traction Sanders</a>

</li>
<li   class="active self">
<a href="/gopher-getters.html" title="Gopher Getters" >Gopher Getters</a>

</li>
<li  >
<a href="/gopher-bait.html" title="Gopher Bait" >Gopher Bait</a>

</li>
<li  >
<a href="/contact.html" title="Contact Information" >Contact Us</a>

</li>
<li   class="last">
<a href="/ordering.html" title="Ordering Information" >Ordering Info</a>

</li>
</ul>
          <ul ><li  >
<a href="/gopher-getters/ga-300-gopher-getter.html" title="GA-300 Gopher Getter" >GA-300 Gopher Getter</a>
<ul ><li  >
<a href="/gopher-getters/ga-300-gopher-getter/ga-300-ordering.html" title="Ordering the GA-300 Gopher Getter" >GA-300 Gopher Getter Ordering</a>

</li>
</ul>
</li>
<li  >
<a href="/gopher-getters/ga-400-gopher-getter.html" title="GA-400 Gopher Getter" >GA-400 Gopher Getter</a>
<ul ><li  >
<a href="/gopher-getters/ga-400-gopher-getter/ga-400-ordering.html" title="Ordering the GA-400 Gopher Getter" >GA-400 Gopher Getter Ordering</a>

</li>
</ul>
</li>
<li  >
<a href="/gopher-getters/ga-500-gopher-getter.html" title="GA-500 Gopher Getter" >GA-500 Gopher Getter</a>
<ul ><li  >
<a href="/gopher-getters/ga-500-gopher-getter/ga-500-ordering.html" title="Ordering the GA-500 Gopher Getter" >GA-500 Gopher Getter Ordering</a>

</li>
</ul>
</li>
<li  >
<a href="/gopher-getters/ga-700-gopher-getter.html" title="GA-700 Gopher Getter" >GA-700 Gopher Getter</a>
<ul ><li  >
<a href="/gopher-getters/ga-700-gopher-getter/ga-700-ordering.html" title="Ordering the GA-700 Gopher Getter" >GA-700 Gopher Getter Ordering</a>

</li>
</ul>
</li>
<li  >
<a href="/gopher-getters/ga-600-gopher-getter-jr.html" title="Gopher Getter Jr." >Gopher Getter Jr.</a>
<ul ><li  >
<a href="/gopher-getters/ga-600-gopher-getter-jr/gopher-getter-jr-ordering.html" title="Gopher Getter Jr Order Info" >Gopher Getter Jr. Order Info</a>
<ul ><li  >
<a href="/gopher-getters/ga-600-gopher-getter-jr/gopher-getter-jr-ordering/jr-dist-net.html" title="Gopher Getter Jr. Distribution Network" >Gopher Getter Jr Locator</a>

</li>
</ul>
</li>
</ul>
</li>
<li  >
<a href="/gopher-getters/gopher-getter-ordering.html" title="Gopher Getter Order Info" >Gopher Getter Ordering</a>
<ul ><li  >
<a href="/gopher-getters/gopher-getter-ordering/dist-net.html" title="Gopher Getter Distribution Network" >Gopher Getter Locator</a>

</li>
</ul>
</li>
<li   class="last">
<a href="/gopher-getters/gg-part-lists.html" title="Elston Gopher Getter Part Lists" >Gopher Getter Part Lists</a>

</li>
</ul>
        </div><!-- /text-links -->
      </div><!-- /content-area -->
    </div><!-- /content-area-wrapper -->
    <div id="footer">
      <div id="content-footer"><img id="lower_right_corner_content_area" src="images/layout/bgs/lower-right-corner_content-.png" width="43" height="35" alt="Lower content corner" class="fltlft" />
        Copyright MMX <strong>Elston Manufacturing, Inc.</strong>, all rights reserved worldwide.<br />
1-800-845-1385 : (605) 336-7716 : <a title="contact information" href="contact.html">more contact information</a>
      </div><!-- /content-footer -->
      <div id="footer-content-shadow"><img id="bg_footer_shadow_transition" src="images/layout/bgs/bg_footer-shadow-transition.png" width="57" height="25" alt="" class="fltlft" />
        <div id="footer-notices">
          Website powered by <a href="http://www.modxcms.com" target="_blank" title="MODx CMS">MODx</a> & designed by <a href="http://www.symbioticdesign.com" target="_blank" title="Creative website design and development solutions by Symbiotic Design">Symbiotic Design</a>
        </div><!-- /footer-notices -->
      </div><!-- footer-content-shadow -->
    </div><!-- /footer -->
    <div id="nav">
	  <ul id="navigation">
             <li id="home"><a href="/" title="Elston Manufacturing, Inc., Home Page">Home</a></li>
<li id="cargo-heaters"><a href="cargo-heaters.html" title="Propane & Electric Roll-on Cargo Heaters">Cargo Heaters</a></li>
<li id="traction-sanders"><a href="traction-sanders.html" title="Elston Traction Sanders for Trucks, Buses & Other Applications"></a></li>
<li id="gopher-getters"><a href="gopher-getters.html" title="Elston Gopher Getters and the Gopher Getter Jr.">Gopher Getters</a></li>
<li id="gopher-bait"><a href="gopher-bait.html" title="Gopher Bait for the Gopher Getter">Gopher Bait</a></li>
<li id="ordering"><a href="ordering.html" title="Ordering Information">Ordering Info</a></li>
<li id="contact"><a href="contact.html" title="Contact Us at Elston Manufacturing, Inc.">Contact Us</a></li>
          </ul>
	  <!-- END navigation UL -->
          <p> </p>
          
    </div><!-- /nav -->
  </div><!-- /section -->
</div><!-- /container -->
</body>
</html>

Your Wayfinder template will probably look something like:

links-template chunk:

<ul[+wf.classes+]>[+wf.wrapper+]</ul>

link-items chunk:

<li[+wf.id+][+wf.classes+]>
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a>
[+wf.wrapper+]
</li>

Fingers crossed

88 Posts

SymbioticDesign Reply #6, 16 years, 6 months ago

WOW, WHOA... COOL!

Man, you guys are awesome!

OK, yes, it sounds like you have hit the nail on the head. It makes sense to display the nested <ul>s inline as well as the <li>s.

I’ve been amazed at how little I know in here, and really glad to finally learn it.

I’m working on the main menu at the moment (trying to get my css sprite images to display in the root parent <ul>), but I will definitely tackle this as soon as I try something I was just in the middle of. It does sound like it will work though, and I thank you in advance.

I’ll let you know for sure in just a little bit.

THANKS!
-Doug

Doug Peters, Symbiotic Design. (605) 251-8973
http://W3DN.com | http://www.DomainHostmaster.com

88 Posts

SymbioticDesign Reply #7, 16 years, 6 months ago

Thanks, legio_noctis!

It seems to work great.

I messed-up your styles, so I still have to sort that out. But it seems to work great. I am going to work on it a bit for making it live.

Thanks!

-Doug

Doug Peters, Symbiotic Design. (605) 251-8973
http://W3DN.com | http://www.DomainHostmaster.com

87 Posts

legio_noctis Reply #8, 16 years, 6 months ago

You’re welcome! cool

Do whatever you want with my suggestion---I know it doesn’t look too pretty; it was more a proof of concept.

88 Posts

SymbioticDesign Reply #9, 16 years, 6 months ago

Quote from: legio_noctis at Mar 25, 2010, 08:37 PM

You’re welcome!

Do whatever you want with my suggestion---I know it doesn’t look too pretty; it was more a proof of concept.

Well, you kind of pushed me in a better direction than what I was going to do, and I ran with it. wink

You can check out an example page here:

http://www.elstonmfg.com/cargo-heaters.html

I don’t know how long that one will be using that template, I kind of needed that page to work on resolving the issue I have with the Submenu <li> wrapping over the Submenu <ul>. I also want to get the submenu <li> background to turn tan on hover (right now only the <a> turns tan on hover).

If that page goes away (because it is public and once I have it worked out I’ll take it down), I am still working on it at...

http://www.elstonmfg.com/index.php?id=73

...but I don’t have any submenus to test it with on that page.

I’m thinking that my key will be line-height, but I am actually supposed to be adding the CSS Sprites to the Main Menu. Still having some difficulty with getting Wayfinder to load images. I am trying to load the images from the root, but I think Wayfinder might be thinking that /assets/ is root? Really strange. The images load fine if I don’t use Wayfinder, but of course I need to.

Always something, isn’t it?
;)

Thanks Again!
-Doug

Doug Peters, Symbiotic Design. (605) 251-8973
http://W3DN.com | http://www.DomainHostmaster.com

87 Posts

legio_noctis Reply #10, 16 years, 6 months ago

The wrapping problem I think can be solved by [tt]float:left[/tt]-ing the elements that are breaking: that’s what I did although it will require quite a lot of fiddling to stop everything else falling apart around it.

How are you doing the icons---is there a different icon for each page? Are you using a TV on each page with an image url to define the icon, then calling it like [tt]style="background-image:[+imgTV+]"[/tt] in the Wayfinder template?