Wayfinder and List-Style and System Link

30 Posts

carol Reply #1, 15 years, 10 months ago

<div id="navigation">
<div id="mainnav">
  [[!Wayfinder? &startId=`[[UltimateParent? &topLevel=`1`]]` &level=`1` &rowIdPrefix=`topnav` &outerTpl=`menuContainer`  &excludeDocs=`24`]]
</div>
<div style=" position: relative; height:1px; width:750px; float:left;"><hr size="1" noshade="noshade"></div>
<div id="subnav">[[!Wayfinder? &startId=`[[UltimateParent? &topLevel=`3`]]` &outerTpl=`menuContainer` &rowIdPrefix=`nav`]]
</div>

If i click on Projects is should jump to html or if i click on about i should jump to contact and so on. I hope this is possible.

Me next Problem is i would like to have between the menupoints some list-style:disc. With my current css it works only in FireFox but not on Chrome or Safari. I really don’t know why.
Here are my codes:

HTML out put:

<div id="navigation"> 
<div id="mainnav"> 
  <ul > 
<li id="topnav1" class="first active"><a href="http://url/" title="share" >share</a></li><li id="topnav2"><a href="produkte/" title="Produkte" >Produkte</a></li><li id="topnav5" class="last"><a href="commitments/" title="Commitments" >Commitments</a></li> 
</ul> 
</div> 
<div style=" position: relative; height:1px; width:750px; float:left;"><hr size="1" noshade="noshade"></div> 
<div id="subnav"><ul > 
<li id="nav6" class="first"><a href="vision.html" title="Vision" >Vision</a></li><li id="nav7" class="last"><a href="umsetztung.html" title="Umsetzung" >Umsetzung</a></li> 
</ul> 
</div>

CSS

/* Navigation Modifikation */

ul {margin:0; padding:0; list-style:none;}
li {margin:0; padding:0; list-style:none;}

#navigation {
   position:relative;
   width:750px;
   height:50px;
   float:left;
   text-align:left;
   margin-top:1em;
}

#mainnav {
   position:relative;
   width:750px;
   height:auto;
   float:left;
   text-align:left;
   font-size:16pt;
   font-weight:400;
   color:#5f4b3f;
   margin-right:0.5em;
}

#subnav {
   position:relative;
   width:750px;
   height:auto;
   float:left;
   text-align:left;
   font-size:10pt;
   color:#C5fb3f;
   margin-right:0.5em;
}

#nav13 {margin-left:10.6em;}
#nav17 {margin-left:17.9em;}
#nav19 {margin-left:24.5em;}
#nav21 {margin-left:24.5em;}

div#mainnav ul li#topnav2, div#mainnav ul li#topnav3, div#mainnav ul li#topnav5 {list-style:disc; list-style-type:disc;}


#mainnav li, #subnav li {
   float:left;
   margin-right:1em;
}

#mainnav li a, #subnav li a {
   text-decoration:none;
   color:#5f4b3f;
}

#mainnav li a:hover, #subnav li a:hover {
   text-decoration:none;
   color:#af311c;
}

#mainnav li.active a, #subnav li.active a {color:#f29733; text-decoration:none;}

thanks for help and all the best
carol

793 Posts

ottogal Reply #2, 15 years, 10 months ago

If i click on Projects is should jump to html or if i click on about i should jump to contact and so on. I hope this is possible.

Of course this is possible - aren’t we in MODx?
For that aim there is the snippet [tt]FirstChildRedirect[/tt] (in-the-box, you don’t have to install it). Just put the call

[!FirstChildRedirect!]

into the content of the PROJECTS and ABOUT pages respectively.
I can’t say anything to Chrome or Safari.

30 Posts

carol Reply #3, 15 years, 10 months ago

Hey Ottogal,

thanks the FirstChilRedirect it works wonderful.

The bullets problem i could solve with a background-image. ;-)

all the best
Carol