Putting Wayfinder inside of a div.

118 Posts

DorianJ Reply #1, 19 years, 8 months ago

I have a strange problem with Wayfinder, but hopefully it’s just my css. I’m trying to make a horizontal navigation menu placed in a div at the top of the page. The code below creates a div, but everything generated by Wayfinder is below and outside of the div. Why?

<div id="nav_menu">[[Wayfinder? &startId=`0` &level=`0`]]</div>

-Dorian

39 Posts

-- Reply #2, 19 years, 8 months ago

Did you have try the alternate call ?

[!Wayfinder? &startId=`0` &level=`0`!]

or it’s maybe a typo check the </div> tag ;-)

118 Posts

DorianJ Reply #3, 19 years, 8 months ago

No typo. The code I posted was copied and pasted.

-Dorian

615 Posts

Sylvaticus Reply #4, 19 years, 8 months ago

That really seem to be something with your CSS. The Wayfinder-call like yours is generating an <UL>-<LI>-list witch normally goes vertical. You can use

 #something or .something {list-style-type:none;}
#something or .something li {float:left;}

in your CSS to make it horisontal.

I think, thererfor I am! But what I am, and why...?

118 Posts

DorianJ Reply #5, 19 years, 8 months ago

Correct. I have already done that part. It displays horizontally the way that I want it, however it will not display inside the div that I want.

-Dorian

615 Posts

Sylvaticus Reply #6, 19 years, 8 months ago

Can you post the peace of CSS that covers the menu and the menu-outer-DIV? And the generated HTML for the menu, included the DIV. It’s better to see what’s going on then.

I think, thererfor I am! But what I am, and why...?

118 Posts

DorianJ Reply #7, 19 years, 8 months ago

Sure. Here’s the CSS.

#nav_menu {
    text-align: center;
    margin: 20px 0 0 0;
    border-style: solid;
    border-width: 1px; 
    width: 100%;
}

#nav_menu ul li {
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 16%;
    text-align: center;
}

Here’s the HTML that is generated and I see something weird. The last two <li> elements have been given class attributes. I don’t know how those got there!

<div id="nav_menu">
  <ul>
    <li><a href="#" title="Home" >Home</a></li>
    <li><a href="#" title="Axles" >Axles</a></li>
    <li><a href="#" title="Engine" >Engine</a></li>
    <li><a href="#" title="Suspension" >Suspension</a></li>
    <li class="active"><a href="#" title="Tires" >Tires</a></li>
    <li class="last"><a href="#" title="Transmission" >Transmission</a></li>
  </ul>
</div>

And attached is a screen shot of what this looks like in FF, Safari, and Netscape on Mac. You can see that the menu is outside the borders of the div.

-Dorian

615 Posts

Sylvaticus Reply #8, 19 years, 8 months ago

The class="active" is given by Wayfinder for you to style the active menu-element the way you want.
The same with the class="last", if you want to style the last menu-element in another way than the others.

I have seen your div-problem before, and I will test your code and hopefully come up with a suggestion later this day (if not other come first ofcourse).

I think, thererfor I am! But what I am, and why...?

1,039 Posts

MadeMyDay Reply #9, 19 years, 8 months ago

Hi,

first of all give the ul a margin/padding of 0. Then (if possible) assign a height to the div. Or you have to put in an overflow: hidden, but this might screw up IE6 so vou have to assign

overflow: hidden !important;
overflow: visible;

This should work.

MODx deutsch | Webdesign Karlsruhe | Ressourcen für Webdesign

5 Posts

piezke Reply #10, 19 years, 8 months ago

hi,
maybe your problem is solved when you simply clear the float after the ul:

<div id="nav_menu">
  <ul>
    <li><a href="#" title="Home" >Home</a></li>
    <li><a href="#" title="Axles" >Axles</a></li>
    <li><a href="#" title="Engine" >Engine</a></li>
    <li><a href="#" title="Suspension" >Suspension</a></li>
    <li class="active"><a href="#" title="Tires" >Tires</a></li>
    <li class="last"><a href="#" title="Transmission" >Transmission</a></li>
  </ul>
  <div style="clear: left;"></div>
</div>

this should let the div expand with its content.