I’m trying to add WayFinder to a specific section in my style sheet, but instead it separates into another "row". (See wrong_nav image)
Here is my MODx code:
<div class="roundedcornr_box_133584">
<div class="roundedcornr_top_133584"><div></div></div>
<div class="roundedcornr_content_133584">
<span style="vertical-align:bottom;"> <!-- this makes sure all text or images sits at the bottom of the blue box -->
<p></p> <!-- this leaves a space between the top of the blue box and the text. -->
<img src="images/logo-crop.png" width="91px" height="75px" /> <!--do not make the logo larger than this size! -->
<!-- these are the navigation buttons -->
<div id="slidetabsmenu">
[!Wayfinder? &startId=`0` &rowTpl=`menuRows` &level=`1` &rowClass=`slidetabsmenu`!]
</div>
</span>
</div>
<!--<div class="roundedcornr_bottom_133584"><div></div></div> --> <!-- this is the bottom rounded corners for blue -->
</div>
<div class="roundedcornr_box_white">
<!--<div class="roundedcornr_top_white"><div></div></div> --> <!-- this is the top rounded corners for white -->
<div class="roundedcornr_content_white">
<p>
<h1>[*pagetitle*]</h1>
<br/>
[*#content*]
</p>
</div>
<div class="roundedcornr_bottom_white"><div></div></div>
Here is the css code:
#slidetabsmenu {
float:left;
width:100%;
font-size:90%;
line-height:normal;
border-bottom: 1px solid gray;
}
* html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}
#slidetabsmenu ul{
list-style-type: none;
margin:0;
margin-left: 10px;
padding:0;
}
#slidetabsmenu li{
display:inline;
margin:0;
padding:0;
}
#slidetabsmenu a {
float:left;
background:url(tab-left.gif) no-repeat left top;
margin:0;
padding:0 0 0 9px;
text-decoration:none;
}
#slidetabsmenu a span {
float:left;
display:block;
background:url(tab-right.gif) no-repeat right top;
padding:3px 14px 3px 5px;
font-weight:bold;
color:#3B3B3B;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */
#slidetabsmenu a:hover span {
color: black;
}
#slidetabsmenu #current a {
background-position:0 -125px;
}
#slidetabsmenu #current a span {
background-position:100% -125px;
color: black;
}
#slidetabsmenu a:hover {
background-position:0% -125px;
}
#slidetabsmenu a:hover span {
background-position:100% -125px;
}
So basically, I want it to be set up like the current_nav picture, not the wrong_nav picture.